Оптимізація для новачків: HTML-теги і атрибути в SEO

Теги та атрибути як складові частини мови HTML
Що таке тег <title>
Приклад коду:
Де користувач може побачити ваш <title>:
Навіщо потрібні метатеги
Meta description
Приклад коду:
Meta robots
Приклад коду:
Основні значення атрибута content:
Meta charset
Meta viewport
Meta keywords
Приклад коду:
Коли використовувати теги link
Атрибут canonical
Приклад коду:
Атрибути next / prev
Приклад коду:
Атрибут alternate
Оптимізація контенту сайту
Теги <div>, <span>, <table>
Заголовки H1 - H6
Приклад коду:
тег параграфа
оформлення списків
Для формування списків використовують теги:
Теги акцентування
оформлення посилань
Приклад коду:
Приклад коду:
Тег <img>
Приклад коду:
Тег <script>
Висновки

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

Не всі розуміють, на чому потрібно сфокусувати свою увагу в першу чергу і як правильно використовувати той чи інший елемент. У цьому пості ми розповімо про тегах і атрибутах, про які важливо пам'ятати починаючому SEO-фахівця.

Теги та атрибути як складові частини мови HTML

Теги та атрибути становлять основу HTML - мови гіпертекстової розмітки. Послідовність тегів і їх атрибутів задає структуру документа. Інтерпретуючи мову розмітки, браузер «розуміє», про що сторінка і як повинен відображатися її контент (текст, картинки, відео).

Теги задають каркас сторінки, атрибути розширюють або модифікують дії тегів. Вони описуються всередині відкриваючого тега у вигляді колекції «ім'я =" значення "». Наприклад: <meta name = "description">.

Існує два типи тегів: парні і одиночні. Парні (або контейнерні) теги складаються з пари - відкриває і закриває тег <...> ... </ ...>. Поодинокі теги складаються лише з одного відкриваючого тега. Наприклад, тег <img>.

Стандартно структура HTML-документа містить такі елементи:

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

<! DOCTYPE> вказує на тип поточного документа. У нашому випадку HTML;
тег <html> відзначає кордону документа, в ньому містяться обов'язкові теги <head> і <body>;
тег <head> - контейнер, в нього поміщається інформація для браузерів і пошукових систем. Вміст тега <head> не відображається безпосередньо на веб-сторінці, за винятком тега <title>, за допомогою якого встановлюють заголовок вкладки браузера;
тег <body> визначає видиму частину документа, яка відображається у вікні браузера. До такої інформації належить текст, зображення, результат роботи скриптів і інше.

Спершу розглянемо такі ключові слова, що містяться в блоці <head>. Вони найбільш значущі для фахівця з пошукової оптимізації.

Що таке тег <title>

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

Приклад коду:

<Title> Тег title - для чого потрібен і як його правильно використовувати? </ Title>

Де користувач може побачити ваш <title>:

Навіщо потрібні метатеги

Крім тега <title>, в <head> розташовуються теги типу <meta>, які призначені для браузерів і пошукових систем. Коректне використання метатегов дозволяє збільшити привабливість сніпетів, управляти індексацією сторінок. Також дозволяє правильно відображати сторінки сайту користувачам. Далі розглянемо метатеги: description, robots, charset, viewport і keywords.

Meta description

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

Приклад коду:

Meta robots

Метатег robots служить для вказівки правил індексування конкретних сторінок сайту і дозволяє слідувати за гіперпосиланнями з даних сторінок.

Приклад коду:

Значення атрибута «name» вказує, що директива актуальна для всіх роботів. Ви також можете закрити доступ тільки одному з них. Для цього в атрибуті «name» слід вказати потрібного робота, наприклад, основного робота Google - «googlebot» або Яндекса - «yandex».

Основні значення атрибута content:

index - сторінка доступна для індексації;
noindex - заборона додавання сторінки в індекс;
follow - посилання на сторінці доступні до індексації і відкриті для передачі посилального ваги;
nofollow - сигналізує роботу про те, що переходити за посиланнями і передавати контрольний вагу заборонено;
all - інструкція, аналогічна «index, follow», протилежна настройка: «none».

Наявність метатега robots в коді сайту не обов'язково. Якщо meta robots відсутня, сторінка відкрита для індексації і переходити за посиланнями дозволено.

Meta charset

Метатег з атрибутом «charset» вказує на тип кодування документа. Він застосовується для правильного відображення тексту сторінки браузером. Для операційної системи Windows і кирилиці використовують значення атрибута «utf-8» або «windows-1251». Цей метатег слід розміщувати на самому початку блоку <head> до елементів, які містять текст, включаючи тег <title>.

Приклад коду:

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

Meta viewport

