Базові HTML теги для SEO

HTML – стандартна мова програмування, яка служить для розмітки документів та перегляду сторінок. Браузери, зчитуючи кодування, виводять на екран зручний для сприйняття контент.

Для просування сайту в мережі, нема потреби професійно розбиратися в HTML. Однак існують теги, які безпосередньо пов’язані з SEO, їх бажано знати.

Photo by AltumCode on Unsplash

Підписуйтесь на нас у Facebook, Telegram, Twitter або Instagram, щоб нічого не пропустити!

ЗМІСТ СТАТТІ

  • Що таке “теги”?
  • Що таке «елемент»?
  • Що таке “атрибут”?
  • Що таке “метатег”?
  • Структурні HTML-теги
  • Теги заголовків
  • Теги форматування
  • Метатеги
  • Теги та атрибути посилань
  • Теги та атрибути зображень
  • Найважливіші теги для SEO

Вивчаючи тему SEO крім термінів: “домен”, “дроп домен“, “посилання”, ви обов’язково зустрінете такі терміни: “тег”, “метатег”, “атрибут”, “елемент”. Користувачі часто помиляються, неправильно користуючись термінами, наприклад називають тег елементом, елемент – атрибутом. Спробуємо внести ясність.

Що таке “теги”?

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

Вони є базовою конструкцією HTML. Їх ставлять у дужки <…>. Теги є одиночні та парні. Другі поділяються на тег, що відкриває і закриває, позначаються вони так: <…/>.

Приклад:

<p></p>

<br>

<body></body>

Що таке «елемент»?

Елемент – це базова одиниця, яка структурує текст документа, написаного на мові HTML. Всередину тега розміщують текст, він називається елементом HTML.

Приклад:

<p>Тег означає початок та закінчення кожного абзацу</p>

<body>Пропозиція, розміщена в цьому тегу, відображається у браузері</body>

Що таке “атрибут”?

Атрибути – це додаткові значення, які налаштовують або різними способами регулюють елементи, щоб ті відповідали певним критеріям. HTML-атрибути повідомляють браузеру, як повинен відображатись той чи інший елемент сторінки. Вони можуть мати якийсь заданий стандарт, або ж параметри задаються користувачем.

Приклад:

<a href=”https://www.nic.ua”>Атрибут href, повідомляє адресу документа, на який потрібно перейти</a>

Що таке “метатег”?

Метатеги – це теги, які надають супровідних даних про сторінку. По суті, це один із видів тегів. Як правило, вони вказуються в заголовках документа, наприклад між символами <head> і </head>, але користувачам їх не видно.

Приклад:

<meta name=”author” content=”Тарас Шевченко” />

<meta name=”description” content=”Опис документа” />

<meta name=”document-state” content=”Dynamic” />

Маючи поняття про основні терміни, спробуємо розібратися з тегами HTML, які важливі для SEO.

Структурні HTML-теги

Кожен HTML документ передбачає структуру, наприклад:

<!DOCTYPE html>

<html>

<head>…</head>

<body>…</body>

</html>

Що означає набір цих символів?

<!DOCTYPE html> – це рядок, що декларує версію HTML. З неї починається будь-який документ, який відповідає певній версії. Для браузера він позначає, як відображати веб-сторінку.

Наступний символ <html> передає повідомлення браузеру про те, що зараз буде текст HTML-формату.

Після символу <html> ставиться символ <head>, всередині якого розміщується службова інформація (при перегляді не відображається на сторінці) – це метатеги, скрипти лічильників, коди валідації ресурсу, що взаємодіють з різноманітними веб-сервісами.

Але те, що вже розміщується всередині тега <body>, відображатиметься для користувача. Після цього знака публікується основний контент сторінки: текст, зображення, відео, все те, що побачить людина, яка переглядає сайт.

Безперечно, це неостаточний перелік тегів структури. Існують ще: <header>, <article>, <footer>, <div> та багато інших. Але ті, що ми розібрали, є основними для базової оптимізації сайту.

Теги заголовків

Щоби пошукові системи правильно індексували сторінку, потрібно приділяти увагу заголовкам. Вони вказують на релевантність сторінки запиту користувача.

Основний тег заголовків – <title>. Його прописують усередині тегу <head>. Він не видний на сторінці, але визначається роботами пошукових систем як заголовок.

Важлива інформація <title> не повинна перевищувати 60 символів – приблизно стільки показують сніпети пошукової видачі. Основний текст <title> можна робити і з великою кількістю символів.

Це виглядатиме так:

<head>

<title>Заголовок сторінки</title>

</head>

Приклад відображення тексту з <title>:

Через те, що Тег <title> розміщується у службовому розділі <head>, його часто називають метатегом. Справді, він схожий на метатег. Але формально вважається, що це тег заголовка документа.

Всередині тега <body> розміщуються заголовки, які відображатимуться на сторінці. Основний заголовок укладено в парний тег <h1>, який прописується на початку сторінки. Це основний заголовок для SEO, що відображає суть сторінки, саме в ньому потрібно прописувати ключові фрази. Надалі розділи розбивають заголовками <h2>, а після цього за допомогою <h3> – <h6> може дробитися на смислові одиниці.

Важливо пам’ятати: заголовок нижнього рівня, наприклад, <h3> не повинен розташовуватися вище заголовка верхнього рівня <h2>.

Теги форматування

Без форматування текст виглядатиме, як суцільний набір букв та символів і буде складно сприйматися читачем. Форматування дозволяє зробити текст читабельним. Крім того, пошукові системи теж надають перевагу «зручним» текстам.

Для SEO просування можна використовувати такі теги:

<p>…</p> (тег символізує новий абзац);

<ul>…</ul> (маркований список);

<ol>…</ol> (нумерований список; <ul> або <ol>);

<li>…</li> (елемент списку);

<strong>…</strong> (виділення жирним);

<em>…</em> (виділення курсивом);

<blockquote>…</blockquote> (тег цитування).

Це, звісно, ​​не всі теги, а мінімум, необхідний для самостійного форматування тексту.

Метатеги

Метатеги HTML вирішують такі завдання:

  • Визначення авторства. Для цього застосовується метатег Author:

<meta name=”author” content=”Тарас Шевченко” />

  • Надсилання інформації пошуковим системам для формування заголовків та індексації документів.
  • Формування картки для відображення контенту в соціальних мережах;
  • Режим відображення сторінок. Тег Viewport запускає режим відображення сторінки сайту з адаптивною версткою на пристроях з різною роздільною здатністю:

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

  • Один із найважливіших для SEO метатег – Robots. Він може забороняти або дозволяти пошукачам індексувати сторінку та вказані на ній посилання.

<meta name=”robots” content=”index,follow” />

Index говорить про можливість індексації сторінки пошуковою системою. Якщо в цьому нема потребиі – прописуємо noindex – заборона індексацію. follow – дозвіл на індексацію посилань, nofollow – заборона.

  • Для SEO важливе значення має метатег Description. Інформацію з нього Google може використовувати для опису в сніпеті. Пошукова система Яндекс компонує сніпет за своїми алгоритмами. Але всі пошукові системи з Description враховують інформацію визначення релевантності контенту пошуковому запиту. Тому туди потрібно вносити ключові фрази.

<meta name=”description” content=”Опис близько 170 символів”/>

  • Інструмент PromoPult застосовується для збору title, description та заголовків h1-h6 з будь-якого сайту.
  • Viewport – застосовується для адаптації верстки під мобільні гаджети.
  • Content-Type – означає кодування сторінки.

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

або в HTML5: <meta charset=”UTF-8″>

  • Content-Language – означає мову сторінки. Неправильне відображення мови знижує рівень ранжування в країні просування сайту.

<meta http-equiv=”content-language” content=”ua” /> або в російській версії “ru”

або в HTML5: <html lang=”ua”> або в російській версії “ru”

  • Протокол Open Graph керує процесом створення прев’ю сторінки при публікації посилання на неї в месенджерах та соцмережах: Facebook, Telegram, LinkedIn та інших. Щоби прев’ю коректно відображалися в соцмережах, потрібно додати до розділу <head> коду сторінки відповідні мета-теги Open Graph.

