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 – у батьківському кадрі. | |
| rel | rel зі значенням nofollow застосовують для того, щоб сховати посилання від індексації пошуковими системами | |
| Теги та атрибути зображень | <img> | опис зображення |
| атрибути | src | вказує шлях до файлу зображення |
| alt | бере участь у пошуку зображення, якщо в браузері відключений показ картинок | |
| title | при наведенні курсору на зображення видає опис у вигляді спливаючої підказки | |
| width, height | задає ширину та висоту картинки |
Без сумніву, HTML-тегів значно більше. Але тих, що описані вище, буде достатньо для базового розуміння пошукової оптимізації сайту.