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

Що таке мета-тег?

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

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

Атрибути мета-тегів

Ціль мета-тегів – описати контент. Отже, ці елементи знаходяться в HTML-коді в розділі «head», а не в розділі «body» і можуть включати наступні атрибути:

  • name – створює ім'я для метаданих;
  • content – безпосередньо самі метадані;
  • поле «http-equiv» – вказує на те, що ці метадані створені для роботи з браузером, а не з пошуковими системами.

Наприклад:

<meta name="description" content="опис сторінки">

<meta name="keywords" content="ключові слова через кому">

<meta http-equiv="pragma" content="no-cache">

<meta name="author" content="автор">

<meta name="copyright" content="авторські права">

Популярні мета-теги

Існують десятки мета-тегів, але частіше використовуються лише декілька.

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

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

Виглядає тег заголовку ось так:

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

Щоб протестувати і оцінити ефективність цього тега, можна використовувати, наприклад, «Google Search Console». Варто брати до уваги такі показники як клікабельність (чим більше кліків тим привабливіше заголовок сторінки) та позицію у пошуковику.

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

В HTML-коді сторінки це виглядає наступним чином: 

<meta name="description" content="Тут знаходиться опис сторінки">

Пошукові системи кажуть, що мета опис не дає прямого ранжування – вони не використовують його у своєму алгоритмі ранжування. Але Google використовує рейтинг кліків (CTR) як спосіб визначення чи гарний результат даного сайту.

Мета-тег keywords призначений для опису ключових слів, які вважаються релевантними для даної сторінки.

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

В HTML-коді сторінки це виглядає наступним чином:

<meta name="keywords" content=" ключові слова через кому">

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

В HTML-коді сторінки вони виглядають таким чином:

<meta name="robots" content="noindex">

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

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

Наприклад:

<META http-equiv="Content-Type" content="text/html; charset=windows-1251">

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

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

Стандартний тег: 

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

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

Перевірка мета-тегів

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

Є декілька способів перевірити мета-теги:

  1. Подивитись вихідний код сторінки самостійно через налаштування браузера (інструменти розробника).
Вихідний код сторінки
  1. Встановити спеціальне розширення для браузера. Існує багато плагінів, які полегшують роботу, збираючи відомості про метадані. Вони вираховують загальну кількість символів та надають аналіз інформації за різноманітними параметрами.
Перевірка мета тегів через плагін в браузері
  1. Використати букмарклет (це скрипт, який представлений у вигляді закладки браузера і виконується під час натискання). Необхідно просто перенести посилання на панель закладок і натиснути на нього. На екрані з’явиться список мета-тегів сторінки. В мережі інтернет існує багато сайтів, які пропонують великий перелік букмарклетів в залежності від вимог та кінцевої мети використання.
3 Букмарклет
  1. Встановити комп'ютерну програму. Цей сервіс зручний для комплексної перевірки сайту, тобто відразу всіх сторінок. Також є додаток, який дозволяє витягти метадані з фотографій, а це в свою чергу дозволяє легко розібратися з фейками.
4 Встановлені програми
  1. Сервіси для перевірки тегів онлайн. Введіть URL-адресу і отримаєте повну інформацію про мета-теги цієї сторінки. Онлайн-аналізатор або інспектор мета-тегів допоможе побачити як пошукова система зчитує дані сторінки.
5 Онлайн-сервіси для перевірки мета-тегів

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

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