Ключові слова за промовчанням означає. Що таке мета теги, як правильно заповнити та перевірити: приклади із практики. основних правил складання опису сторінок Description

04.11.2020 Поради

Title, Description, Keywords - ці терміни збивають з пантелику кожного блогера-початківця та інтернет-підприємця.

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

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

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

Але є й інший бік медалі: переспам цього тега. Пам'ятайте, заголовок насамперед пишеться для людей.

⛔ Приклад невдалого Title:

Як поїхати в Азію швидко дешево квитки путівки Китай Японія

✅ Приклад хорошого Title:

Як поїхати в Азію: всі подробиці, включаючи квитки, житло, їжу

👍 Ідеальний варіант:

Як поїхати в Азію і не пошкодувати (квитки, житло та ін.)

Секрет #2. Інтригуйте

Ваш заголовок повинен не лише містити пошукові запити, а й викликати у людей живий інтерес.

Логіка проста:

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

Вражаюча статистика: перші три сайти з органічної видачі отримують 61,5% всіх переходів. Тому намагайтеся потрапити не в десятку, а в першу трійку.

Але як писати по-справжньому чіпляючий Title?

Ось кілька порад:

  1. Додайте в заголовок числа та відсотки. Наприклад: 10 Порад як... ; 5 Причин чому...; 3 Кращих...
  2. Використовуйте такі прикметники та прислівники: Ефективний, Ульотний, Неймовірний, Нестандартний, Як, Покроково, Просто, Легко, Швидко.
  3. Намагайтеся, щоб під час читання вашого заголовка люди відчували сильні емоції.

Найголовніше - не шкодуйте часу на складання привабливих заголовків. Завжди пам'ятайте слова "батька реклами" Девіда Огілві:

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

Секрет #3. Ідеальна довжина

Ваш заголовок не повинен перевищувати 60 символів. В іншому випадку пошукові системи самостійно обріжуть його на 61-й літері.

Ідеальний варіант: дотримуватись діапазону від 50 до 60 символів.

Занадто короткий заголовок здебільшого виглядає непереконливо.

Порівняйте самі:

Як прописати тег Title

У сайтів, що працюють на WordPress, є одна цікава деталь:

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

Блогінг, заробіток в інтернеті, монетизація блогу.

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


Метатеги (від англ. meta tags) - це елементи HTML-розмітки сторінок для пошукових роботів, щоб вони коректно прочитали і обробили подану інформацію. Більшість тегів розміщуються в блоці HTML-документа:





Заголовок сторінки для пошукових систем

ключові словасторінки для пошукових систем">



Заголовок документа


Текст документу




Для пошукового просуванняважлива оптимізація ресурсу, але багато хто не знає, як правильно прописувати основні SEO-теги: title, description, keywords та заголовок h1

Найбільш важливі html-теги, пов'язані з ранжируванням сайту в пошукових системах, це теги:

  • title;
  • description;
  • keywords;
  • заголовки h1, h2, h3.

  1. Для формування розгорнутого сніпетутекстової інформації, що відбирається пошуковою машиною для презентації сторінки вашого інтернет-магазину в результатах пошуку. Для сніпету може бути вибраний уривок з тексту з ключовим словом або текст з тега description.
  2. Для підвищення клікабельності вашого сайту у пошукових системах. Чим краще і точніше ви опишите те, що зустріне покупець, перейшовши на сторінку вашого сайту, тим вищою буде кількість переходів та конверсія пошукового трафіку у продажу.
  3. Для подання додаткової інформаціїпро магазин.Якщо ви, за допомогою мікророзмітки, додайте в СНІПЕТ інформацію про ваші переваги, умови доставки та оплати, рейтинг, ціни, режим роботи та пункти самовивезення, то ця інформація допоможе покупцям зупинити свій вибір саме на вашому товарі або магазині.

Навіщо потрібен мета-тег title?

Title – тег назви сторінки, який виводиться першим рядком у результатах пошуку Googleта Yandex для кожного сайту і відображається в назві вкладки браузера з вашим сайтом. Його значення переоцінити дуже складно, адже саме він має найбільший вплив на ранжування сторінки, дає уявлення користувачам і пошуковій системі про зміст сторінки.

Щоб пошукові системи правильно сприймали зміст сторінок вашого інтернет-магазину дуже важливо грамотно прописати тег title. Для цього дотримуйтесь основних правил формування тега title.

1. Тег title має бути унікальним для кожної сторінки

Якщо у вас у розділі каталогу кілька сторінок пагінації, то можна додати наприкінці тега title номер сторінки: стор 1, стор 2, стор 3, а краще прописати відмінні характеристикитовару: колір, обсяг, розмір або артикул, щоб пошукові системи та покупці могли зрозуміти, чим же відрізняються товари на схожих сторінках.

Приклад:

  • Вхідні металеві двері "Назва" - двостулкові
  • Вхідні металеві двері "Назва" - з терморозривом
  • Гравіювання всередині скла на черепашці
  • Гравіювання всередині скла на кулі

2. Тег title повинен бути відмінним від тегів description та h1

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

Тег h1 – це видимий користувачеві заголовок, розташований вгорі сторінки розділу чи товару. Тег h1 повинен коротко та чітко описувати товар: найменування, виробник, модель тощо. Наприклад, якщо в заголовку

товар просто названий, то в title і description ви можете додати найчастіші комерційні запити, у тому числі назви брендів кирилицею.

Приклад:

  • Гравіювання на флешці з дерева

  • Замовити гравіювання на флешці з дерева у подарунок
  • < meta name="Description" content=" Замовити гравіювання на флешці з дерева подарунок на день народження. Великий вибір ексклюзивних подарунків з доставкою. ">

3. Тег title має бути оптимізований під відповідні сторінки та товари

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

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

  1. Купити вхідні металеві двері в Красноярську недорого;
  2. Купити ексклюзивний подарунок на день народження (місто);
  3. Купити путівку з перельотом "все включено" до Туреччини.

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

Приклад:

  • Купити вхідні двері Витязь (модель) в Красноярську
  • Купити гарячу путівку до Туреччини від (ціна)

4. Тег title повинен відображати реальний вміст сторінки

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

5. Тег title повинен мати структуру закінченої пропозиції

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

  1. Не можнаперерахувати всі ключові слова на запит через кому: двері, купити двері, купити вхідні двері недорого і т.д.
  2. Потрібно грамотно складати пропозиції: Купити вхідні двері в (місто) недорого.
  3. Не можна допускати неузгоджених пропозицій із перерахуванням ключових слів: купити недорого двері вхідні.

Ідеальна структура тега title відповідає питанням «Що? Де? Коли? Іншими словами, який товар зможе купити потенційний покупець у вашому магазині та за яких умов? Причому високочастотний запит має стояти на початку тега.

Зверніть увагу: для формування метатегу title не можна використовувати «.» !

6. Тег title має бути складений грамотно

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

  1. Не допускайте помилок у написанні слів;
  2. Не використовуйте жаргонізми та "блотні" слова;
  3. Не зловживайте спецсимволами, знаками оклику і великими літерами;
  4. Не використовуйте крапки та лапки, оскільки вони розбивають вміст тега на пасажі;
  5. Використовуйте лапки та дужки, якщо цього вимагають правила;
  6. Використовуйте написання брендів кирилицею та латинкою.

Виняток у цьому правилі іноді допускається, якщо у мові стійко закріпилося нелітературне найменування продукту ( посудомийка – посудомийна машина) або некоректне написання бренду ( Scarlett – Scarlet).

7. Тег title повинен містити не більше 70 символів

У результатах пошуку відображається не більше 70 символів, але написати можна і 90.

  • 50–57 символів для Google;
  • 65–70 символів для Яндекс.

Якщо title довгий, Пошукова системасама вибере, які 70 символів показати користувачу відповідно до введеного запиту. І цей вибір непередбачуваний. Краще полегшити завдання пошуковикам і намагатися вмістити все чи найважливіше в перші 50-70 символів, інакше все зайве буде замінено на три крапки. Причому пошукова система може скоротити не тільки кінець фрази, а й середину, і початок. Тому подбайте про лаконічні та ємні тайтли для ваших сторінок.

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

