Користь для SEO від структурної семантичної розмітки HTML5

Наша команда-партнер Artmisto

Тим, хто цікавиться новинами вебмастерам вже набили оскому статті про семантичну розмітку HTML5 - про те, як круто і корисно використовувати нові теги при верстки. І назви цих тегів говорять самі за себе, так що будь-який бот з ними в курсі, де на вашій сторінці стаття, де шапка, а де сайдбар. В ідеалі виглядає добре, а в реалі ... Чи правильно ми розуміємо приписи щодо використання нових семантичних тегів html5?

Якщо коротко, суть нових тегів така - замінити нічого не значущий (нейтральний) тег <div> іншим тегом, назва якого підказує суть його вмісту. Наприклад, міняємо <div id = "header"> на <header>. Так HTML-текст сторінки стає більш читабельним, особливо для пошукових роботів. Картина виходить ось така:

І мозок вебмастера відразу розуміє це так: header - це шапка сайту, nav - навігація по сайту, aside - сайдбар, footer - підвал, article - стаття (основний контент). Трохи незрозуміло про section - але об'єднаю цим тегом якусь врізку до статті. Так ми відокремимо основний оптимізований контент (по якому хочемо ранжуватися в топі) від дизайну, реклами і тригерів цільових дій, і будемо чекати профіту в вигляді розкрутки сайту . Але чи дійсно такий зміст вклали в нові теги автори HTML5?

Візьмемо наприклад <header>, опис тега на офіційному сайті специфікації W3C:

The <header> element represents a group of introductory or navigational aids.

Що в перекладі дає нам:

Елемент <header> представляє собою групу вступних або навігаційних допоміжних елементів.

А якщо це перевести ще й на людську мову, виходить, що в блоці header очікується заголовок статті, введення і навігація по документу, якщо використовувати цей тег за призначенням. А ми хочемо запхати в цей тег шапку сайту, що має непряме відношення до змісту статті?

А тепер дивимося там же (на w3c.org - в першоджерелі) опис тега <article> - і ситуація підтверджується. Наведу простий і наочний приклад, який демонструє, як наказано використовувати тег article в пості блогу:

Підкреслюю ще раз, що приклад взятий з офіційного сайту - з специфікації семантичної розмітки HTML5. Як бачите, теги header і footer є частиною статті, вкладені в тег article. Header містить групу вступних елементів, а в footer укладені коментарі.

Роблю висновок, що семантична розмітка створена для структурування контенту (основного матеріалу сайту, статті), а не всієї сторінки сайту. Зазвичай шапка сайту, підвал, сайдбарі, навігація по сайту не мають відношення до структури статті, розміщеної на конкретній сторінці. Тому новими тегами HTML5 ми повинні при необхідності розмічати тільки статтю при її написанні, але не тему оформлення сайту.

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

Запис опублікована 28 квітня 2017 року. Хтось говорив, що я мало пишу в рубрику «SEO», так читайте ж: