Які HTML-теги повинен кожен SEO-фахівець — Хостинг-компанія FREEhost.UA

Ми впевнені, що серед наших клієнтів є багато професіоналів IT, які працюють над цікавими проектами. Якщо у Вас виникає бажання розповісти про них, Ви можете розмістити статтю у нашому блозі. А щоб було цікавіше, ми зробили конкурс статей, щомісяця три переможці отримуватимуть призи.

Категорії

Стаття також доступна російською (перейти до перегляду).

Основні ШТМЛ теги для СЕО

Зміст:

HTML (HyperText Markup Language) — мова розмітки гіпертексту. Мова, за допомогою якої ми пояснюємо браузеру, як має виглядати сторінка на дисплеї користувача. Як на DESKTOP, так і на мобільних пристроях.

Як можна переконатися за діаграмою “Періодична таблиця успішного ранжування” правильна HTML розмітка з Мета тегами та структурою є важливим чинником успішного просування.

HTML розмітка є каркасом будь-якої веб-сторінки.

Тому кожен SEO-фахівець повинен знати основні Мета теги та атрибути до них. Маю вміти користуватися ними.

Теги поділяються на два типи парні та непарні.

До парних відносяться ті, які містять у собі відкриваючий <...> та закриваючий тег </…>.

Приклад: маркований список <ol> </ol>, <li></li>.

У непарних міститься лише один тег, що відкривається.

Приклад: вставка картинки <img>, горизонтальна лінія <hr>.

Основні теги HTML розмітки

Розглянемо три основні теги, які містять будь-який HTML документ:

<!DOCTYPE html>

вказує тип існуючого документа, в даному випадку це HTML.

<html></html> - Визначає межі HTML документа. Усередині нього містяться всі теги, у тому числі й основні парні <head></head> та <body></body>.

<head></head>

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

Вміст цього парного тега не відображається безпосередньо у браузері для користувача. Виняток становить лише Мета тег <title></title>

У ньому він знайде назву сторінки.

<body></body>

Всередині цих тегів відображається видима для користувача частина документа. До неї відносяться: текст, картинки, відео, результати скриптів, посилання та все, що ми бачимо на сайті як користувачі.

!DOCTYPE html
html
head
<title>Назва документа</title>
</head>
<body>
<h1>Головний заголовок сторінки</h1>
<p>Відображається на сторінці в абзаці</p>
<body>
<html>

Мета теги

Мета теги розміщуються між тегами <head></head>.

Докладніше про правила та рекомендації щодо складання мета тегів ТАЙТЛ і ДЕСКРИПШН дивіться тут.

Meta robots

meta name="robots"content="index, follow"

Цей метатег вказує пошуковій машині, що робити зі сторінкою. Індексувати чи ні, а також передавати посилальну вагу.

Значення “robots” — доступ відкритий для всіх пошукових роботів.
Значення “googlebot” — для пошукового робота Google.

Розглянемо основні значення атрибуту content:

index — сторінка доступна для індексації роботом;
noindex — сторінка заборонена до індексації;
follow — посилання на сторінці;
nofollow — передача посилальної ваги заборонена;
mone — аналогічно noindex, nofollow;
all — аналогічно index, follow.

Meta charset

Цей мета тег вказує браузеру на тип кодування документа.

Це необхідно для коректного відображення тексту користувачеві в потрібному кодуванні.

Основний вид кодування, який застосовується для кирилиці — це “wiindows-1251” та “utf-8”.

Тому, якщо у Вас на екрані після копіювання в ШТМЛ документ виникли “крякозябри”, то перезбережіть цей документ у зазначених вище кодуваннях.

Можливі варіанти написання цього Мета тегу:

<meta charset="UTF-8">;
<meta charset="windows-1251">.

Meta keywords

У цьому Мета тегу вказуються ключові слова, які використовуються в контенті. Однак, у сучасних реаліях вміст цього тегу ніяк не впливає на якість просування.

Тому заповнювати їх необов'язково. Хіба що для власної зручності. Наведу приклад цього Мета тега, як заповненого, так і порожнього.

<meta name=keywords content="хостинг, український хостинг, UNIX хостинг, ASP хостинг, WINDOWS хостинг, хороший хостинг, надійний хостинг, зручний хостинг, швидкий хостинг, платний хостинг, ASP.NET хостинг, хостинг, хостинг php, хостинг joomla, хостинг wordpress, хостинг київ, професійний хостинг, хостинг в Україні, купити хостинг">;
<meta name=keywords content="">.

У блоці <head></head> також розташовуються і посилання <link>. Вони встановлюють прив'язку даного документа з іншими сторінками, наприклад, CSS стилями та JS сторінками.

На відміну від тега <a>, завжди розміщується в блоці <head></head> і не створює посилання.