Приклад:

  • Купити в Красноярську недорого вхідні двері

Навіщо потрібен тег Description?

Description призначений для надання пошуковим системам короткого опису вмісту сторінки для індексації та виведення супровідної інформації у видачі результатів пошуку.

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

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

Достовірно відомо:

  • Вміст тега враховується та іноді використовується для показу у видачі результатів пошуку. Наприклад, як про це повідомляє Яндекс:

    - зміст цього тега можевикористовуватись у сніпетах (описах сайтів на сторінці результатів пошуку);

    У деяких «чарівних» випадках, навіть за наявності цього тега у видачі пошуків як опис сторінки використовується текст із неї. І це не завжди лід-абзац (перший на сторінці).
  • Ефективна довжина вмісту, що враховується, у різних пошукових систем - різна, на те вони і різні пошукові системи.
  • Вміст тега впливає на оцінку релевантності, але як саме сьогодні, мабуть, не скажуть навіть самі розробники, тому що для розрахунку релевантності у всіх пошукових системах використовується безліч різних і складних алгоритмів. Тому розробники в багатьох статтях і блогах, мало не хором, повідомляють, що ні, не впливає ніяк.
  • Вказувати цей тег все одно треба, про це є вказівки в системах допомоги веб-майстрам всіх великих пошукових систем.

Як правильно прописувати Description?

  • Дескрипшн повинен відображати суть сторінки та написаний у вигляді узгодженого тексту. Може прописувати декілька речень.
  • Повинен бути унікальним для всіх сторінок сайту, не дублювати аналогічні теги на інших сайтах (для цього можна використовувати назву компанії в тексті дескрипшену, модель або характеристики товару, ціну).
  • У тезі потрібно використовувати запити, за якими просувається дана сторінка, проте робити це необхідно так, щоб вони були використані природним чином, у потрібній морфології. Не слід перераховувати в Дескрипшен пошукові запити через кому.
  • Зміст тега не повинен повторювати Title.
  • Довжина опису повинна бути не менше 70 і більше 150-200 символів. Google визначає довжину пікселів, рекомендована довжина від 400 до 930 пікселів.
  • У описі бажано відобразити основні переваги компанії, товару, послуги.
  • Найбільш важливу інформаціюі фрази потрібно розмістити на початку мета-опису.
  • Тег має бути написаний людиною зрозумілою мовою.
  • Наприкінці пропозиції має стояти крапка.

Не потрібно використовувати такі дескрипшени: «Купити вхідні двері у нас, тому що ми найкращі».

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

Отже, ми дійшли до заголовків карток товарів та їх розділів, а також сторінок, присвячених оплаті, доставці, контактам та іншій інформації про магазин. Заголовок, укладений у тег

TEXT

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

-

служать виділення підзаголовків за рівнями. Наприклад, у цьому тексті використані підзаголовки трьох рівнів:

  • Як правильно прописувати метатеги для Seo-оптимізації сайту?

  • Навіщо прописувати теги: title, description, keywords та h1?

  • Як правильно прописати тег title для сторінок сайту?

  1. H1 - заголовок сторінки (один!)
    1. H2 - заголовок другого рівня
      1. H3 - заголовок третього рівня
      2. H3 - заголовок третього рівня
    2. H2 - заголовок другого рівня
    3. H2 - заголовок другого рівня

Якщо в якомусь із цих пунктів виникнуть ще підпункти, їх потрібно буде взяти в теги

-

.

Правила розміщення тега H1 на сторінці

  • Тег повинен зустрічатися на сторінці Один раз.
  • Тег має бути унікальним.
  • Має бути інформативним.
  • Відсутність тега

    є помилкою.

  • У тезі

    має бути ключове слово, запит, що відповідає розділу чи назві товару.

  • Довжина тега, що рекомендується, не більше 70 символів (не більше 7-8 слів).
  • Для товарів бажано вказати у тезі

    Найголовніші характеристики товару (довжина, ширина, колір, модель).

