Заголовки (теги h1, h2, h3) в html5 і seo помилки - приклади

Перший заголовок, на який часто відвідувач сайту не звертає увагу - той, який показаний на вкладці браузера (докладніше про тег title). Для пошукової системи він найголовніший, так як саме його Яндекс, Google та ін. Найчастіше (див. Виключення) використовують в якості заголовка сниппета.

Другий заголовок знаходиться в тезі h1. Далі підзаголовки менших розмірів. Якщо зібрати їх всі, то повинна бути чітко видна структура веб-документа подібно главам шкільного підручника. Така роздрібнена на розділи і підрозділи інформація легко сприймається, знайти необхідний матеріал на сторінці не викликає ускладнень.

Перевірити h1 сторінки

Зараз фразу в будь-якому тезі можна зробити заголовком за допомогою стилів CSS: збільшити шрифт і / або розмір тексту. Для того, щоб перевірити кількість тегів h1 і їх вміст, досить подивитися код сторінки сайту за допомогою браузера. ніяких додаткових розширень не потрібно. Такий інструмент, можна вивести, якщо натиснути клавішу .

Заголовки (теги h1, h2, h3) в html5 і seo помилки - приклади

Різниця в використанні h1. h2. h3. h4. h5. h6 в HTML5 і HTML4

Один h1 на сторінці (версія HTML4)

  • Покрокове рішення судоку
    • Програма вирішення судоку з поясненнями (онлайн)
    • Правила гри
    • Алгоритм заповнення осередків кросворду
      • Спосіб 1. «Приховані одинаки»
      • Спосіб 2. «Одинаки»
    • Методи вирішення судоку
      • Стратегія 1. Кандидат в двох-трьох клітках одного квадрата
      • Стратегія 2. Групи кандидатів

Ієрархія на дійсно існуючої сторінці реалізується завдяки тегам h1 - h6. h1 - найголовніший, має найбільший розмір, можна використовувати тільки один h1. h6 - самий незначний з заголовків, має найменший розмір і найвищий рівень вкладеності. Такий варіант найбільш поширений у SEO оптимізаторів:

Заголовки h1 - h6 в HTML5

Кожен пункт дерева заголовків створює один з варіантів:
  • body. коли немає h1 - h6 перед першими дочірніми тегами article. aside. nav. section.
  • структурні теги article. aside. nav. section. Дочірні h1 - h6 будуть вкладені в попередній структурному тегу заголовок.
    Увага: header. main і footer не є структурними тегами.
  • h1 - h6. які не мають батьків blockquote. details. fieldset. figure і td. Рівень вкладеності пункту визначається рангом тега h.
