Незважаючи на те, що для цілей 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 Інструменти для веб-майстрів тощо), таких сайтах, як Amazon, Google та інші люди, які явно хвилюються. щодо таких мізерних показників підвищення продуктивності не дотримуйтесь цих правил.