Навіщо потрібен тег Keywords?

Keywords використовується для надання даних пошуковим системам для підвищення значимості деяких слів при пошуку.

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

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

Якщо ви вирішили заповнювати ключові слова, враховуйте синтаксис:

Не вказуйте більше 10 ключових слів. Крім того, прописані ключові слова мають бути присутніми у тексті сторінки.

Як правильно прописувати keywords?

  • Тег повинен мати ключові запити сторінки;
  • використовувати не більше 5-6 слів;
  • Можна використовувати трохи більше 3-х повторів;
  • Не варто використовувати спілки, прийменники, вигуки;
  • Тег краще формувати із іменників;
  • Не варто використовувати ніякі розділові знаки, крім коми.

До чого призводить неправильна оптимізація ресурсу?

Якщо теги не відповідають правилам пошукових систем, Google і Яндекс самі формують сніпет (заголовок та опис сторінки сайту) на сторінках результатів пошуку з вмісту інших тегів, анкорних посилань, заголовків Яндекс каталогу та інших ділянок тексту, які пошуковим роботам будуть більш адекватними. Це відбувається у випадку, якщо було:

  1. Зменшення чи перевищення оптимальної довжини тегів;
  2. Відсутність точних входжень ключових ключів;
  3. Повторення ключових фраз в одному тезі;
  4. Граматичні та синтаксичні помилки;
  5. Дублі на кількох сторінках сайту.

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

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

Мета теги - частина програмного HTML-коду, укладена між тегом ...(заголовок сторінки). Ці атрибути не є обов'язковими: вони не помітні користувачеві, але повідомляють певну інформацію пошуковій системі (опис, заголовок, ключові слова тощо).

Завдання meta тегів

Метатеги виконують кілька важливих функцій:

  • Впливають на те, як відображається та яку позицію займає сторінка в індексі (видачі).
  • Допомагають просувати ресурс за найбільш відповідними Вашою цільовою аудиторією запитами. Дозволяють потенційному відвідувачу побачити у пошуковій видачі потрібну інформацію, роблячи опис максимально інформативним.
  • Фіксують дані про сторінку, допомагають правильно відобразити інформацію, налаштувати індексацію (аналіз сайту та внесення його до бази для подальшого включення у видачу).

Зараз мета теги не мають сильного впливу на просування, але, як і раніше, враховуються при оцінці пошуковими системами. За інших рівних умов перевага надається ресурсу з грамотно сформованими тегами.

Залишити заявку

Мета теги для SEO (пошукової) оптимізації

Сюди відносяться три теги: title, description, keywords. Ці атрибути повідомляють пошукову роботу інформацію про сайт, яка допомагає грамотно визначити тематику ресурсу та ранжувати (сортувати) у видачі. Тому, складаючи метатеги, вебмайстри обов'язково використовують ключові слова (слова і фрази, які цільовий користувач вводить в рядок пошуку, щоб знайти потрібний ресурс).

  • Title

Заголовок сторінки. В індексі це - велике синє посилання на сайт, у браузерних вкладках - назва.

Як заповнювати

Атрибут повинен містити основні ключові слова та конкурентні переваги. Важливо, щоб користувач одразу зрозумів, що Ви пропонуєте, і чому цей ресурс йому підійде. Основна складність – вмістити потрібну інформацію у чітко заданий пошуковими системами ліміт символів. У Google максимум – 70 (12 слів), у Яндекс – 80 (15 слів).

Приклад:
Дано: ключові слова купити крісло, купити крісло недорого, купити зручне крісло
Невдалий title: Купити крісло. Купити зручне крісло, купити крісло недорого
Як купити зручне крісло недорого з доставкою і отримати знижку 15%?

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

  • Description

Короткий анонс сторінки в результатах пошуку. Декілька коротких речень, у яких використовуються ключові слова (не всі - найбільш значущі) конкретної сторінки. Рекомендована довжина meta-тегу - 160-200 символів.

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

