<h1> - Семантическое влияние против SEO.

Существует много споров по поводу архитектуры структуры заголовка в html5. Прочитав различные статьи, я пришел к трем возможным архитектурам, которые имеют для меня логический смысл, но я не уверен, какой из методов является правильным подходом. Я перечислю их ниже с примерами кода, и, надеюсь, кто-то может пролить свет на правильный баланс, или еще хуже / лучше, скажет страшное «Вы делаете это неправильно» и протянуть руку.

Подход 1: Версия А

Одиночный <h1>: использование заголовков только для конкретного контента.

Это оставляет в <h1>качестве навигации верхнего уровня заголовок конкретной страницы, при этом перемещаясь по <h2-6>мере необходимости в области содержимого. В то время оставляя <header>, <nav>и , <footer>как «Untitled» элементы.

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <section>
    <h2>
      <section>
        <h3>

<footer>
  <!-- no headings -->

Подход 1: Версия 2

Несколько <h1>: только использование заголовков только для конкретного контента.

То же, что 1A, с добавлением нескольких, одинаково важных, тем для контента страницы. (например, возможно для блогов или разделенных тематических страниц)

<header>
  <nav>
    <!-- no headings -->

<div role="main">
  <h1>
  <article>
    <h2>
  <article>
    <h1>

<footer>
  <!-- no headings -->

План подхода 1: наиболее логичный для SEO (мое мнение из моего исследования)

• Без названия ТЕЛО
  • Без названия NAV
• основной заголовок
  • Заголовок раздела
    • Заголовок подраздела
  • Без названия РАЗДЕЛ

Подход 2:

Multiple <h1>'s: выделение структуры контура и иерархии содержимого

Это применяет заголовки к элементам всего сайта и использует множественные элементы для элементов <header>, не ориентированных на контент.<nav><footer><h1>

<header>
  <h1>
  <nav>
    <h2>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h1>
  <section>
    <h2>

Подход 2 Схема: наиболее логичная для семантической схемы (опять же, мое мнение)

• Заголовок заголовка
  • Заголовок навигации
• основной заголовок
  • Заголовок раздела
    • Заголовок подраздела
• Заголовок нижнего колонтитула
  • Заголовок раздела

Подход 3

Единый <h1>: Фокус иерархии контента; нижний уровень <h1-6>для элементов всего сайта

Это применяет заголовки к элементам всего сайта , и БЕЗ использования множественных элементов для элементов <header>, не ориентированных на контент.<nav><footer><h1>

<header>
  <h2>
  <nav>
    <h3>

<div role="main">
  <h1>
  <section>
    <h2>
    <section>
      <h3>

<footer>
  <h2>
  <section>
    <h3>

План подхода 3: своего рода гибрид обоих подходов

• Заголовок заголовка
  • Заголовок навигации
• основной заголовок
  • Заголовок раздела
    • Заголовок подраздела
  • Заголовок нижнего колонтитула
  • Заголовок раздела

Итак, с учетом всего сказанного, как мне все это понять? Имеет ли какой-либо один подход большую семантическую ценность, чем другой? Есть ли смысл в SEO? Есть ли счастливый баланс, который может быть достигнут?

Источники: их было намного больше, это те, которые я помню сейчас

• https://youtu.be/GIn5qJKU8VM
• http://accessiblehtmlheadings.com/
• http://html5doctor.com/outlines/
• http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

Для начала, ни один из ваших примеров не имеет ничего общего с семантикой. Ваш вопрос полностью основан на модели парсера, где страница читается сверху вниз традиционным способом.

По этой причине ваш первый пример верен. Следующие примеры не дадут вам предсказуемых результатов и могут привести к серьезному сердечному ожогу.

Пожалуйста, поймите, что ваша веб-страница будет концептуально рассматриваться несколькими способами: во-первых, следуя традиционной модели DOM, где HTML и тому подобное оцениваются с точки зрения пользователя; во-вторых, только текст с простой разметкой для обозначения заголовков, подзаголовков, контента и т. д .; и в-третьих, с использованием семантического представления, в котором к тегам заголовка в индексе применяется только незначительный вес в зависимости от его места в иерархии h1-6. Из модели DOM вы получите такие вещи, как тег заголовка, метатег описания и т. Д., Которые будут отсутствовать в двух других представлениях. Тем не менее, DOM-представление мало что делает для взвешивания вашего контента. Его основная функция - понять вашу страницу, где находится ваша навигация, где находятся верхний и нижний колонтитулы, где начинается и заканчивается ваш контент и т. Д.

На что вы действительно должны обратить внимание - это только текст и семантические представления. Семантическое представление главным образом получено из представления только текста, однако оно несет с собой различную лингвистику, психосемантику, семантику и другой анализ вашего контента.

Я не буду описывать семантику снова, но я укажу вам ответ, который я написал недавно, который представляет собой мини-учебник по этой теме: почему веб-сайт с ключевыми словами имеет более высокий рейтинг, чем тот, который отсутствует в результатах поиска Google?

Поскольку сеть основана на печатной странице, а парсеры с первых дней следовали этим традициям и в основном не изменились, избежать их невозможно. Вот ответ, объясняющий порядок чтения заголовков, который остается наилучшей стратегией на основе модели синтаксического анализатора. Улучшение рейтинга Google по общим и конкретным ключевым словам.

