<h1> - Семантичний вплив порівняно з SEO-впливом

Існує багато дискусій з приводу архітектури структури заголовка в html5. Прочитавши різні статті, я підійшов до трьох можливих архітектур, які мають для мене логічний сенс, але я не впевнений, що є власне правильним методом підходу. Я перелічу їх нижче з прикладами коду, і, сподіваюся, хтось може пролити трохи світла на належний баланс, або ще гірше / ще краще, скажу жахливий "Ти робиш це неправильно" і подати руку.

Підхід 1: Версія A

Одномісний <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:

Множинні <h1>: Підкресліть структуру структури та ієрархію вмісту

Це стосується заголовків до елементів сайту <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>s для елементів, не орієнтованих на вміст.

<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 сказав нам достатньо (і насправді вони розповіли нам майже все, що нам потрібно знати, і ні, це не прийшло від хлопця на ім'я Метт), що якщо ви знаєте науку та технології, досить розумний набір припущень може бути зробленим. З моєї точки зору, більшість SEO більше помиляються, ніж правильні, в той час як деякі мають набагато вищий показник звернення, ніж середній.

Далі йдеться з точки зору специфікації 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"
-->

Якщо у вас є кілька розділів основного вмісту, наприклад, список публікацій в блозі, часто має сенс використовувати a, 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назва з сайтом постає перед будь-якими іншими розділами / заголовками.)