Атрибут “canonical”

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

Коли виникають сторінки з однаковим контентом, але різними УРЛами.

Такі явища можливі при пагінації чи наявності фільтру товарів.

Як правильно налаштовувати фільтри товарів, а також використовувати атрибути index. follow і canonical дивіться тут.

Також за допомогою цього атрибуту ми пояснюємо пошуковій системі, яким має бути УРЛ. c WWW і косою межею в кінці “/” або без.

Приклад синтаксису написання:

<link rel=canonicalhref="https://freehost.com.ua/ukr/";

Заголовки та підзаголовки <h1></h1> - <h6></h6>

Для позначення головного заголовка та підзаголовків використовуйте парні теги за таким зразком:

<h1>Головний заголовок статті</h1>;
<h2>Підзаголовок h2</h2>;
<h3>Підзаголовок h3</h3>.
І т.д. до підзаголовка h6.

Увага!

Головний заголовок h1 повинен розміщуватися на сторінці лише один раз.

Докладніше про правильну ієрархію заголовків та підзаголовків та написання статей читайте тут.

Тег <a>

Используется для создания ссылок в документе, как внутренних, так и внешних.

Для внешних ссылок после в кавычках укажите href="абсолютный адрес ссылки”

Далі рекомендуємо вказувати такі атрибути:

target="_blank" — після того, як користувач клікне за таким посиланням, сторінка завантажиться в новому вікні браузера.

Ваш сайт, а залишиться на ньому, а зовнішнє посилання просто відкриється у сусідньому вікні;

rel="nofollow" — цей атрибут означає, що пошуковій роботі дається вказівка ??не переходити за цим посиланням і не передавати посилальну вагу по ній.

Якщо сайт, на який Ви посилатиметеся авторитетний з відомим автором, тоді рекомендуємо Вам все-таки передавати свою вагу йому.

Адреса посилання може бути абсолютною і відносною.

Абсолютна адреса вказується повністю та працює скрізь, незалежно від точки входу.

Приклад синтаксису зовнішнього посилання з абсолютною адресою:

<a href="https://gtmetrix.com/" target="_blank" rel="nofollow">Gmetrix.com</a>

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

Приклад синтаксису внутрішнього посилання з відносною адресою. Посилання розміщено на сторінці “купити домен”:

<a href='domaintransfer/'>можна подавати заявку на перенесення</a>

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

Такі посилання називаються “якорями”. Їх можна використовувати для зручного змісту з автоматичним перемиканням на потрібний підзаголовок.

Ознайомтеся із синтаксисом:

<ul>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#1">Схематична таблиця оптимізованої статті</a&gt ;</li>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#2">Основні терміни та сервіси для написання статей< /a></li>
<li><a href="/faq/articles/kak-napisat-i-optimizirovat-seo-tekst/#3">Сервіси, які використовуються для написання статті</a></li>
</ul>
<h2 id="1">Схематична таблиця оптимізованої статті</h2>
<h3 id= "2">SEO оптимізований текст</h3>
<h3 id="3">Контент сайту</h3>

Діюйте за таким алгоритмом:

Надайте кожному заголовку/підзаголовку або ключовому слову унікальний id;
У змісті після href="відносне посилання на діючу сторінку/#id”;
Приклад роботи таких посилань Ви зможете побачити у змісті.

Тепер розглянемо використання внутрішніх посилань на сайті

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

Внутрішні посилання також

<section></section>

Визначає розділ документа. Тематично і за змістом згрупований контент із заголовком.

<p></p>

Параграф. Розділяє текст на окремі абзаци. Абзаци повинні містити у собі згруповані за змістом тези.

<footer></footer>

Визначає підвал сайту.

У ньому розміщуються ім'я автора, контактні дані, посилання на соц. мережі, правова інформація, посилання на сторінки, що просуваються.

<!-Коментарі -->

Коментарі використовуються як нотатки на полях, щоб верстальники та програмісти їх читали, а машина - ні.

Коментарі також не відображатимуться у вікні браузера.

Коментарями можна відзначити, наприклад, початок і кінець тегів, секцій, списків і т.д.

Писати коментарі потрібно в наступному форматі <!-Текст коментаря -->

Також Ви можете “закоментувати” та HTML код.

<!-<h2 class="section_title">For all devices</h2>-->.

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

Маркований та нумерований список

У будь-якій статті використовуються списки.

Вони потрібні для манулів, інструкцій, перерахувань тощо.

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

<ol></ol> - відкриття та закриття нумерованого списку;
<ul></ul> - відкриття та закриття маркованого списку;
<li></li> - означає пункти ненумерованого або нумерованого списку.

Акцентування у тексті статті

Якщо Вам необхідно виділити певні слова та тези у статті, використовуйте такі парні теги:

<em></em>- курсив;
<strong></strong> - жирний.