За допомогою meta name description пошуковим роботом опис сторінки – сніппет. Відображається у результатах пошуку під title.

Якщо атрибут не заповнений або сформований за правилами (значно перевищений ліміт символів, переспам), то пошуковий робот складає опис автоматично, «збираючи» його за шматочками фраз на сторінці. Результат виходить не дуже привабливий і "продає".

Як заповнювати
Дано: магазин продажу книг; ключові слова «цікава книга», «купити книгу»
Невдалий Description: Книги здавна є одними із найближчих «друзів» людини. Цікава книга допомагає скоротати час, дає корисні знання, розкриває цікаві факти, пробуджує емоції. Тому варто замислитися над тим, щоб купити книгу в нашому магазині.
Вдалий Description: Потрібна цікава книга? У нашому магазині широкий вибір тематик: від вузькоспеціальної літератури до світових бестселерів. У нас Ви можете купити книгу з доставкою протягом 1-5 днів у будь-який регіон РФ. Першим покупцям – знижка 10%.

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

  • Keywords

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

Зараз пошуковики не надають цьому атрибуту таку вагу, як раніше. Але грамотне використання не буде зайвим.

Як заповнювати

Використовуйте 3-6 ключових слів/фраз через кому. Надмірне вживання може розцінюватися пошуковою системою як переспам. До списку повинні включатися тільки запити, що використовуються на сторінці, під які оптимізовано текст, назви товарів і т.д.!


Мета теги технічного характеру

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

Найбільш поширені технічні метатеги:

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

(для кирилиці використовується атрибут windows-1251 або KOI-8R)

  • Content-language.Містить інформацію про мову вмісту. Як і з попереднім тегом, зараз браузери визначають мову автоматично. Але у разі неправильних налаштувань цей тег буде корисним.

  • Роботи. Показує пошуковому роботу, які сторінки слід включати до індексу, а які - ні. Цей тег передбачає низку додаткових атрибутів: index/noindex (можна/не можна індексувати); follow/nofollow (враховувати/не враховувати гіперпосилання); all/none (відкрити/закрити для індексації сторінку та гіперпосилання).

  • Refresh. Дозволяє встановити час оновлення сторінки під час завантаження або переадресації користувача до іншого розділу. Тег корисний у разі оновлення сайту: замість сторінки помилки 404 або тривалого завантаження перенаправляє користувача до нового розділу.

  • Meta Author та Copyright. Цими тегами можна прописати авторство графічного та текстового вмісту сторінки.

(Автор сторінки)

(Приналежність авторських прав)

адреса автора/власника)

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

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

Статтю підготувала Вікторія Закірова.

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

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

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

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

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

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

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

Назва документу

заголовок сторінки