Хотя я признаю, что при перемещении тегов заголовков может возникнуть какой-то эффект, я спрашиваю: мудро ли это делать? Конечно нет! То, как вещи взвешиваются сегодня, может не совпадать с тем, как они взвешиваются завтра. Следование традиционному формату гарантирует предсказуемые результаты, в которых простое изменение веса может привести ваш сайт к минимуму.

Вот пример того, как это работает: Преимущества доменного имени в SEO. Игнорируйте заголовок, пропустите верхнюю часть ответа и перейдите к точке зрения программистов.

Если вы прочитаете эти три ответа, вы легко поймете влияние тега заголовка. Очень возможно испортить производительность вашей страницы / сайтов, становясь милыми от того, как вы их устроите. Даже следуя традиции, вы можете очень быстро отменить тег заголовка и тег h1, оптимизировав несколько тегов нижнего заголовка. Тщательный баланс является ключом.

Наконец, я предупрежу вас обо всех этих онлайн-советах SEO от людей, которые не являются инженерами. Это рэкет, чтобы зарабатывать деньги и соперничать за ваше внимание. Как работают поисковые системы, не секрет. Это там, если вы знаете, где искать. Большинство экспертов по SEO вообще не являются экспертами в том смысле, что они не могут рассказать вам о том, как соединяются поисковые технологии. Если не считать инженера в Google или Bing, мы никогда не сможем точно знать, как работают эти поисковые системы. К счастью, Google сказал нам достаточно (и на самом деле они сказали нам почти все, что нам нужно знать - и нет, это не от парня по имени Мэтт), что если вы знаете науку и технологии, довольно разумный набор предположений может быть сделано. С моей точки зрения, большинство оптимизаторов более ошибочны, чем правы, в то время как у некоторых показатель посещаемости намного выше среднего.

Ниже приводится описание спецификации HTML5, основанное на предположении, что потребители (например, поисковые системы) будут ожидать и работать с тем, что указано в стандартах HTML. В современной практике такие детали разметки, вероятно, не имеют большого значения для SEO, но это может быть важно для других потребителей и доступности.

Я буду использовать заголовки соответствующего ранга, так как это то, что поощряет HTML5 , но его также можно использовать h1везде (если вы всегда используете элементы контента секционирования, где это уместно).

Вы не можете «применять» заголовки headerили footerэлементы, потому что они не являются секционирующими контентом (они могут содержать только заголовки, но этот заголовок не будет ограничен областью действия header/ footer).

Каждый секционирования содержание элемента ( section, article, nav, aside) , и каждый секционирования корневой элемент ( body, blockquoteи т.д.) могут иметь заголовок применяется.

Эти элементы секционирования / корневые элементы и элементы заголовка h1- h6единственные элементы, которые имеют значение для структуры документа .

Несмотря на то, что каждый раздел «жаждет» заголовка, указывать его не обязательно (в таком случае он получает «подразумеваемый» заголовок без названия). Хотя это часто бывает полезно, но есть случаи, когда в этом нет необходимости. Например, если у вас есть только одна навигация, достаточно navиметь заголовок без заголовка. Но если ваш сайт будет иметь несколько переходов, возможно, имеет смысл использовать заголовки, которые объясняют различные цели.

В вашем подходе 1 bodyэто такой безымянный раздел (но это только в том случае, если вы navвидите перед первым элементом заголовка; в противном случае это h1будет заголовок для всего документа).
Я не думаю, что наличие bodyраздела без названия - это хороший выбор. Это первая запись в общих чертах, и, в идеале (но не обязательно), все, что следует, входит в сферу действия этой записи.

Для типичного веб-сайта с глобальной навигацией имеет смысл ( более подробное объяснение ) использовать имя сайта для bodyзаголовка раздела, поскольку глобальная навигация принадлежит всему сайту , а не только текущему документу:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
-->

Основное содержание этого документа также должно находиться в области заголовка сайта, так как сайт является контекстом основного содержимого этого документа, то есть является частью вашего сайта:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <article> <!-- document content -->
    <h2>My blog post</h2>
  </article>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "My blog post"
-->

Если у вас есть несколько разделов основного контента, например, список сообщений в блоге, часто имеет смысл использовать объект section, содержащий все эти элементы article, вместо того, чтобы иметь в articleкачестве прямых потомков body:

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- document content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
-->

Если у вас есть нижний колонтитул всего сайта, настолько сложный, что для него требуются элементы секционирования, он снова должен быть на том же уровне, что navи основной контент (так как он принадлежит сайту, а не основному контенту):

<body>
  <h1>My site</h1> <!-- site name -->

  <nav></nav> <!-- site navigation -->

  <section> <!-- main content -->
    <h2>Recent blog posts</h2>

    <article>
      <h3>My blog post</h3>
    </article>

    <article>
      <h3>Another blog post</h3>
    </article>

  </section>

  <section> <!-- site footer -->
    <!-- this section should be the child of a 'footer' element -->
  </section>

</body>

<!-- Outline:
  1. "My site"
    1.1 Untitled nav
    1.2 "Recent blog posts"
      1.2.1 "My blog post"
      1.2.2 "Another blog post"
    1.3. Untitled section
-->

(Во всех этих примерах навигация идет перед основным контентом, но часто имеет смысл сначала иметь основной контент. Поменять их местами возможно. Следует только убедиться, что h1имя сайта стоит перед любыми другими разделами / заголовками.)