Важливі зауваження:
  • Документ може містити декілька заголовків верхнього рівня (в прикладі нижче пункти 1-3).
  • Документ або навіть структурний тег можуть містити два і більше тега h1 (в прикладі нижче пункти 2.1-2.3).
  • Послідовність h не важлива, можна пропускати теги: h1 »h2» h4. Якщо відсутня h1. його місце займе h2 або навіть h6.
  • Можна змінювати порядок тегів: h3 »h4» h1 (h1 матиме той же рівень вкладеності, що перший тег h. В нашому випадку h3).
  • Так як код перестає бути інтуїтивно зрозумілим, специфікація рекомендує (необов'язково):
    • кожен структурний тег починати з h1. Але на пристроях, які не підтримують HTML5 або в крайньому випадку CSS, буде жахлива картина.
    • теги h обертати в структурний тег. Але, обсяг HTML-коду впливає на швидкість завантаження веб-сторінки. Тому не особливо хочеться його збільшувати, а то й потрібно зовні (скажімо, кольором фону) або семантично відокремити кордону розділів.
  • 1
    • 1.1
    • 1.2
      • 1.2.1
    • 1.3
    • 1.4
    • 1.5
      • 1.5.1
  • 2
    • 2.1
    • 2.2
    • 2.3
  • 3
Важливі зауваження:
  • Якщо над або в article. aside. nav. section відсутня тег h. пункт матиме заголовок untitled.
  • Теги article. aside. nav не обов'язково повинні мати вкладений тег h.
  • untitled page
    • untitled article
      • untitled navigation
    • Тема всередині article
  • Тема верхнього рівня

Приклад верстки HTML5

Оптимізація структури заголовків і підзаголовків веб-сторінки

Також в алгоритм пошукових систем може бути закладено зручність користування сайтом, наприклад, більш естетично і природно, коли частина заголовка не є посиланням.

Офіційні повідомлення Яндекса:
  1. Правильне оформлення заголовків в тексті допомагає. роботу Яндекса простіше розібратися зі структурою документа. Тому слід виділяти цими тегами заголовки відповідно до ієрархією документа. [Help.yandex.ru]

SEO заголовок за підсумками експерименту

Експеримент 1: «Оптимальна кількість h1»

6-5-7 років [yandex.ru]. В Яндексі h1 повинен бути єдиним. Тобто на Головній h1 - це назва сайту, а на внутрішніх сторінках - назва внутрішніх сторінок.

Примітка: в Гуглі індексація блискавична, тому тут було перевірено і відсутність впливу алгоритму "Google Fresh". Позиції змінилися після того, як сторінки були додані в Г +. Тобто так, є різниця один h1 або кілька, але цього пошуковики надають дуже маленьке значення.

Експеримент 2: «Чи є толк від h3»

Яндекс і Google не вносять h3 в заголовок сниппета. На експериментальній сторінці не були використані title. h1. h2.

Виняток для Яндекса: коли виділений абзац містить від 20 до 200 символів. Тут не важливо в якому тезі він буде перебувати: хоч в h3. хоч в span.

SEO поради

Затвердження 1: заголовок верхнього рівня повинен містити ключові фрази. але при цьому не бути спамние, тобто слова всередині нього повинні схилятися згідно з правилами української мови. Поганий приклад: «Одяг оптом від виробника недорого».

Затвердження 2: щоб не писати кілька однакових за змістом статей, в заголовки меншого рівня бажано включити схожі запити і синоніми. У більшості випадків для їх знаходження досить фантазії, wordstat.yandex.ru і пошукових підказок. Те, що менш затребуване і не поміщається в заголовки, можна упомінуть в тексті.
Важливо: немає необхідності впихнути весь перелік wordstat. Текст повинен бути цікавим, Новомосковскемим і "без води".

Заголовки (теги h1, h2, h3) в html5 і seo помилки - приклади

У прикладі з судоку люди шукають одне і теж, але називають це по різному: "методи", "алгоритм", "способи", "правила", "методика", "прийоми", "секрети", "принципи", "приклади ".

Чи можна всередині тега h використовувати інші теги, наприклад, img. a?

Помилка 1: всередині тегів h1 - h6 не можна використовувати інші теги.

Увага: в ряді CMS (в т.ч. Blogger) є поле з назвою сторінки сайту. Його вмістом автоматично заповнюється h1 і велика частина title. Інша частина title або відсутній, або однакова для кількох сторінок, наприклад, їй може бути назва сайту. Але в тезі title може перебувати тільки текст [w3.org]. Тому не можна в поле назви сторінки вносити будь-які теги.

Заголовки (теги h1, h2, h3) в html5 і seo помилки - приклади

Помилка 2: в заголовку не повинно бути картинки. Дві записи рівнозначні для w3.org. Google. але не для Яндекса (не індексують атрибут alt).

Помилка 3: не варто укладати заголовки в додаткові контейнери. Звідки ноги ростуть у цих тверджень? Потрібно, наприклад, вирівняти заголовок по вертикалі.

Затвердження 2: є невелика різниця в тому як розташовувати посилання: всередині тега h або тег h всередині посилання. І вона полягає в тому, що в першому випадку посиланням є тільки текст, а по-другому - весь блок.

Чи повинен title відрізнятися від h1?

"Чи може title бути таким же як h1?" - да може.

Чи потрібно заголовки бічних блоків брати в h?

До того ж для людей з вадами зору буде зрозуміло що до чого, а не суцільні untitled.