Метатег «viewport» повідомляє браузеру, як слід обробляти розміри сторінки, змінювати її масштаб під ширину екрану пристрою, з якого виконаний перехід. Meta viewport - один з пунктів впровадження адаптивного дизайну, коли для всіх пристроїв використовується один код з коригуванням за розміром екрану. Для коректного відображення контенту сайту на будь-якому пристрої, на всіх сторінках слід розмістити наступний фрагмент коду:

Якщо цей елемент відсутній, мобільні браузери за замовчуванням використовують версію сторінок для комп'ютера і намагаються оптимізувати контент власними силами, підганяючи вміст під розмір екрану. Через це контент сторінки може виглядати непропорційно, і відвідувачам сайту доведеться виконувати зайві дії, щоб прочитати опис товару, подивитися картинку, відео. Пошукові системи вважають такий веб-сайт не адаптованим для мобільних пристроїв і будуть знижувати його в результатах пошуку.

Meta keywords

Правильно складений метатег keywords повинен містити 5-7 ключових слів, що описують основний зміст сторінки. Раніше він сильно впливав на ранжування по заданих в ньому ключовими словами, але втратив значимість через дії недобросовісних вебмайстрів та сталого розвитку пошукових систем. Проте, для метатега keywords ще не все втрачено. Так, у звіті « Яндекс і Google: фактори ранжування в 2017 році »Від« Ашманов і партнери »представлено висновок про вплив метатега на просування в Google.

Приклад коду:

Коли використовувати теги link

У блоці <head> також розташовуються теги <link>, які встановлюють зв'язок даного документа з іншими веб-сторінками. Розглянемо такі атрибути тега «link»: «canonical», «next / prev», «alternate».

Атрибут canonical

Атрибут «rel =" canonical "» використовують для вирішення питань з дублюючим контентом: коли на сайті є близькі або ідентичні за змістом сторінки за різними url. Атрибут canonical вказує пошуковим системам, яку з дубльованих сторінок індексувати і показувати в результатах пошуку, при цьому передаючи їй контрольний вагу і інші характеристики дублікатів. Щоб вказати, яка з сторінок канонічна, потрібно в коді сторінки-дубля розмістити тег «link» з атрибутом «canonical», де в атрибуті «href» прописати адресу канонічної сторінки.

Приклад коду:

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

Атрибути next / prev

Поява дублюючого контенту на сайті також може бути пов'язано зі сторінками пагінацію.

Пагінація в SEO - поділ об'ємного контенту «по сторінках». Кожну сторінку пронумеровують (звідси і така назва). Все це заради прискорення завантаження сторінки і зручності перегляду контенту.

Приклади пагінацію можна побачити на сторінках інтернет-магазинів, де є категорії з великою кількістю товарів. Оскільки левова частка контенту таких сторінок однакова, пошукові системи можу сприймати їх як дублі. Рішення проблеми: використовувати тег «link» разом з атрибутами «next» і «prev», які вказують на те, що розглянуті документи - частини серії і їх слід аналізувати в сукупності.

Приклад коду:

на першій сторінці пагінацію впроваджуємо «link rel =" next "», вказуючи на наступну сторінку серії:

на другій та наступних сторінках пагінацію впроваджуємо «link rel =" next "» і «link rel =" prev "», вказуючи на наступну і попередню сторінки в серії:

на останній сторінці пагінацію впроваджується «link rel =" prev "», вказуючи на передостанню сторінку в серії:

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

Атрибут alternate

Атрибут «rel =" alternate "» використовується, щоб вказувати альтернативні версії сторінок сайту, наприклад, вказує на різні мовні версії або мобільну версію сайту. З його допомогою пошукові системи визначають, скільки разів сторінки показувати того чи іншого користувачеві в результатах пошуку.

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

замість «xx» вказуємо код мови (в форматі ISO 639-1 ), «YY» - регіону ( ISO 3166-1 Alpha 2 );
URL - абсолютний url альтернативної сторінки.

Пам'ятайте, що інформація про всі існуючі версії повинна міститися в коді кожної з них, тобто в коді кожної сторінки повинен міститися власний атрибут «rel =" alternate "hreflang =" xx-YY "», а також посилання на всі інші версії.

Повідомити пошуковим системам про мобільної версії сайту можна, використовуючи атрибут «media». Як правило, версія для комп'ютерів розміщується в домені www.example.com, а варіант сайту для мобільних пристроїв - в домені m.example.com.

Таким чином на звичайній сторінці https://www.example.com/page-1 потрібно додати код:

На сторінці для мобільних пристроїв https://m.example.com/page-1 слід вказати «canonical» на версію для комп'ютерів:

Оптимізація контенту сайту

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

Теги <div>, <span>, <table>

