Що таке мета-теги та навіщо вони потрібні?

SEO просування 
Час читання: 6 хв, 4 сек
Що таке мета-теги та навіщо вони потрібні?

Ми заходимо в пошукову систему з конкретним запитом, вбиваємо його в пошуковий рядок, отримуємо результат видачі. Далі — вивчаємо ТОП перших позицій та переходимо на вподобаний ресурс.

Мета-теги — це теги (частина HTML-коду), які надають пошуковим системам структуровані дані щодо конкретної сторінки. Вони розміщуються між тегом <head> … </ head>, перевіряються роботами під час індексації сайту.

Які функції виконують мета-теги? Розберемо детально.

Задачі мета-тегів

 

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

Як правильно використовувати мета-теги? Які завдання можна вирішити? Які обмеження надають пошукові системи?

Сьогодні ви дізнаєтеся все про мета-теги!

Класифікація мета-тегів

Теги прийнято поділяти на: seo мета-теги (які сприяють пошуковій оптимізації сайту) та технічні мета-теги (відповідають за технічну оптимізацію ресурсу).

Seo мета-теги включають: Title, Description, Keywords.

Тег Title

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

Title відображається двома способами:

  • У ТОПі пошукової видачі синім великим текстом, який передає суть сторінки, підштовхуючи користувача клікнути по посиланню;
  • У вкладках браузера, щоб дозволити користувачеві зорієнтуватися при пошуку потрібного ресурсу.

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

Для початку ми надамо загальні рекомендації щодо заповнення Title, доповнюючи прикладами, а потім поділимося готовими шаблонами!

  • У Title використовують самі високочастотні запити на початку речення;
  • Тег складається з головних ключів, однак не повинен бути їх переліком. Інакше пошукова система сприйме це як переспам. Наприклад, якщо ваші ключові слова: “курси в Харкові”, “IT-курси”, “стати програмістом”, то Title: “Пройти курси в Харкові, круті IT-курси. Як стати дуже гарним програмістом? ” — поганий варіант. Який тоді хороший?
  • Правильно складений заголовок повинен легко читатися, бути інформативним та привабливим для користувача. Не рекомендовано використовувати ключові слова, за якими сторінка не просувається. Коротко передайте зміст сторінки: “IT-курси у Харкові: навчання на програміста — A-Level” — це вже хороший варіант;
  • Слідкуйте, щоб ваш Title був унікальним. Перевірити дублікати тегів ви можете, використовуючи програми-парсери (screaming frog, netpeak spider) чи Google Search Console!

Вимоги ПС

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

Наприклад, максимальна довжина title повинна складати:

При цьому, десктопна версія відображає сніппет розміром 600 пікселів. Це означає, що текст буде автоматично обрізатися:

  • Google: до 50-55 символів
  • Яндекс: до 45-55 символів

Тег Description

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

Якщо ж цей пункт був пропущений /виконаний неякісно, то пошуковик може самостійно обрати найбільш релевантний контент сайту. Однак, це часто грає проти ресурсу, бо фраза, що була вирвана з контексту, звучить зім’ято.

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

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

  • Обов’язково використовуйте ключові слова, проте в помірній кількості, інакше робот помітить переспам;
  • Не використовуйте вирваний шматок тексту, який не містить важливої інформації. Наприклад: “У сучасному світі складно уявити собі життя без смартфона, доступу до інтернету, високотехнологічних гаджетів. Сьогодні професія програміста є найбільш затребуваною та актуальною. Вона відкриває перед нами нові можливості! ” — такий варіант буде програшним;
  • Інформація повинна містити зрозумілий опис контенту, що легко читається та відповідає на питання користувача, надає вигоду + УТП. Наприклад: “A-Level — IT-школа №1 в Харкові! Заняття проходять в режимі: онлайн + офлайн. Ти можеш освоїти будь-який напрямок програмування з нуля! Знижка -15% до 10 березня! ” — такий варіант більш продає;
  • Заповнювати Description важливо для всіх URL сайту. Пріоритетними є: головна сторінка, каталоги. Важливо розуміти, що мета-теги Description описують кожну окрему сторінку сайту, але не весь ресурс відразу;
  • Description може містити СТА (заклик до дії): Зв’яжіться з нами за телефоном 0959999999! Переходьте в наш каталог! Дізнайтеся більше на сайті!
  • За необхідності текст можна доповнювати смайлами (обмежено);
  • Опис також має бути унікальним, перевіряйте його парсерами чи Google Search Console;
  • Description повинен відображати інформацію, яка дійсно знаходиться на сайті, є актуальною на цей час.