При цьому варто зазначити, що теги <em> та <strong> — це підкреслення значеннєвої важливості виділених слів для пошукових систем.

Однак, не захоплюйтеся виділенням курсивами та жирними ключовими словами, можна потрапити під фільтр.

Максимум - 1-2 рази на весь текст і не беріть у виділення основні ключові слова.

Тег для розміщення картинок <img>

Непарний тег.

Складається за наступним синтаксисом

<img src="images/pic.png" width="100" height="200" alt="Альтернативна назва картинки" title="Заголовок картинки" >

У тегу вкажіть такі атрибути:

src="images/pic.png" — адреса картинки;
width="100" height="200" - ширина та висота картинки. Можете вказати лише один із параметрів - width="100", другий параметр браузер встановить автоматично. Розміри картинок вказуються в px у стилях CSS, а для документів HTML - ні;
Також ширину картинок можна зробити і на всю ширину сторінки width="100%". Однак після Google June 2021 Core Update для нормального показника Cumulative Layout Shift (CLS) необхідно вказувати ширину та висоту картинки. Вказуйте реальні розміри картинок;
alt="Альтернативна назва картинки" - Цей текст опише картину, якщо з якоїсь причини вона не з'явиться.
Він допомагає зрозуміти пошуковій системі, що за картинку Ви розмістили, тому додавайте в АЛЬТ ключові слова.
title="Заголовок картинки" - Додатковий опис зображення. Користувач зможе прочитати його, якщо навести курсором на картинку.

Приклад застосування атрибуту class

Lorem Ipsum — це текст-"риба", що часто використовується в пресі та веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів на латиниці з початку XVI ст. На той час якийсь безіменний друкар створив велику колекцію розмірів і форм шрифтів, використовуючи Lorem Ipsum для друку зразків. Lorem Ipsum не лише успішно пережив без помітних змін п'ять століть, а й переступив до електронного дизайну.

Його популяризації в новий час послужили публікація аркушів Letraset із зразками Lorem Ipsum у 60-х роках і, у нещодавніший час, програми електронної верстки типу Aldus PageMaker, у шаблонах яких використовується Lorem Ipsum.

Тег <script>

Цей тег використовується для опису скриптів. Тег є парним <script></script> і може містити в собі посилання на зовнішню програму, так і сам текст програми, якщо скрипт розташований в самому HTML документі.

Скрипти можуть знаходитися у необмеженій кількості по всьому HTML документу.

Однак скрипти, які повинні працювати в першу чергу повинні розташовуватися в блоці <head></head>.

Приклад синтаксису посилання на зовнішній скрипт:

<script src="//freehost.com.ua/js/jquery-1.9.1.js"></script>

Для прискорення завантаження рекомендується виносити скрипти в окремий файл.

Необов'язковий JS радиться розміщувати знизу, щоб не уповільнювати завантаження сторінки.

Але також допускається розміщувати скрипти і в самому HTML файлі.

Наприклад, скрипт для мікророзмітки FAQ ми розміщуємо внизу сторінки.

Висновки

З вищеописаного слід зробити такі висновки:

Будь-якому SEO-фахівцеві необхідні базові знання з мови розмітки гіпертексту (HTML). Основний довідник для HTML верстки — це HTMLbook. Користуйтеся ним
Основна інформація для браузерів та пошукових систем міститься в блоці <head></head>;
Скрипти та таблиці стилів CSS, які потрібні тільки для даної HTML сторінки і те, що можна завантажити асинхронно (може довантажитися потім), завантажуйте в окремий файл.

Але ті таблиці стилів CSS, які обов'язково завантажити, рекомендується вбудовувати в код сторінки;

Допускайте менше порожніх рядків, пробілів та закоментованих рядків. Якщо Ви впевнені, що Вам не доведеться правити код у майбутньому, може його стиснути за допомогою спеціального скрипту;
Корисний контент повинен розміщуватись ближче до початку HTML коду. Товари та послуги, заголовки та контентна частина повинні знаходитися в коді вище за ті блоки, які дублюються на всіх сторінках сайту, наприклад пункти меню.
При цьому візуально товари та послуги повинні знаходитися вище за решту контенту, щоб користувачеві не доводилося прокручувати вниз, щоб дістатися до того, що вони шукають. Насправді тексти статей з описом товарів та послуг вони не читатимуть;
Перевіряйте HTML код Вашої сторінки на помилки за допомогою валідатора. https://validator. w3.org/unicorn/?ucn_lang=ua;

Ми щось упустили чи в чомусь помилилися? Напишіть про це у коментарях, ми із задоволенням на них відповімо!

Дата: 05.07.2021

Автор: Яременко Владислав за радакцією Євгена Шермана

Основні HTML теги та атрибути для якісного SEO просування