20 головних метатегів для сайту та як їх заповнювати

Мета-теги - Частина HTML-коду сторінки. Вони містяться між тегом . (Заголовок сторінки). Користувач не бачить метатеги, але їх бачать пошукові системи. З їх допомогою роботи отримують потрібну інформацію про сторінку.

• Що означають метатеги для SEO просування
• Правильні SEO метатеги
  • Title
  • Description
  • Тег H1
  • Теги H2, H3, H4, H5, H6
  • Content-type
  • Content-language
  • Refresh
  • Author та Copyright
  • Метатег Viewport
  • Canonical, Next, Previous
  • Метатег Robots (All, Follow, Nofollow, Index, Noindex, None, NoArchive)
  • Перегляд коду сторінки у браузері
  • Плагін SEO META in 1 CLICK

  Що означають метатеги для SEO просування

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

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

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

  Правильні SEO метатеги

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

  Title

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

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

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

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

  У title можна додавати емоджі. Можна періодично змінювати та оновлювати title, додаючи ціни, повідомлення про нові товари та сервіси. Але коротко 🤏.

  Також із title працює і старе правило для заголовків: цифри в назвах привертають увагу. Наприклад, «10 найкращих програм для…», «Топ-5 сайтів…», «3 причини купити…» тощо.

  Додатково читайте правила формування title.

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

  Description

  Description – це мета-опис сторінки. Опис логічно продовжує title, але розгорнуто. Найчастіше description потрапляє у сніпет, тому він має бути зрозумілим та привабливим для користувача.

  У коді він виглядає так:

  
  . 
  name color:#2980b9">description" content="Опис сторінки"/> .
  

  Правильний Description повинен:

  • бути довжиною до 200 символів із пробілами;
  • бути унікальним – не повторюватись на інших сторінках сайту;
  • містити органічно вписані ключові слова.

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

  У description можна додати емоджі, ціни, інформацію про знижки та акції.

  Пара слів про keywords

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

  Але оптимізатори придумали вписувати туди взагалі всі ключові фрази поспіль, навіть ті, які не відповідали змісту сторінки. У результаті пошукові системи не могли видати точні результати за запитами користувачів.

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

  Тег H1

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

  Якщо ви не прописали title, пошукова система використовує замість нього h1 для формування сніпета. Але варто пам'ятати, що це різні заголовки: title відображає суть усієї сторінки, а h1 тільки текстової частини.

  У коді він виглядає так:

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

  Теги H2, H3, H4, H5, H6

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

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

  У коді вони виглядають приблизно так:

  … Заголовок H1 … Заголовок h2 … Заголовок h3 … Заголовок h3 … Заголовок h2 …
  

  У 90% випадків для сторінок вистачає трьох рівнів заголовків, рідше чотирьох. H5 та H6 зустрічаються дуже рідко, наприклад, у довгих статтях.

  Важливо дотримуватись ієрархії тегів. Якщо на сторінці ще немає H2, не можна додати відразу H3.

  Більше подробиць про написання тегів заголовків ми писали на основі знань Коллаборатор.

  У тексті статті заголовки 2 та 3 рівнів матимуть такий вигляд:

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

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

  Технічні метатеги допомагають настроїти внутрішню оптимізацію сайту. За допомогою них можна додати додаткові опції. Наприклад, закрити сторінку або весь сайт від індексації в robots.txt.

  Content-type

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

  
  http-equiv color:#2980b9">Content-type" content color:#d35400">charset=windows-1251">

  У прикладі зазначено, що на сторінці використовується 8-бітове кириличне кодування тексту.

  Content-language

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

  
  http-equiv color:#2980b9">Content-Language" content="ru">
  

  Refresh

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

  
  http-equiv color:#2980b9">refresh" content color:#d35400">url=[потрібна URL]">

  Google не рекомендує використовувати refresh оскільки деякі браузери його не підтримують. Оскільки Google виключає з пошуку сторінки з refresh , замість нього радять налаштовувати 301 редирект.

  Однак метатег корисний на сторінках у стилі «Дякуємо за замовлення, наш оператор зв'яжеться з вами». Такі сторінки приховані від індексації, тому санкцій від пошукової системи не буде.

  Author та Copyright

  Теги позначають автора або правовласника контенту сторінки.

  
  name color:#2980b9">Author" content="Ім'я автора сторінки">
  

  
  name color:#2980b9">Copyright" content= "Ім'я правовласника">

  Якщо сайт належить компанії, використовується Copyright . Якщо власник – конкретна людина, прописують Author .

  Метатег Viewport

  Метатег viewport дає можливість настроїти розмір вікна та масштаб сторінки в мобільній версії.

  Метатег виглядає так:

  
  name color:#2980b9">viewport" content color:#2980b9">width=device-width, initial-scale=1">

  Width вказує розмір вікна. Можна вказати точно число в пікселях, а можна встановити device-width – значення ширини екрана у пікселях CSS у масштабі 100%.

  Initial-scale задає масштабування під час першого завантаження сторінки. Властивості maximum-scale , minimum-scale і user-scalable визначають дозволений для користувачів рівень зменшення або збільшення сторінки.

  Canonical, Next, Previous

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

   color:#2980b9">canonical" href="[url канонічної сторінки]"/>

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

   color:#2980b9">prev" href="[url попередньої сторінки]"/>
   color:#2980b9">next" href="[url наступної сторінки]"/>

  З тегами prev і next пошуковий робот об'єднає сторінки в єдиний елемент індексу.

  Але 2019 року Google повідомив, що вже давно не використовує розмітку rel=prev/next для позначення пагінації, тому що все одно намагається вибирати найбільш підходящий контент. При цьому не важливо, на скільки сторінках він знаходиться.

  Прибирати ці теги не обов'язково, адже їх «зчитує» не лише Google.

  Метатег Robots (All, Follow, Nofollow, Index, Noindex, None, NoArchive)

  Тег robots впливає на індексування сторінок та знаходиться всередині … .

  
  name color:#2980b9">robots" content= "потрібні директиви"/>

  Атрибут content складається з однієї або кількох директив, написаних через кому:

  • all – можна індексувати весь вміст сторінки;
  • none – заборонено індексувати сторінку;
  • index - Так само all, індексування дозволено;
  • noindex – заборонено індексувати текст сторінки (докладніше);
  • follow – можна переходити за посиланнями на сторінці;
  • nofollow – заборонено переходити за посиланнями на сторінці (докладніше);
  • noimageindex – заборонено індексувати зображення на сторінці;
  • noarchive – забороняє виводити у результатах пошуку посилання «Збережена копія»;
  • nosnippet – забороняє виводити у пошуковій видачі сніпет.

  Рекомендуємо використовувати тег на всіх дозволених для індексування сторінках сайту. Також можна заборонити певному пошуковику індексувати сторінку, а іншому – дозволити.

  Так виглядає заборона для Google:

  
  name color:#2980b9">google" content color:#2980b9">noindex"/>

  Як перевірити метатеги у коді веб-сторінки

  Перегляд коду сторінки у браузері

  Щоб дізнатися, які метатеги є на сторінці, можна переглянути її код прямо у браузері. Просто клацніть правою кнопкою миші на будь-якому місці сторінки і виберіть у меню «Перегляд коду сторінки» або натисніть ctrl+U.

  Плагін SEO META in 1 CLICK

  Безкоштовне розширення для браузера SEO META in 1 CLICK відображає всі метадані та основну інформацію про SEO:

  • title та його довжину;
  • description та його довжину,
  • URL та канонічний URL;
  • robots;
  • заголовки в порядку їх появи у HTML;
  • кількість зображень з ALT та без;
  • кількість посилань;
  • Robots.txt та sitemap.xml.

  Тільки англійською, але інтерфейс інтуїтивно зрозумілий і простий.

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

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

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