HTML-теги для SEO: які теги важливі, з прикладами

Пошукові системи й ШІ-асистенти читають вашу сторінку як код, раніше ніж хтось побачить її на екрані. Жменька HTML-тегів для SEO визначає, як цей код розуміється: яка адреса потрапляє в індекс, який заголовок з'являється у видачі, про що сторінка і як вона виглядає, коли нею діляться. Google перелічує meta-теги й атрибути, які підтримує, на одній сторінці своєї документації Search Central, і все поза цим списком на Google Search не впливає. Цей посібник розглядає кожен корисний тег із прикладом, помилки, яких слід уникати, і теги, про які можна забути.

Які HTML-теги важливі для SEO?

Таблиця нижче це довідковий список. Теги в head описують сторінку для машин; теги в body структурують те, що читають люди.

Які теги head керують тим, як Google показує вашу сторінку?

Тег title

Тег title це найважливіший тег на сторінці. Google каже, що обмежень на довжину елемента title немає, але заголовкове посилання обрізається під ширину пристрою, що на практиці означає близько 50 - 60 символів на десктопі. Google також може його переписати: у його документації перелічено джерела, які він використовує, від елемента title і головного видимого заголовка до заголовків H1, тегу og:title та анкорного тексту посилань, що ведуть на сторінку. Title, який збігається з H1 і змістом сторінки, Google залишає. Пишіть унікальний title для кожної сторінки, з головним ключовим словом ближче до початку і брендом наприкінці.

Meta description

Meta description не змінює ранжування, але часто постачає сніпет під заголовком і тому впливає на кліки. Google може замінити його уривком сторінки, що краще відповідає запиту. Пишіть його як коротку відповідь з наступною користю, від 120 до 160 символів, і ніколи не використовуйте один опис на кількох сторінках.

Тег meta robots

Тег robots повідомляє краулерам, що вони можуть робити зі сторінкою. Найуживаніше значення noindex тримає сторінку поза результатами пошуку; серед інших nofollow, nosnippet і max-snippet, що обмежує довжину текстового сніпета. Для файлів без розділу head, як-от PDF, ті самі директиви вказують у HTTP-заголовку X-Robots-Tag. Забутий noindex у робочому шаблоні це одна з найпоширеніших причин втрати трафіку, тож перевіряйте його після кожного випуску.

Viewport і charset

Google зазначає у своїй документації, що наявність тегу viewport вказує на сторінку, зручну для мобільних. Оскільки Google індексує мобільну версію сайтів, цей тег потрібен на кожній сторінці. Оголошення charset (Google рекомендує UTF-8) запобігає зіпсованим символам у заголовках і сніпетах, що важливо для багатомовних сайтів.

Які теги повідомляють Google, яку адресу індексувати?

Два теги link у head керують дублікатами та мовами. Тег canonical вказує пріоритетну версію, коли той самий контент доступний за кількома адресами (фільтри, параметри відстеження, HTTP і HTTPS). Google сприймає його як сильну підказку, поряд із редиректами та внутрішніми посиланнями, тому він працює найкраще, коли всі сигнали вказують на одну адресу. Використовуйте абсолютну адресу, залишайте один canonical на сторінку і ніколи не спрямовуйте його на сторінку, закриту від індексації чи з noindex.

Атрибут hreflang повідомляє Google, яку сторінку показувати для якої мови чи регіону. Згідно з посібником Google про локалізовані версії, кожна версія має вказувати саму себе й усі інші, а значення x-default може вказувати сторінку для користувачів, чия мова не охоплена. Відсутність зворотних посилань це найчастіша помилка hreflang: якщо сторінка A вказує на сторінку B, сторінка B має вказувати назад на сторінку A.

Які теги body допомагають пошуковим системам розуміти контент?

Заголовки від H1 до H6

Заголовки задають структуру сторінки. Використовуйте один H1, що називає тему, теги H2 для основних розділів і теги H3 для кроків чи пунктів усередині розділу, не пропускаючи рівнів заради візуального ефекту. Google казав, що кілька тегів H1 не спричиняють санкцій, але один чіткий H1 лишається найпростішою структурою для користувачів і допоміжних технологій. Заголовки H2 у формі запитань («Як працює X?») також відповідають тому, як люди формулюють пошукові запити й промпти.

Альтернативний текст зображень

Google пояснює у своїх рекомендаціях із SEO зображень, що використовує альтернативний текст разом із комп'ютерним зором і контентом сторінки, щоб зрозуміти зображення, і що наповнення атрибутів alt ключовими словами може призвести до того, що сайт вважатимуть спамом. Описуйте, що показано на зображенні, короткою фразою. Google також зазначає, що не індексує фонові зображення CSS, тож будь-яке зображення, яке має ранжуватися, потребує справжнього елемента img.