Відображається на сторінці контент

  • вказує на тип поточного документа. У разі HTML;
  • тег зазначає межі документа, у ньому містяться обов'язкові теги і ;
  • тег - Контейнер, в нього міститься інформація для браузерів і пошукових систем. Вміст тега не відображається безпосередньо на веб-сторінці, за винятком тега за допомогою якого встановлюють заголовок вкладки браузера;</li> <li>тег <body>визначає видиму частину документа, що відображається у вікні браузера. До такої інформації відноситься текст, зображення, результат роботи скриптів та інше.</li> </ul><p>Спочатку розглянемо набір тегів, що містяться в блоці <head>. Вони найбільш значущі для фахівця з пошукової оптимізації.</p> <h2>Що таке тег <title></h2> <h4>Приклад коду:</h4> <meta name="description" content="Метатег description - це інформативний та продуманий опис сторінки. Ми розповімо, як зробити його привабливим для користувача та залучити відвідувачів на ваш сайт." /> <p><img src='https://i0.wp.com/images.netpeak.net/blog/tak-vygladit-description.png' align="center" width="100%" loading=lazy loading=lazy></p> <h3>Meta robots</h3> <p>Метатег robots служить для вказівки правил індексування конкретних сторінок сайту і дозволяє слідувати за посиланнями з цих сторінок.</p> <h4>Приклад коду:</h4> <meta name="robots" content="index, follow"> <p>Значення атрибуту «name» показує, що директива є актуальною для всіх роботів. Ви також можете закрити доступ лише одному. Для цього в атрибуті name слід вказати потрібного робота, наприклад, основного <a href="https://remzhuk.ru/uk/recaptcha-prosteishaya-kapcha-ya-ne-robot-ot-google-izbavlyaemsya-ot/">робота Google</a>- "googlebot" або Яндекса - "yandex".</p> <h4>Основні значення атрибуту content:</h4> <ul><li>index – сторінка доступна для індексації;</li> <li>noindex - заборона додавання сторінки до індексу;</li> <li>follow — посилання на сторінці доступні до індексації та відкриті для передачі ваги;</li> <li>nofollow - сигналізує роботу про те, що переходити за посиланнями та передавати <a href="https://remzhuk.ru/uk/chto-takoe-validnost-i-validaciya-i-zachem-oni-nuzhny-proverka-ssylochnoi/">посилальна вага</a>заборонено;</li> <li>all - інструкція, аналогічна "index, follow", протилежне налаштування: "none".</li> </ul><p>Наявність метатегу robots у коді сайту не є обов'язковою. Якщо meta robots відсутня, сторінку відкрито для індексації та дозволено переходити за посиланнями.</p> <h3>Meta charset</h3> <p>Метатег з атрибутом "charset" вказує на тип кодування документа. Він використовується для правильного відображення тексту сторінки браузером. Для <a href="https://remzhuk.ru/uk/kak-pk-ustanovit-dve-sistemy-redaktirovanie-zagruzki-neskolkih-operacionnyh-sistem-windows/">операційної системи</a> Windows та кирилиці використовують значення атрибуту "utf-8" або "windows-1251". Цей метатег слід розміщувати на самому початку блоку <head>до елементів, які містять текст, включаючи тег <title>.</p> <p><b>Приклад коду:</b></p><p> <meta charset="UTF-8"> </p><p>Багато браузери навчилися розпізнавати кодування документа автоматично, але все ж таки рекомендується прописати короткий рядок, щоб уникнути <a href="https://remzhuk.ru/uk/ustanovit-novyi-vindovs-10-na-etot-kompyuter-vozmozhnye-problemy/">можливих проблем</a>з виведенням інформації на сторінці.</p> <h3>Meta viewport</h3> <p>Метатег «viewport» повідомляє браузеру, як слід обробляти розміри сторінки, змінювати масштаб під ширину екрана пристрою, з якого виконано перехід. Meta viewport - один із пунктів впровадження <a href="https://remzhuk.ru/uk/krossbrauzernaya-verstka-css-krossbrauzernaya-sovmestimost-adaptivnyi/">адаптивного дизайну</a>, коли для всіх пристроїв використовується один код із коригуванням за розміром екрана. Для коректного відображення контенту сайту на будь-якому пристрої на всіх сторінках слід розмістити наступний фрагмент коду:</p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </p><p>Якщо цей елемент відсутній, <a href="https://remzhuk.ru/uk/otkryt-perevodchik-kak-nastroit-avtomaticheskii-perevod-v/">мобільні браузери</a>за промовчанням використовують версію сторінок для комп'ютера і намагаються оптимізувати контент власними силами, підганяючи вміст під розмір екрану. Через це контент сторінки може виглядати непропорційно і відвідувачам сайту доведеться виконувати зайві дії, щоб прочитати опис товару, подивитися картинку, відео. Пошукові системи вважають такий сайт не адаптованим для <a href="https://remzhuk.ru/uk/sony-xperia-xa-dual-tehnicheskie-harakteristiki-sony-xperia-xa1-dual/">мобільних пристроїв</a>і знижуватимуть його в результатах пошуку.</p> <h3>Meta keywords</h3> <p>Правильно складений метатег keywords повинен містити 5-7 ключових слів, що описують основний зміст сторінки. Раніше він сильно впливав на ранжування за заданими в ньому ключовими словами, але втратив значущість через дії несумлінних вебмайстрів та постійного розвитку пошукових систем. Тим не менш, для метатегу ключовихслів ще не все втрачено. Так, у звіті «Яндекс і Google: фактори ранжування у 2017 році» від «Ашманів та партнери» представлено висновок про вплив метатегу на просування в Google.</p> <h4>Приклад коду:</h4> <meta name="keywords" content="HTML, тег, атрибут, пошукова оптимізація, SEO"> <h2>Коли використовувати теги link</h2> <p>У блоці <head>також розташовуються теги <link>, які встановлюють зв'язок <a href="https://remzhuk.ru/uk/udalenie-skrytyh-i-personalnyh-dannyh-s-pomoshchyu-proverki/">цього документа</a>з іншими веб-сторінками. Розглянемо такі атрибути тега "link": "canonical", "next/prev", "alternate".</p> <h3>Атрибут canonical</h3> <h3>Атрибут alternate</h3> <h2>Висновки</h2> <ol><li>Теги та атрибути – це основа <a href="https://remzhuk.ru/uk/sintaksis-html-osnovnye-pravila-yazyka-html-zachem-nuzhna-validnaya/">мови HTML</a>. Оптимізація сайту неможлива без базового знання мови гіпертекстової розмітки.</li> <li>Основний фронт робіт SEO-фахівця пов'язаний з оптимізацією тегів із блоку <head>HTML-документа, адже саме там розташовується інформація для браузерів та пошукових систем. У контейнері <head>містяться тег <title>, метатеги, теги <link>. Вони містяться інформація про документі, що допомагає пошуковим системам зрозуміти про що сторінка і як слід її інтерпретувати.</li> <li>Не менш важлива оптимізація тегів та атрибутів, розташованих у <body>оскільки інформацію саме з цього блоку бачать на сторінці користувачі. Контент має бути структурований, а код валідним, що є запорукою правильного відображення сайту в будь-якому браузері.</li> <li>Не можна сказати, що той чи інший елемент HTML-коду важливіший за інших. Кожен тег і атрибут виконує свою функцію і неправильне застосування будь-якого з них може призвести до сумних наслідків. Головне зрозуміти, як і навіщо їх потрібно використовувати. І робити контент насамперед для людей, а не для пошукових роботів.</li> </ol> <p>Що таке мета теги? <b>Мета теги – це спеціальні <a href="https://remzhuk.ru/uk/oformlenie-html-tegov-atributom-style-vstroennye-stili-css-dobavlenie-css-css/">теги html</a>, що знаходяться в контейнері <head>та призначені для передачі інформації про сайт браузерам та пошукачам.</b>Наприклад, при обході вашого ресурсу, пошукові роботи збирають заголовки сторінок, опис сайту, ключові слова, дані про автора та іншу інформацію, що міститься в тегах <meta>. Перед тим, як показати сторінку сайту користувача, те саме робить і браузер, щоб зрозуміти, в якому вигляді повинен показуватися сайт для ПК або смартфона.</p> <p>У цьому матеріалі, мета теги будуть розглядатися нами через призму <b>SEO-просування</b>. І ви зможете дізнатися, основні правила їх заповнення, аналізу та перевірки за допомогою інструментів вебмайстра.</p> <h3>Види мета-тегів:</h3> <ul><li>title ( <i>тайтл</i>) - Заголовки сторінок;</li> <li>description ( <i>дискрипшн</i>) — <a href="https://remzhuk.ru/uk/kakie-byvayut-kompyuternye-programmy-spisok-nazvanii-s-kratkim/">короткий опис</a>сторінки;</li> <li>keywords ( <i>кейвордс</i>) - ключові слова;</li> <li>технічні мета теги (відповідають за коректність відображення сторінки).</li> </ul><h2>Як правильно заповнювати мета теги</h2> <p>З точки зору SEO, головні мета теги сайту це Title та Description. Тому саме правильність їхнього заповнення ми й розглянемо. Повторимося, що вони повинні розташовуватися між тегами <head> </head>і не в якомусь іншому місці коду.</p> <p>Якщо ваш сайт зроблено на CMS, то для редагування розділу з метатегам вам необхідно встановити спеціальний плагін або модуль.</p> <h3>Title</h3> <p>Мета тег <TITLE>відповідає за заголовок сторінки та відображається рядком тексту на вкладці браузера.</p> <p>Для пошукового просування сайту, необхідно, щоб ключове слово знаходилося якомога ближче до початку Title або стояло найпершим. Якщо сайт просувається в якомусь регіоні – пишемо назву міста чи регіону. Далі слідує продаюча або уточнююча добавка. На завершення, щоб надати тайтлу унікальності, після прямої риси вставляємо назву сайту чи компанії</p> <p><b>Наприклад:</b></p> <ol><li>Для комерційного сайту: <i>«Купити ноутбук у Москві — ціни від 19990 р в інтернет-магазині | site.ru»</i></li> <li>Для інформаційного сайту: <i>«Як правильно вирощувати алое в домашніх умовах Садівник</i>»</li> </ol><p>Для того, щоб заголовок не обрізався під час показу в результатах видачі пошукових систем, потрібно, щоб довжина тайтле була не більше 65 символів.</p><p> <title>заголовок сторінки

    Description

    Мета-тег Description відповідає за те, щоб у кількох реченнях описати суть інформації на сторінці. Зазвичай пошукова система бере інформацію з цього тегу для формування сніпету в результатах видачі (найчастіше так робить Google, рідше Яндекс).

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

    Приклади:

    1. «Купити ноутбук у Москві. Замовте ноутбук за ціною від 19990 рублів в інтернет-магазині. Доставка безкоштовно. Гарантія 2 роки.
    2. Як правильно вирощувати алое в домашніх умовах. Журнал Садівник ділиться секретами вирощування рослини алое вдома.»

    Довжина трохи більше 140 символів. На чистому html, це виглядало б ось так:

    Keywords

    Мета тег Keywords - це набір ключових слів, за якими просувається сторінка. Втім, сьогодні цей атрибут вже не є обов'язковим та заповнюється за бажанням,так у «золоту епоху» SEO їм надто зловживали і пошукові системи практично не звертають увагу на нього. Якщо ж ви все-таки вирішили заповнити keywords, краще це робити простим перерахуванням слів у початковій формі без ком.

    «Купити ноутбук Москві замовити ціна вартість рубль інтернет-магазин каталог доставка гарантія»

    Довжина будь-яка, але занадто старатися не варто. У html правильно пишеться ось так:

    Спарсить мета теги конкурентів можна буквально в пару кліків - за допомогою парсера.

    Технічні мета-теги

    • Expires – дата старіння документа.
    • Pragma — заборона використання кешованих даних, інформація повинна підвантажуватися з сервера.
    • Content-Type — тип контенту та кодування.
    • Content-language – мови сторінки/сайту.
    • Cache-Control - встановлює кешується чи документ ні, і якщо так, то яким чином.
    • Robots відповідає за індексацію окремих сторінок.
    • document-state - Частота індексації.

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

    Як додавати мета теги на CMS

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


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

    Але якщо ви всерйоз намірилися просувати сайт у пошукових системах, Wix краще не використовувати і вибрати наприклад той же WordPress.

    Перевірка мета-тегів онлайн +аналіз

    Для перевірки мета тегів на власному сайті можна скористатися панеллю вебмайстрів Яндекс. Для цього зайдіть у Вебмайстрі "Діагностика - Діагностика сайту". На сторінці, що відкрилася, натисніть «Ознайомитися». Після цього вам буде показано список сторінок, які не заповнені .

    Для комплексної перевіркиабо для аналізу мета описів у конкурентів, можна використовувати сервіси, які швидко та в режимі онлайн показують потрібну інформацію.

    Ось кілька таких сервісів:

    • Промопульт
    • Серпстат
    • Піксельплюс

    Висновок

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