Вимоги ПС

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

  • Google: десктопний пошук — 135-175; мобільний пошук — 100-120 (символи з пробілами)
  • Яндекс: десктопний пошук — 160-260; мобільний пошук — 100-160.

Кнопка «читати ще» відриває додатково 500 символів.

Keywords

Ключові слова мають другорядне значення. Пошукова система Google не враховує даний мета-тег в результатах пошуку з 2009 року. Однак, Яндекс в рідкісних випадках продовжує використовувати Keywords.

  • Кожне слово має відповідати контенту сайту;
  • Кількість ключових слів повинна становити максимум 3-6. Якщо вказати більше, робот зарахує це за переспам;
  • Використовуйте високочастотні висококонкурентні запити.

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

Тепер розглянемо мета-теги для сайту технічного характеру. Вони дозволяють:

  • Налаштувати окремі можливості відображення сайту різними сервісами, браузерами, пристроями, пошуковими системами;
  • Налаштувати внутрішню оптимізацію сайту.

Viewport

Частка користувачів мобільного інтернету зростає з кожним днем. Щоб зберігати трафік, важливо адаптувати сайти під різні гаджети.

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

Сам тег містить “код” (device-width), який підлаштовує ширину відображуваної сторінки під мобільний пристрій/комп’ютер. Наявність такого тега – актуальний фактор ранжування сторінок.

Open Graph

Open Graph — мета-теги для сайту, які дозволяють зробити якісний репост до інших сервісів (наприклад, соціальних мереж).

Дуже важливий інструмент залучення трафіку. Без такого тега репост може відображатися з рандомним контентом (картинкою, текстом). Open Graph дозволяє вам самостійно встановити вид анонса!

Open Graph включає:

  • og: title — назва;
  • og: description — опис;
  • og: image — зображення;
  • og: type — тип матеріалу;
  • og: url — посилання на веб-сторінку, яка додається до соціальної мережі.
Рекомендуем
Що таке розмітка Open Graph і навіщо вона потрібна
Більше

Robots

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

Даний тег дозволяє працювати з наступними атрибутами:

  • index + noindex — можна індексувати сторінку;
  • follow + nofollow — чи враховувати гіперпосилання;
  • all + none – відкрити або закрити сторінку, гіперпосилання для індексації пошуковими системами;

Наприклад: <meta name=”robots” content=”noindex, follow”/>

Частина атрибутів підтримується тільки однієї пошуковою системою.

Google Яндекс
nosnippet — не показувати опис сторінки у пошуковій видачі noyaca — не використовувати автоматичний опис сторінки
max-snippet:[number] — найбільша довжина в сніппеті index | follow | archive — скачування вказаної забороняючої директиви
max-image-preview:[setting] — найбільший розмір зображень
max-video-preview:[number] — довжина відео
notranslate — не перекладати сторінку
noimageindex — не індексувати зображення
unavailable after: [date/time] — припинення показу сторінки з певного часу в пошуку

 

Http-equiv

Які мета-теги потрібно використовувати, щоб сайт відображався завжди коректно?

  • Content-Type — визначає кодування сторінки, дозволяє завжди коректно відображати ресурс в будь-якому браузері;
  • Content-Language — визначає основну мову сторінки;
  • Refresh — направляє користувача на іншу сторінку, якщо завантаження цієї сторінки відбувається довше заданого часу.

Висновок

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

Залишити коментар

Отримуй новини першим

Дякуємо! Ваше повідомлення надіслано.