Найважливіші метатеги в SEO і як їх використовувати
Що таке метатеги в SEO?
Метатеги, або метадані, — це маленькі фрагменти коду, які керують діями пошукових систем та браузерів. Вони містять ключові команди, що стосуються індексації сторінки, формату її показу та переспрямування на інші посилання. Якщо ви хочете, щоб сайт отримав високий рейтинг у пошуковій видачі та утримував увагу відвідувачів, кожна його сторінка повинна мати метадані для SEO.
Теги вставляються в перший розділ HTML-коду, позначений заголовком <head>. Зазвичай вони записуються у форматі <meta name=”AAA” content=”BBB”>. AAA — найменування функції, яку ви використовуєте. BBB — конкретна команда для пошукової системи або браузера.
Теги не показуються на сторінці. Однак користувач може прочитати метадані, якщо отримає доступ до вихідного коду вашого сайту. Тому не слід розглядати їх як спосіб передачі зашифрованих послань і жартів — переглянути теги дуже легко. Крім того, не варто вписувати в заголовок <head> зайві матеріали. Хоча це не вплине на індексацію та ранжування, зайві фрагменти коду можуть здатися пошуковикам підозрілими, що підвищить ризик блокування.
Чому метатеги SEO важливі?
Серед метаданих є функції, які безпосередньо впливають на рейтинг сайту в пошуковій видачі. Забувши про них або зробивши помилку, ви автоматично втратите шанс отримати місце на першій сторінці Google. Є і зворотний приклад: певні команди роблять ваш сайт небажаним для пошукових систем.
Інша група SEO-метатегів впливає на враження користувача від сторінки (UX). Помилка в цьому розділі не зробить вас вигнанцем серед пошуковиків, однак погіршить сприйняття контенту. Як наслідок, відвідувач буде швидше закривати сторінку або натискати кнопку «Назад». У свою чергу, це призведе до зниження рейтингу. Така собі бомба уповільненої дії, яка може ховатися серед вашого коду.
Теги — допоміжний інструмент, який гарантує правильність сприйняття сайту пошуковими системами. Однак їх не можна назвати фундаментальною основою SEO. Набагато більше залежить від підбору ключових слів та створення масиву авторитетних посилань. Крім того, метадані теж змінюються з плином часу. Деякі функції втратили своє значення, а інші набули ваги. Тому важливо стежити за пошуковими алгоритмами найпопулярніших пошуковиків, щоб завжди залишатись у тренді.
Хоча самі тільки метатеги не зможуть підняти ваш сайт на вершину рейтингу, їхнє неправильне використання може скинути вас із цього п’єдесталу. Тому дуже важливо розібратися в кожній функції, способах їхнього використання, найкращих SEO-практиках та поширених помилках.
Найважливіші SEO-метатеги
У сучасній практиці оптимізації сайтів кожна сторінка має містити метадані. Але проставляти їх на великих ресурсах вручну дуже складно і ненадійно — існує дуже велика ймовірність, що ви пропустите кілька розділів, знизивши свій загальний рейтинг. Тому радимо користуватися популярними інструментами для автоматизації SEO-таргетингу, наприклад Yoast, SERPSim та Ahrefs.
Тег Title
Заголовок сторінки, який показується в пошуковій видачі як посилання на ваш сайт. Він безпосередньо використовується для ранжування сторінок, тому його створюють за суворими правилами:
- Вміст тегу Title повинен бути не довшим за 60 символів із пробілами. Бажано також дотримуватися мінімуму в 40 знаків. Занадто короткі та довгі фрагменти тексту погіршуватимуть ефективність вашої SEO-стратегії.
- Текст повинен привертати увагу користувача, але не зловживати нею. Інтрига вітається, а от відвертий клікбейт сприйматиметься як спам із відповідним результатом.
- У заголовок обов’язково включають найважливіший ключ. Однак не допускайте переспаму. Якщо це можливо, не використовуйте одне слово в заголовку двічі.
- Title повинен відповідати наміру відвідувача. Якщо він вводить людей в оману, рейтинг вашого сайту неминуче знижуватиметься.
Експерти Google кажуть, що кожна сторінка ресурсу повинна мати унікальний заголовок, який відповідає її змісту та цільовій дії. Копіювання Title може призвести до того, що певні сторінки будуть виключені з пошукової індексації.
Практичні поради
- Упевніться, що ваша сторінка має відповідний SEO-тег. Якщо його немає, Google автоматично знизить її позицію у ранжуванні. І навіть якщо вона якимось чином потрапить у топ пошукової видачі, система самостійно вибере потрібний їй фрагмент тексту. Як ви розумієте, це буде не на вашу користь, адже вподобання людей та роботів занадто відрізняються.
- Перевірте кількість тегів Title. Якщо ви випадково залишили кілька заголовків, система знову ж таки ухвалюватиме власне рішення.
- Обов’язково перевірте довжину тексту. Оптимально — 40–60 знаків із пробілами. Якщо текст буде меншим чи більшим за обсягом, Google сприйматиме його як недостатньо інформативний чи занадто розпливчатий.
- Перевіряйте свій ресурс спеціалізованим краулером. Наприклад, Ahrefs’ Site Audit показує дублікати Title, які складно помітити при візуальному перегляді коду.
Додавання Title на сторінку
До розділу <head> додається такий фрагмент коду:
<title>Example of a good site title for a search engine.</title>
Відповідну функцію мають майже всі CMS, включно з WordPress, Wix та Squarespace.
Тег Description
Опис сторінки, який деталізує її вміст для користувача. До цього метатегу вебсайту часто включають заклик до дії, який мотивує відкрити посилання, ознайомитися з пропозицією та здійснити цільову дію.
На відміну від Title, Description не використовується при ранжуванні в пошуковій системі, тому ви можете проявити трохи більше фантазії. Однак помилки у використанні цього тегу можуть мати негативні наслідки для оптимізації. Наприклад, якщо ви навмисно вводитиме користувача в оману, він швидко закриє ваш сайт і навряд чи повернеться. Подібна масова поведінка відвідувачів свідчитиме про поганий UX. У довгостроковій перспективі це зменшить рейтинг сайту.
Практичні поради
- Оптимальний обсяг Description — 140–160 символів із пробілами. Занадто короткий тег викликає підозру. Занадто довгий не вміщується, тому в пошуковій видачі показуватиметься тільки його частина. А як відомо, якщо з фрази забрати пару слів, її можна перекрутити до невпізнанності.
- Пишіть коротко та влучно. Використовуйте ключове слово та орієнтуйтесь на намір користувача. Ставтесь до цього елементу коду так само серйозно, як до підбору ключовиків.
- Робіть унікальний тег для кожної сторінки. Хоча Google не включає цей пункт до обов’язкових вимог оптимізації, масове повторення може бути сприйняте як спам та крадіжка контенту. Результати — від зниження рейтингу до повного бану.
- Уникайте відвертих клікбейтів. Час таких грубих інструментів минув разом з епохою Web 1.0. Їхня ефективність нижча за ризик блокування.
Додавання Description на сторінку
До початкового розділу сайту включається такий рядок:
<meta name=”description” content=”Your description meta tag must match page content and apply to users intent. Keep it short, simple and catchy, but avoid any risky clickbaits”>
Тег Robots
Найважливіший тег для SEO. Він містить інструкції для пошукових систем щодо індексації сторінки, необхідності аналізу посилань та використання додаткових інструментів. Цікаво, що в більшості випадків він просто не використовується. Його відсутність дорівнює максимальному рівню дозволів — система індексуватиме і цей розділ сайту, і ті URL, на які він посилається.
Тег Robots має дві окремі функції, кожна з яких може містити два протилежних значення: index — сигнал про потребу індексації сторінки, noindex — заборона; follow — підтвердження якості посилань на сторінці та дозвіл на їхнє дослідження, nofollow — обмеження.
Важливо розуміти, як комбінувати ці команди. Наприклад, поєднання noindex та follow заборонить індексацію розділу сайту, але дозволить опрацювання тих сторінок, на які він посилається. Пошукова система може обробляти URL, навіть якщо за посиланнями теж проставлено тег noindex.
Практичні поради
- Якщо сторінка має брати участь у ранжуванні сайту, видаляйте тег Robots або знімайте відповідну галочку в CMS. Це набагато краще, ніж видавати дозволи вручну — ризик зробити помилку набагато менший.
- Не блокуйте індексацію посилань у файлі robots.txt, якщо за ними розташовані сторінки з цим тегом. Пошукова система отримає неправильну команду, через що виникне плутанина.
- Обов’язково перевіряйте наявність та значення тегу Robots після завершення розробки. Не забувайте проставляти правильні команди. Це особливо актуально, якщо ви відкривали тестову версію сторінки для попередньої перевірки перед остаточною публікацією.
Додавання Robots на сторінку
Якщо ви не збираєтесь блокувати індексацію, просто видаляйте тег — так простіше та надійніше.
В інших випадках до коду додається такий фрагмент:
<meta name=”robots” content=”noindex, follow”>
Значення noindex та nofollow можна скоротити до однієї спільної команди:
<meta name=”robots” content=”none”>
У більшості CMS доступ до цієї функції міститься в розділі Advanced.
Тег Googlebot
По суті, це специфічний для Google метатег Robots. Він дозволяє встановити обмеження тільки для однієї пошукової системи, ігноруючи її конкурентів, наприклад, Bing та DuckDuckGo. Необхідність його використання може бути пов’язана зі зверненням до різних цільових аудиторій.
Якщо теги Robots та Googlebot вступають у конфлікт, у пошуковій системі Google автоматично використовуються більш суворі обмеження. Наприклад, між follow та nofollow машина вибере саме останню команду. В Googlebot також можуть використовуватися специфічні команди:
- nosnippet — заборона на цитування фрагменту тексту в пошуковій видачі;
- max-snippet:xx — максимальна довжина такої цитати в знаках із пробілами;
- nositelinkssearchbox — відключення рядка пошуку всередині вашого сайту;
- notranslate — обмеження на автоматичний переклад;
- nopagereadaloud — заборона трансляції тексту в аудіо.
Практичні поради
- Як і у випадку з Robots, якщо ви дозволяєте пошуковій системі вільно індексувати сторінку та вивчати посилання, відразу видаляйте цей тег.
- Уникайте конфлікту метаданих у Googlebot та файлу Robots.txt. Це може призвести до зниження рейтингу та неправильного показу сайту в пошуковій видачі.
- Користуйтесь тегом тільки в тому випадку, коли на 100% впевнені в тому, що робите. Не відключайте «зайві» функції без нагальної потреби.
Додавання Googlebot на сторінку
Для керування індексацією додайте такий фрагмент до HTML-коду:
<meta name=”googlebot” content=”noindex, follow “>
Або:
<meta name=”googlebot” content=”nosnippet”>
Для відключення певних функцій скористайтеся таким синтаксисом:
<meta name=”google” content=”nositelinkssearchbox “>
Тег Viewport
Інструкція, як показувати сторінку на екранах різного розміру та роздільної здатності. В Google визнають, що цей метатег в HTML для SEO безпосередньо впливає на ранжування в пошуковій видачі. Він показує, що сайт адаптовано до мобільних пристроїв, на які зараз припадає понад 60% переглядів.
Тег Viewport має подвійне значення. Якщо він не застосовується, користувачі за замовчуванням переглядають десктопну версію контенту. Дуже часто вона незручна для сприйняття на маленькому екрані, що призводить до великого відсотку відмов. Водночас це негативно впливає на загальний рейтинг сайту.
Варто зазначити, що сама по собі наявність тегу Viewport не дає гарантії коректного показу контенту. Щоб уникнути помилок, варто користуватися CSS-розміткою, уникати великих об’єктів фіксованого розміру та проводити ретельне тестування продукту на різних девайсах.
Практичні поради
- Вставляйте цей тег на всі сторінки, щоб продемонструвати їхню сумісність із мобільними пристроями. Це позитивно вплине на ранжування вашого сайту.
- Якщо не впевнені на 100% у своїх діях та їхніх наслідках, використовуйте тільки стандартні змінні для тегу Viewport.
- Щоб перевірити правильність показу контенту, скористайтеся звітом Mobile Usability в сервісі Google Search Console.
Додавання Viewport на сторінку
Функція зі стандартними змінними виглядає так:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Команда width=device-width означає, що контент адаптується до фактичної ширини та роздільної здатності екрана. initial-scale=1.0 дозволяє встановлювати початковий масштаб перегляду за шкалою від 0.0 до 1.0, тобто від 0 до 100% із кроком 1%.
Тег Refresh Redirect
«Чорний» HTML-метатег у SEO. Його використання автоматично знижує позицію сторінки в пошуковій видачі Google та Bing. Експерти рекомендують уникати цього елементу, натомість використовуючи сучасні альтернативи. Аналогічне ставлення склалося й до тегу Keywords. Саме його використання зменшує рейтинг в Google та дає автоматичний бан у Bing.
Тег Refresh Redirect використовується для переспрямування запиту на іншу сторінку через певний проміжок часу. Проблема в тому, що зазвичай його застосовували для переспрямування користувачів на сайти зі шкідливим контентом чи спамом. Через це сучасні версії браузерів можуть не опрацьовувати цю команду.
Практичні поради
- Відмовтесь від тегу Refresh Redirect.
- Використовуйте переспрямування за HTTP-кодом 301 чи 302, якщо вам потрібно перевести користувача на актуальну версію сайту.
Додавання Refresh Redirect на сторінку
Якщо у вас виникло бажання поекспериментувати з дією цього тегу, можете додати до хедеру такий рядок:
<meta http-equiv=”refresh” content=”N;url=”https://aaabbb.xyz/”>
N — кількість секунд до переадресації, url=”https://aaabbb.xyz/ — адреса сторінки, яка відкриється в браузері користувача.
Тег Charset
Один із найважливіших метатегів у SEO для сайтів зі складним різноманітним контентом. Він визначає набір символів, який буде використовуватися для показу тексту. Його обов’язково слід вставляти в код, якщо ви наводите цитати з нелатинських алфавітів.
Без тегу Charset браузер автоматично замінюватиме незнайомі символи аналогами, які підбере за кодуванням. Це майже завжди призводить до помилок, які погіршують UX та негативно сприймаються пошуковими роботами. Результат — суттєве зниження ефективності SEO.
Навіть якщо ви впевнені, що весь текст на сайті набраний латиницею, варто вставити посилання на набір символів Unicode UTF-8. Також допускається використання альтернативи у вигляді ISO-8859-1. Специфічні набори символів підбираються індивідуально. Важливо уточнювати, чи підтримуються вони популярними браузерами.
Практичні поради
- Проставляйте тег Charset на кожній сторінці. Це опосередковано впливатиме на ваші позиції в Google та інших популярних пошуковиках.
- Віддавайте перевагу набору Unicode UTF-8. Статистика показує, що він використовується на 90% англомовних ресурсів.
- Вибирайте правильний синтаксис відповідно до версії HTML.
Додавання Charset на сторінку
Перш ніж починати роботу з тегом, необхідно визначити версію HTML. Зробити це просто. В HTML5 обов’язково використовується ідентифікатор <!doctype html>. У попередніх версіях він відсутній.
До коду в сучасному середовищі розробки HTML5 додається такий рядок:
<meta charset=”UTF-8″>
У попередніх версіях, включно з HTML4, використовується аналог:
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>
Якщо вам потрібно використати інший набір символів, просто вкажіть його код у змінній тегу:
<meta charset=”ISO-8859-1″>
Чекліст для оптимізації метаданих SEO
Знаючи, що таке метатеги в SEO, яке значення вони мають та як їх правильно використовувати, ви можете підготувати свій сайт до виходу в топ пошукової видачі. Щоб досягти успіху, завжди перевіряйте код сторінок за таким чеклістом:
- Title проставлено, він унікальний, містить ключ та відповідає наміру користувача. Його довжина — від 40 до 60 символів з пробілами.
- Description цікавий, він точно описує контент на сторінці. Довжина тексту — від 140 до 160 символів з пробілами. В ньому немає ризикованих клікбейтів.
- Robots та Googlebot дозволяють індексування сторінки та вивчення матеріалів за посиланнями, якщо в цьому полягає ваш намір. Сторінки з цими тегами не блокуються файлом Robots.txt.
- Viewport та Charset проставлено на кожній сторінці. Якщо ви не знайомі з їхнім синтаксисом, залишайте стандартні значення змінних.
- Refresh Redirect та Keywords відсутні у вашому коді. Вони вважаються ознакою «чорного» SEO, а тому автоматично знижують рейтинг сайту та наражають вас на небезпеку бану.
Пам’ятайте також про інші засоби технічної оптимізації, що не належать до метаданих. Розбивайте текст на блоки, відокремлені заголовками. Використовуйте альтернативний текст для зображень та інших видів мультимедійного контенту. Перевіряйте сайт на наявність сторінок-дублів та завжди вибирайте серед них канонічну версію.
Однак навіть за наявності зручного чекліста ручна перевірка буде довгою, трудомісткою й не завжди ефективною. Тому рекомендуємо користуватися багатофункціональними SEO-сервісами. Наприклад, краулер Ahrefs швидко збирає інформацію про всі сторінки сайту, підсвічує помилки та дає рекомендації щодо їхнього усунення.
Метатеги в технічній оптимізації: короткі підсумки
HTML-метатеги в SEO — допоміжний інструмент, який дає дозвіл на індексацію сайту пошуковими системами, коротко характеризує контент на сторінці та дозволяє коректно показувати ваші матеріали. Важливо пам’ятати про значення кожного елементу, адже правильне написання коду підвищує шанси сайту на вихід у топ, тоді як помилки створюють ризик зниження рейтингу чи навіть блокування. Але теги — це не вся суть SEO і навіть не найважливіша її частина. Не забувайте, що успіх сайту залежить від комплексної оптимізації, до якої також входять підбір ключових слів, структурування контенту, створення посилальної маси та інші роботи.
FAQ
Що таке SEO-метатеги?
Короткі фрагменти коду, потрібні для взаємодії з пошуковими системами та браузерами. Вони визначають необхідність індексування контенту та створюють правила його показу.
Чому метатеги важливі для SEO?
Помилка в тегах може призвести до погіршення UX, зниження рейтингу сайту в пошуковій видачі чи навіть його блокування. Від правильності їхнього заповнення залежить успіх вашого проєкту.
Як пошукові системи використовують метатеги?
Метадані надають пошуковикам дозвіл на індексацію сторінки. Якщо відповідна функція буде вимкнута або конфліктуватиме з іншим фрагментом коду, ваш сайт не з’явиться в пошуковій видачі.