Теги <div> ... </ div> використовують для створення каркаса сторінки. <Div> - це блоковий елемент, призначений для керування вмістом певних фрагментів документа, будь то текст, зображення, посилання або інше. Особливість блокових тегів в тому, що вони починаються з нового рядка і займають всю доступну ширину області, в якій розміщені.

За допомогою <div> можна задавати стилі певних об'єктів сторінки. Аналогічним чином встановити стилі для певної частини інформації на сторінці дозволяють теги <span> ... </ span>. Відмінність від <div> полягає в тому, що <span> - це рядковий елемент, тому його слід використовувати для фрагментів контенту, розміщених горизонтально, тоді як <div> відображає елементи один за одним по вертикалі.

Задати фрагменту документа стилі можна двома способами:

використовувати зовнішні таблиці стилів, підключені за допомогою тега <link>:

Потрібний фрагмент тексту зв'язується з певним стилем за допомогою атрибутів «class» або «id».

використовувати атрибут «style», який застосовується безпосередньо в HTML-коді із зазначенням правил CSS, наприклад:

<H1 style = "color: red"> Тема червоного кольору </ h1>

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

Елемент <table> служить для створення таблиць і є контейнером для елементів, які визначають вміст таблиці.

Прямого відношення до пошукової оптимізації перераховані вище теги не мають, але помилки в розмітці контенту можуть вплинути на валідність коду, тобто - відповідність структури коду стандартам. Некоректна верстка спотворить відображення сторінки в браузері і може привести до неправильної інтерпретації її вмісту пошуковими системами. А це вже серйозна проблема для SEO-спеціаліста.

Заголовки H1 - H6

Існує безліч тегів для оформлення текстового контенту сайту. Найбільш важливі з них - теги заголовків «Н1 - Н6», і особливо - головний заголовок сторінки - «Н1». Поряд з <title> значення цього тега повідомляє користувачам і пошуковим роботам про зміст конкретної сторінки сайту. Також теги заголовків найчастіше містять основні тези тексту, побіжно переглянувши їх, користувач розуміє, буде він читати текст цілком чи ні.

Приклад коду:

<H1> HTML-теги і атрибути в SEO: що повинен знати початківець оптимізатор </ h1>

Впроваджуючи заголовки, важливо дотримуватися їх ієрархію: після заголовка «Н1» повинен слідувати «Н2», якщо «H2» відсутній, то «H3» і так далі.

тег параграфа

Щоб розділити текст на параграфи, потрібно використовувати теги <p> ... </ p>. Будьте гранично уважні до першого абзацу, який іноді виводиться в сниппет сторінки в пошуковій видачі. Він повинен мотивувати користувача прочитати текст повністю і містити ключові слова.

оформлення списків

Пошукові системи позитивно відносяться до маркованих і нумерованих списків в контенті сторінки. Вони допомагають уявити інформацію в короткій і структурованої формі.

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

<Ul> ... </ ul> - для створення маркованого списку;
<Ol> ... </ ol> - обрамляють нумеровані списки ;.
<Li> ... </ li> - визначають елементи списку в маркованих і нумерованих списках.

Приклад коду:

<Ul> <li> елемент маркованого списку </ li> </ ul> <ol> <li> елемент нумерованого списку </ li> </ ol>

Теги акцентування

Найбільш важливі думки в тексті можна виділяти тегами <strong> ... </ strong> і <em> ... </ em>, які відображають укладений в них текст жирним шрифтом і курсивом відповідно.

Аналогічної візуального ефекту можна домогтися за допомогою тегів <b> ... </ b> (жирний) і <i> ... </ i> (курсив).

Теги <i> і <b> - теги фізичної розмітки і просто встановлюють накреслення тексту, в той час як <em> і <strong> - теги логічної розмітки і підкреслюють важливість розміченого ними тексту.

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

оформлення посилань

Для створення посилань використовують тег <a>. Детальніше: в атрибуті «href» вказуємо адресу сторінки, на яку відбувається перехід. Між тегами <a> ... </a> прописуємо клікабельно частина тексту, при натисканні на яку буде здійснюватися перехід на іншу сторінку. Згідно з рекомендаціями пошукових систем, текст посилання повинен відрізнятися від решти контенту сторінки і бути помітним користувачеві.

Приклад коду:

<a href="URL"> Текст посилання </a>

На сторінці сайту можуть бути виявлені небажані посилання, коли веб-майстер не може поручитися за якість документів, на які веде посилання (наприклад, вона розміщена в коментарі користувача). Такі посилання можна закривати атрибутом «rel =" nofollow "», який вкаже роботам, що конкретно за цим посиланням слідувати і передавати зазначеної сторінці вага не потрібно.

Приклад коду:

<a href="URL" rel="nofollow"> Текст посилання </a>