Теги та атрибути посилань

Застосування тегів дозволяє створити гіперпосилання:

<a href=”nic.ua”>анкор посилання</a>

Атрибут href означає адресу документа в мережі.

Атрибут target визначає варіант відкриття нового документа. Значення цього атрибуту можуть бути такими:

  •  _top (у поточному вікні);
  •  _blank (у новому вікні);
  •  _self (у поточному кадрі);
  •  _parent (у батьківському кадрі).

Якщо атрибут target не вказано, стандартно буде застосовуватися _self.

При застосуванні атрибуту target зі значенням _blank (відкриття посилання в новій вкладці) необхідно вказати ще атрибут rel зі значенням noopener. Це дозволить усунути вразливість, пов’язану з отриманням часткового контролю над сторінкою ресурсу, на який переходили:

<a href=”site.ru” target=”_blank” rel=”noopener”>анкор посилання</a>

Буває, для досягнення певної мети SEO посилання ховають від індексації пошуковими системами. Для цього застосовують атрибут rel зі значенням nofollow:

<a href=”site.ru” rel=”nofollow”>анкор посилання</a>

Теги та атрибути зображень

Для опису зображення застосовують символ alt:

<img src=”url” alt=”альтернативне ім’я” title=”опис зображення” width=”розмір (у пікселях або %)” height=”розмір (у пікселях або %)”>

Тут застосовані атрибути:

  • src – цей символ вказує шлях до файлу зображення;
  • alt – найважливіший атрибут просування сайту. Текст з alt застосовується в пошуку за зображенням, якщо його показ у браузері вимкнено, то цей текст відображається замість картинки;
  • title – при наведенні курсору на картинку виводить опис у вигляді підказки;
  • width і height – вказує ширину та висоту картинки. 

Найважливіші теги для SEO

Теги структури HTML документа<html>контейнер, який включає весь вміст сторінки
 <head> <title>Заголовок сторінки</title> </head>службова інформація про сторінку (не відображається на сторінці)
 <body>…</body>зберігання контенту сторінки, що відображається у вікні браузера
Теги заголовків<title>Заголовок сторінки</title>вказує на заголовки сторінки (не відображається на сторінці)
 <h1> – <h6> <h1> Заголовок </h1>h – «heading», відображає ієрархію заголовків на сторінці
Теги форматування тексту<p>текст</p> початок нового абзацу
 <ul>текст</ul> маркований список
 <ol>текст</ol> нумерований список
 <li>текст</li> визначає окремий елемент списку
 <strong>текст</strong>виділяє жирним шрифтом
 <em>текст</em> виділяє курсивом
 <blockquote>текст </blockquote>   виділяє довгі цитати всередині документа
Метатегиdescriptionмета-опис сторінки – тег, що описує вміст сторінки приблизно у 160 символах
 robotsзабороняє або дозволяє пошукачам індексувати сторінку та вказані на ній посилання
 viewportчастина сторінки, яку може побачити користувач без прокручування
 authorтег містить ім’я автора сторінки 
 propertyмета-тег Open Graph для коректного відображення прев’ю посилання в соцмережах
 content-typeвизначає тип документа та його кодування
 content-languageописує мову контенту сторінки
Теги та атрибути посилань<a>визначає гіперпосилання для переходу на місце на сторінці або на іншу сторінку
атрибутиhrefадреса документа в мережі 
 targetвизначає спосіб відкриття нового документа: _ top – у поточному вікні; _blank – у новому вікні; _self – у поточному кадрі; _parent – у батьківському кадрі.  
 relrel зі значенням nofollow застосовують для того, щоб сховати посилання від індексації пошуковими системами
Теги та атрибути зображень<img>опис зображення
атрибутиsrcвказує шлях до файлу зображення
 altбере участь у пошуку зображення, якщо в браузері відключений показ картинок
 titleпри наведенні курсору на зображення видає опис у вигляді спливаючої підказки
 width, heightзадає ширину та висоту картинки

Без сумніву, HTML-тегів значно більше. Але тих, що описані вище, буде достатньо для базового розуміння пошукової оптимізації сайту.