Порядок метатегов HTML

16

SEO компании предложил изменить порядок наших мета - тегов HTML так , что <title>и <meta name="description">первые два. Они говорят, что это должно гарантировать, что поисковые системы могут использовать эти два тега. У меня сложилось впечатление, что порядок тегов внутри заголовка документа не имеет значения. Я был неправ? Есть ли на самом деле поисковых систем , которые предполагают , что первые две метки всегда titleи descriptionи отказаться от их искать , если они не являются?

Kaivosukeltaja
источник

Ответы:

15

Ты прав. Порядок этих тегов не имеет значения для SEO. Они просто должны присутствовать. Кто бы ни сказал, что это, очевидно, не имеет смысла (и, конечно, бизнес SEO. Вздох).

Джон Конде
источник
Можете ли вы предоставить источник или тематическое исследование?
s_hewitt
3
Просто мнение, основанное на опыте. Вот обсуждение SearchEngineWatch по теме - порядок не имеет значения: forums.searchenginewatch.com/showthread.php?t=16452
Ciaran
7

Хотя для целей 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 и другие люди, которые явно заботятся о таком незначительном увеличении производительности не следуйте этим правилам.

Дэвид Элдридж
источник
В то время X-UA-Compatible, viewportи Apple , сенсорные иконки по - прежнему (относительно) нового в 2010 году, все были в использовании. HTML5 влиял только на длину объявления кодировки. CSS, JS и конвейерная обработка изображений были проблемой в то время, а также (ре) рендеринг страниц после применения CSS и JS. Несмотря на это, я не смог найти эту информацию в одном месте (за headисключением документов html), и после того, как наткнулся на этот вопрос, было бы неплохо сделать это здесь.
Дэвид Элдридж
Хороший ответ @DavidEldridge. Но не могли бы вы обновить свой ответ, включив в него application/ld+jsonскрипты для структурированных данных? Для скоростных целей. Где лучше всего это поставить? Должны ли мы рассматривать это как внешние JavaScriptфайлы?
Брендан Фогт
2

С функциональной точки зрения следующее из Bootstrap является лучшим порядком метатегов:

    1) <meta charset="utf-8">
    2) <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    3) <title></title>
    4) <meta name="description" content="">
    5) <meta name="viewport" content="width=device-width, initial-scale=1">

По словам людей в Google, для SEO важно

  1. быть мобильным
  2. название и описание
  3. уникальный и полезный контент

Если ваш сайт не подходит для мобильных устройств, они даже не смотрят на 2) или 3). Если они удобны для мобильных устройств, они могут использовать заголовок и описание при перечислении вашего сайта. Никаких гарантий на это. Они могут решить составить собственное описание на основе того, что они нашли на вашем сайте.

Если ваш контент является плагиатом или повторяется, и если вы пытаетесь наполнить его ключевыми словами или использовать другие методы «BlackHat», это повредит вам и, возможно, забанит вас.

Майкл Мориарти
источник