Існує також можливість заборонити індексування розміщеної на сторінці посилання або іншого фрагмента тексту. Для цих цілей Яндексом був розроблений тег <noindex> ... </ noindex>. На жаль, він не працює для Google.

Приклад коду:

<Noindex> <a href="URL"> Текст посилання </a> </ noindex>

Тег <img>

Тег <img> додає зображення в HTML-документ. Обов'язковий атрибут - «src =" URL "» визначає ім'я та розташування файлу зображення. При необхідності, картинку можна оформити посиланням на інший файл. Для цього потрібно помістити тег <img> в контейнер <a>.

З точки зору SEO обов'язкові атрибути картинок «alt» і «title».

Атрибут «title» - підказка користувачеві: коли він наводить курсор на зображення і бачить опис того, що на картинці. Для пошукових систем це скоріше допоміжний тег, але в нього все ж варто додати ключове слово.

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

Приклад коду:

Також для картинок потрібно вказувати атрибут «width» (ширина) або «height» (висота). Краще поставити щось одне, браузер автоматично підлаштувати другий параметр, щоб пропорції були спотворені.

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

Приклад коду:

Тег <script>

Тег <script> ... </ script> призначений для підключення скриптів в HTML-документ. Є два способи додати код на сторінку:

підключити зовнішній файл з кодом, розмістивши в тезі <script> шлях до файлу скрипта за допомогою атрибута src:

розмістити безпосередньо сам код в тезі <script>.

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

Пришвидшення перегляду допоможуть також атрибути «defer» і «async» тега <script>. Браузер завантажує і відображає веб-сторінки поступово, тобто одночасно читає і відображає вже оброблений HTML-код. Виявивши скрипт, браузер спочатку завантажує та виконує його, і лише потім продовжує обробку частині сторінки.

Вирішити цю проблему допоможе використання атрибутів «async» або «defer». Вони дозволяють завантажувати скрипти асинхронно: браузер не чекає завантаження і відпрацювання скрипта, а продовжує обробляти HTML-код.

«Defer», на відміну від «async», зберігає відносну послідовність завантаження скриптів на сторінці, тому скрипти будуть завантажуватися в порядку їх розміщення в коді. Крім того, вони почнуть завантажуватися лише після повного завантаження HTML.

«Async» слід застосовувати для скриптів, від яких не залежить відображення інших елементів сторінки, наприклад, для підключення кодів аналітики. Defer - елементів, для яких не обов'язкова миттєве завантаження.

Приклад коду:

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

На закінчення відзначимо: не можна сказати, що той чи інший елемент HTML-коду важливіше інших. Кожен тег і атрибут виконує свою функцію, і неправильне використання будь-якого з них може привести до сумних наслідків. Головне - зрозуміти, коли, як і навіщо їх потрібно впроваджувати. І робити контент, в першу чергу для людей, а не для пошукових роботів.

Висновки

Теги та атрибути - це основа мови HTML. Оптимізація сайту немислима без базового знання мови гіпертекстової розмітки.
Основний фронт робіт SEO-фахівця пов'язаний з оптимізацією тегів з блоку <head> HTML-документа, адже саме там розташовується інформація для браузерів і пошукових систем. У контейнері <head> поміщаються тег <title>, метатеги, теги <link>. У них міститься інформація про документ, що допомагає пошуковим системам зрозуміти про що сторінка і як слід її інтерпретувати.
Не менш важлива оптимізація тегів і атрибутів, розташованих в <body>, оскільки інформацію саме з цього блоку бачать на сторінці користувачі. Контент повинен бути структурований, а код валідним, що служить запорукою правильного відображення сайту в будь-якому браузері.
Не можна сказати, що той чи інший елемент HTML-коду важливіше інших. Кожен тег і атрибут виконує свою функцію і неправильне застосування будь-якого з них може привести до сумних наслідків. Головне - зрозуміти, як і навіщо їх потрібно використовувати. І робити контент в першу чергу для людей, а не для пошукових роботів.

Категории

Новости

Оптимізація для новачків: HTML-теги і атрибути в SEO

Теги та атрибути як складові частини мови HTML

Що таке тег <title>

Приклад коду:

Де користувач може побачити ваш <title>:

Навіщо потрібні метатеги

Meta description

Приклад коду:

Meta robots

Приклад коду:

Основні значення атрибута content:

Meta charset

Meta viewport

Meta keywords

Приклад коду:

Коли використовувати теги link

Атрибут canonical

Приклад коду:

Атрибути next / prev

Приклад коду:

Атрибут alternate

Оптимізація контенту сайту

Теги <div>, <span>, <table>

Заголовки H1 - H6

Приклад коду:

тег параграфа

оформлення списків

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

Приклад коду:

Теги акцентування

оформлення посилань

Приклад коду:

Приклад коду:

Тег <img>

Приклад коду:

Тег <script>

Висновки