Посилання та їхні атрибути rel

Елемент a це спосіб, у який краулери відкривають сторінки, тож внутрішні посилання мають бути справжніми посиланнями з href, а не кнопками, що обробляються JavaScript. Атрибут rel уточнює зовнішні посилання: sponsored для платних розміщень, ugc для коментарів і дописів на форумах, nofollow для посилань, які ви не хочете схвалювати. З 2020 року Google сприймає ці значення як підказки. Описовий анкорний текст допомагає і користувачам, і пошуковим системам.

Семантичні елементи HTML5

Елементи на кшталт main, article, nav, header, footer і section повідомляють машинам, яка частина сторінки є основним контентом, а які частини повторюються на кожній сторінці. Самі по собі вони не підвищують ранжування, але полегшують виділення основного контенту, для пошукових систем, програм зчитування з екрана й інструментів ШІ однаково. Наш посібник із семантичного HTML докладно описує кожен елемент. У тексті strong і em позначають наголос; використовуйте їх для ключових термінів, а не для цілих абзаців.

Які теги формують соціальні прев'ю та розширені результати?

Протокол Open Graph, створений Facebook і тепер підтримуваний більшістю соціальних мереж та месенджерів, визначає теги og:title, og:description, og:image і og:url, що будують картку-прев'ю, коли сторінкою діляться. Без них платформи вгадують, часто з не тим зображенням. Результат можна перевірити за допомогою інструмента перегляду Open Graph перед публікацією.

Структуровані дані у форматі JSON-LD, розміщені в тегу script, описують сторінку словником Schema.org: стаття, продукт, організація, хлібні крихти, FAQ. Google використовує їх для розширених результатів, а системам ШІ вони дають явні факти про сутність, що стоїть за сторінкою. Розмітка має описувати те, що видно на сторінці. Їхню роль у відповідях ШІ ми розглядаємо в нашому посібнику про структуровані дані та пошук із ШІ.

Які HTML-теги Google ігнорує?

Список підтримуваних Google тегів також підказує, що можна припинити підтримувати:

• Meta keywords: Google заявляє, що тег meta keywords не використовується Google Search і не впливає на індексування чи ранжування.
• Невідомі meta-теги: Google ігнорує meta-теги, які не підтримує, як-от meta author або meta revisit-after.
• Атрибут lang: Google визначає мову сторінки за її текстом, а не за атрибутом lang. Залиште атрибут для доступності та інших інструментів і використовуйте hreflang, щоб пов'язати мовні версії.
• Meta refresh як редирект: він працює, але Google натомість рекомендує серверний редирект 301.

Чи важливі HTML-теги для відповідей ШІ?

Так, і з простої причини: ChatGPT, Claude, Gemini і Perplexity витягують уривки зі сторінок, а чистий HTML полегшує пошук цих уривків. Кілька ШІ-краулерів завантажують сирий HTML без виконання JavaScript, тож title, canonical чи блок тексту, вставлені скриптами, можуть до них ніколи не дійти. Чітка ієрархія заголовків розбиває сторінку на самодостатні відповіді, списки й таблиці тримають факти разом, а структуровані дані викладають факти без двозначності. Це технічний бік оптимізації для генеративних систем: ті самі теги, що допомагають Google, допомагають і ШІ-асистентам точно вас цитувати.

Як перевірити HTML-теги сторінки?

1. Прочитайте сирий вихідний код. Відкрийте вихідний код (Ctrl+U) і знайдіть теги title, meta description, robots, canonical і hreflang. Якщо тег з'являється лише у відрендереній сторінці, він залежить від JavaScript.
2. Порівняйте з тим, що бачить Google. Інструмент перевірки URL у Google Search Console показує HTML, який відрендерив Google, і canonical, який він обрав.
3. Перевіряйте сторінка за сторінкою. Безкоштовне розширення Sorank для Chrome показує відсутні чи дубльовані теги та виправлення для сторінки, яку ви переглядаєте.
4. Перевіряйте весь сайт. Краулер знаходить дубльовані title, відсутні alt і неправильні canonical на тисячах адрес; наша добірка інструментів технічного SEO порівнює варіанти.
5. Перевіряйте після кожного випуску. Зміни шаблонів це місце, де з'являються теги noindex, зламані canonical і порожні title.

Правильно налаштувавши наведену вище дюжину тегів, ви охопите майже все, що HTML може зробити для SEO; решта роботи це контент і посилання. Якщо вам потрібні сторінки, які одразу виходять із чистими title, заголовками, внутрішніми посиланнями та структурованим контентом, генератор статей для блогу Sorank пише й публікує їх у режимі autopilot, від $49 на місяць при річній оплаті (див. ціни).