Хотя для целей SEO может быть правдой, что порядок не имеет значения, это не так, когда речь идет о других вещах, таких как безопасность, отображение контента (символов) или скорость загрузки. Хорошей идеей будет примерно таким образом упорядочить заголовок вашей страницы (предполагая синтаксис HTML5):
<head>
До сих пор в документе вы не должны были использовать символы, не относящиеся к ASCII, поэтому кодирование символов пока не является проблемой. Но вероятность использования не-ASCII символов заметно возрастает, когда вы открываете этот заголовок. Соответственно (и при условии, что вы не декларируете свою кодировку символов программно или на уровне сервера), вы должны сделать следующий оператор вашей декларацией кодировки символов. Это также удовлетворяет синтаксическим анализаторам / браузерам / агентам, которые будут анализировать операторы кодировки символов:
<meta charset="utf-8">
Следующие два ( X-UA-Compatibleи viewport) рекомендуются ребятами из Bootstrap (совсем недавно, как v3.3.4). Хотя я почти уверен, что эти рекомендации основаны на производительности, большинство из того, что я бы сказал, было бы умозрительным:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Если вы думаете о независящем от устройства дизайне / разработке (включая небольшие пользовательские агенты, не относящиеся к рабочему столу), вам следует включить следующее:
<meta name="viewport" content="width=device-width, initial-scale=1">
Наконец, название:
<title>Ingenious Page Title</title>
Далее вы предлагаете CSS как можно скорее после заголовка (без «дневного света» между ними):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Если вы используете стили на уровне страницы, они будут здесь. Во многом это связано с «каскадной» природой CSS, а именно: последнее объявление стиля с одинаковыми уровнями специфичности (например, два оператора, предназначенные для абзаца p). Чтобы упростить переопределение внешних стилей (т. Е. Без использования большей специфичности или !important), вы должны поместить стили уровня страницы после внешних стилей <link>. Кроме того, обычно нежелательно использовать директиву @import в стилях на уровне страницы, поскольку это будет препятствовать одновременной загрузке других ресурсов стиля:
<style>body{color:black;}</style>
Это тот момент, когда кажется наиболее подходящим поместить метатеги, значки и другие элементы. Можно утверждать, что значки избранного или аналогичные ресурсы (например, изображения приложений iOS) будут загружены раньше, чем большинство метатегов, поскольку загрузка этих активов начинается незначительно раньше.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
Поскольку он блокирует / задерживает рендеринг, если вы намереваетесь требовать скрипты, загружайте их настолько поздно, насколько это разумно. Если они должны быть в head, вы можете загрузить их до закрытия head( </head>). Если вы можете загрузить их позже, поместите их перед закрытием bodyтега ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
В большинстве случаев кажется неважным уделять большое внимание порядку метатегов для целей SEO, учитывая, что индексирующие боты (то есть пауки поисковых систем) будут занимать всю страницу. В противном случае, как они будут индексировать содержимое страницы или обновлять этот индекс позже?
Для меня примечательно, что из всего, что мы думаем, что мы знаем, и из всех рекомендаций, которые мы находим в Интернете (даже из таких мест, как Google и Bing Webmaster Tools и т. Д.), Такие сайты, как Amazon, Google и другие люди, которые явно заботятся о таком незначительном увеличении производительности не следуйте этим правилам.