Тег HTML - мета теги, інформація про сторінку

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

Часто використовуються meta-теги: author, description, keywords, viewport, charset.

Мета теги знаходяться в області HTML документа (докладніше про ). Вставити або, як то кажуть, прописати мета теги можна в будь-якому порядку та кількості.

Використовувати meta теги не обов'язково, але ми рекомендуємо заповнювати хоча б мета теги description, viewport, charset. Це буде плюсом для внутрішньої оптимізації сайту.

Синтаксис

Приклади використання у HTML коді

Основні мета теги

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

Meta-тег description

Короткий опис документа (сторінки сайту). Пошукові системи можуть використовувати вміст мета тега description для виведення в сніпеті пошукової видачі.

Приклад використання мета тега description

Meta-тег keywords

Ключові слова сторінки Раніше використовувалися для вказівки пошукових систем основні смислові фрази веб-сторінки. На даний момент існують різні думки як правильно і чи варто заповнювати мета тег keywords.

Приклад заповнення мета тега keywords

Meta-тег viewport

Задає деякі параметри вікна перегляду у браузері. Атрибут width вказує ширину вікна перегляду (в'юпорту), initial-scale - Коефіцієнт масштабування при першому відкритті сторінки.

Приклад використання мета тега viewport

Мета тег для адаптивного сайту: вказує, що ширина в'юпорту підганяється під розміри пристрою:

Meta-тег charset

Кодування веб-сторінки. Найчастіше значення: "UTF-8".

Приклад використання мета тега кодування charset

Meta тег refresh

Мета тег із атрибутом http-equiv="refresh" вказує час автоматичного оновлення сторінки. Сторінка автоматично перезавантажуватиметься з інтервалом вказаним у content атрибут. Значення вказується за секунди.

Приклад використання meta http refresh

Підтримка браузерами

Атрибути

Вказує кодування HTML документа.

Основний вміст мета тега. Залежить від інших атрибутів. Використовується разом з http-equiv або name.

content-type
default-style
refresh

Встановлює заголовок HTTP для атрибута content.

Сontent-type - Кодування. Застаріле значення, в HTML5 використовуйте charset (Див. Приклад вище).
Default-style - Переважна таблиця стилів.
Refresh - інтервал автооновлення сторінки.

application-name
author
description
generator
keywords
viewport

Ім'я мета тег. Як і http-equiv визначає суть мета тега.

Application-name - ім'я веб-програми, яку представляє сторінка.
Author - Ім'я автора веб-сторінки.
Description - Короткий опис сторінки.
Generator - Вказує на програмне забезпечення, використане для створення сторінки (не для рукописних сторінок).
Keywords - Ключові слова сторінки.
Viewport - деякі параметри області перегляду сторінки.

Основи роботи з мета-тегами – які види мета-тегів існують і навіщо вони потрібні, як складати метатеги для Яндекс та Google

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

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

Мета-теги – службові елементи коду, які надають пошуковим роботам інформацію про сторінку. При написанні мета-тегів title, description та keywords користувачеві не доведеться застосовувати навички кодингу: сучасні CMS та панелі в конструкторах сайтів дозволяють просто ввести текст, все необхідне для HTML-оформлення виконується автоматично без участі людини.

Що таке title, description та keywords

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

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

• технічні, за які відповідає програміст: Content-language повідомляє про мову контенту (сучасні браузери визначають мову автоматично), а Robots показує роботам, які сторінки включати і не включати в індекс. Існує багато технічних варіацій, без належного досвіду не варто намагатись налаштувати їх самостійно;
• SEO-мета-теги, що дають уявлення про вміст сторінки – це вищезгадані title, description та keywords. Впливають на якість ранжування сайту, а пошукова система орієнтується на них, пропонуючи користувачам релевантний контент.

Види мета-тегів, які враховує Яндекс + title (у цьому розділі Довідка не вказана)

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

Навіщо використовуються мета-теги

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

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

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

Які види мета-тегів існують

Мета-тег title (пошуковий заголовок)

Title – назва (пошуковий заголовок), яка вказується для кожної сторінки. У видачі відображається у вигляді анкорного синього посилання під URL-адресою. Після відкриття сторінки title доступний у назві браузерної вкладки. В Яндекс.Довідці зазначено, що елемент дає уявлення про релевантність сторінки запиту користувача та загальний зміст. Додатково – використання у сніпеті, у цьому випадку мета-тег виконує функцію заголовка, який може створюватись на основі контексту сторінки. У HTML-форматі title виглядає так:

Зміст пошукового заголовка прямо впливає рішення користувача про перехід на ту чи іншу сторінку. У зв'язку з цим його написання потрібно приділити особливу увагу.

Як виглядає title у пошуковій видачі

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

Довжину заголовка визначає ширина екрану, занадто об'ємні формулювання в результатах видачі пошукова система обрізає. При складанні мета-тегу потрібно використовувати ключові запити та переваги, а також релевантну інформацію – користувач повинен відразу розуміти, на який сайт його запрошують і чому він має вибрати саме його. У Яндекс довжина title становить близько 70 символів з пробілами, у Google – 60, у чому складність: непросто вмістити всі важливі параметри в строго лімітований обсяг. При написанні рекомендується дотримуватися таких правил:

• використання ключових слів, визначених ще на етапі складання семантичного ядра сайту. Однак спам неприпустимий - 1-2 запитів буде достатньо, не рекомендується використовувати повтори, витрачаючи обмежену кількість символів на текст без корисної інформації;
• видалення всього зайвого. У title не виносять номери телефонів та адреси електронної пошти, аналогічні дані.Варто прагнути максимально ємного і SEO-оптимізованого пошукового заголовка;
• відмова від шаблонності. Не варто застосовувати для всіх сторінок ідентичні title з мінімальними змінами. Наприклад, «Назва товару – ціна, відгуки, фото». Користувачеві буде складно зрозуміти, у чому різниця між сторінками. Якщо всі дані не вдається розмістити в заголовку, їх краще відправити в опис description. Якщо останнє буде релевантним, то зможе потрапити до сніпету;
• брендовані запити. У заголовок варто додавати найменування компанії, що дозволить залучити трафік за брендованими запитами. Яндекс рекомендується вказувати марення на початку або в кінці title, для поділу можна використовувати дефіс, двокрапку або вертикальну межу. Додатково відтінити фірмовий стиль допоможе завантаження фавікон.

Перевірити, чи все гаразд із пошуковим заголовком та описом, можна в Яндекс.Вебмайстрі на сторінці «Заголовки та описи»

Заголовки сторінок мають бути унікальними, рекомендується видаляти прийменники, частки, спілки, вступні слова – все те, що не має інформаційного навантаження. Розглянемо з прикладу, як написати мета-тег title по вступним «купити стіл», «купити дешевий стіл», «купити стіл з дерева»:

• неправильно: «Купити стіл, купити дешевий стіл, купити стіл із дерева прямо зараз»;
• правильно: «Купити дешевий стіл із дерева з безкоштовною доставкою та знижкою 5%».

В останньому варіанті присутні всі необхідні слова, об'єднання запитів (не обов'язково розміщувати їх у прямому входженні) робить заголовок легкочитаним, попереджаючи спам. Додатково ми відобразили знижку, що дає істотну перевагу перед конкурентами та демонструє вигоду клієнтам.

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

Мета-тег description (пошуковий опис)

Description – пошуковий опис, який відображає зміст сторінки. Є логічним продовженням заголовка, але нерідко ігнорується пошуковими системами. Може відображатися в сніпеті, проте якщо пошуковик визнає за потрібне – зробить заміну, вибравши рандомний фрагмент тексту, визначений як релевантний. Аналогічно сніпет формується у випадку, якщо поле description не заповнене.

Кожен опис повинен бути унікальним всередині сайту по відношенню до інших описів. Він містить ключові слова, все найважливіше краще винести на початок. Рекомендована довжина – 160-200 символів з урахуванням прогалин. HTML виглядає так:

Довжина опису обмежена шириною екрана пристрою. У нього потрібно виносити цікаву та корисну інформацію, що повністю відповідає запиту.

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

Правила складання description аналогічні тим, що актуальні для написання пошукового заголовка:

• мета-тег додається на всі сторінки сайту (така вимога має Яндекс);
• всі описи мають бути унікальними як проти зовнішніми ресурсами, і із внутрішніми сторінками.Шаблонні або скопійовані у конкурентів description не демонструються в результатах пошуку, їх виключають як низькоінформативні;
• опис повинен чітко розкривати вміст сторінки, для якої воно призначене. Слід прибрати переспам, агресивні рекламні заклики, розмаїття знаків оклику;
• при наповненні великих багатосторінкових сайтів потрібно спочатку додавати description на важливі сторінки, такі як каталог, головна та схожі;
• description не повинен копіювати title, він пишеться тією мовою, яка застосовувалася для наповнення сторінки.

Рекомендації щодо написання description від Яндекс

Розглянемо приклад вдалого та невдалого опису по вступних «купити іграшку», «розвиваюча іграшка для найменших»:

• невдало: «Іграшка – один із найважливіших факторів для дитячого розвитку. Іграшка допомагає зайняти дитину, покращити дрібну моторику та концентрацію уваги. Чому варто купити іграшку у нас? У магазині є великий асортимент іграшок, що розвивають, для найменших»;
• вдало: «Іграшки, що розвивають, для найменших - купити з доставкою в термін 1-3 дні в будь-який регіон РФ. Великий асортимент: від дерев'яних моделей до бізібордів для нових покупців знижка 15%».

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

Мета-тег keywords (ключові слова)

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

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

Особливих інструкцій щодо цього атрибуту немає: додавайте від 3 до 10 ключових слів (можна розділяти комами), які повністю релевантні сторінці, що просувається.

Загальні правила створення мета-тегів

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

• мета-теги не повинні бути занадто довгими, ні короткими. Розгорнуті формулювання пошукові системи обрізають, а title, наприклад, «Купити диван з доставкою» – не інформативний, тому очікувати високої клікабельності не варто;
• не можна використовувати однакові title та description для всіх або кількох сторінок сайту. Вони є унікальним відображенням вмісту, тому не можуть бути ідентичними;
• дозволено комбінування латиниці та кирилиці, а також застосування англомовних слів у російськомовних описах та заголовках - Це може бути назва бренду або модель смартфона. Однак якщо сторінка наповнена текстом російською мовою, а title, description і keywords написані англійською або китайською - вони є нерелевантними і будуть негативно сприйняті пошуковими системами.

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

Де переглядати мета-теги

Мета-теги знаходяться у відкритому доступі, якщо необхідно подивитися варіанти конкурентів, достатньо дотримуватися інструкцій:

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

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

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

• управління SEO-параметрами можливе з двох розділів – це «Налаштування сторінки» (на етапі створення у графічному редакторі) та «Налаштування сайту» (легко відкрити з особистого кабінету);
• вибираємо сайт, для якого задаватимемо параметри, клацаємо на колесо-шестерню і переключаємося на SEO;
• тут можна прописати атрибути title, description та keywords, після чого доступний як перегляд, так і редагування. Додатково – встановлення заборони або дозволу на індексацію сторінки пошуковими роботами.

Налаштування, редагування мета-тегів у конструкторі Крафтум

За аналогічним принципом працюють усі сучасні CMS та конструктори: додавання мета-тегів з боку користувача займає не більше кількох хвилин, що спрощує процес оптимізації. Багато сервісів доповнені AI інструментами, наприклад, у Craftum є ІІ-помічник, здатний миттєво перефразувати будь-який текст (підтримується графічним редактором), але без втрати змісту.

AI-помічник для перефразування в один клік

На закінчення

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

- елемент для опису метаданих

Ця особливість є добре створеною і роботою, пов'язаною з багатьма пристроями і розробниками версій. It's been available across browsers since July 2015 .

HTML-елемент представляє такі метадані, які можуть бути представлені іншими HTML-метатегами, як-от , , , чи .

Атрибути

Цей елемент включає глобальні атрибути.

Примітка: Атрибут name має особливе значення для елемента і атрибут itemprop не повинен бути заданий в елементі, в якому вже визначені будь-які name , http-equiv або charset атрибути.

Цей атрибут визначає кодування символів, яке використовується на сторінці. Він має містити стандартне ім'я IANA MIME для кодування символів. Хоча стандарт не вимагає певного кодування, він рекомендує:

• Авторам рекомендується використовувати UTF-8.
• Не слід використовувати ASCII-несумісні кодування, щоб уникнути загроз безпеки: браузери, які не підтримують їх, можуть інтерпретувати шкідливий контент як HTML. Це стосується сімейства кодувань JIS_C6226-1983 , JIS_X0212-1990 , HZ-GB-2312 , JOHAB та EBCDIC .

Примітка: ASCII-несумісні кодування - це ті, які не перетворюють 8-бітові коди точок 0x20, 0x7E, 0x0020, 0x007E в коди Unicode точок.

• Автори не повинні використовувати CESU-8, UTF-7, BOCU-1 та/або SCSU, так як є приклади атак міжсайтового скриптингу, що використовують дані кодування.
• Авторам не слід використовувати кодування UTF-32, тому що не всі алгоритми кодування HTML5 можуть відрізнити його від UTF-16. Примітка:
• Зазначений набір символів має відповідати одній сторінці. Немає вагомих підстав для оголошення неточного набору символів.
• елемент повинен знаходитися всередині елемента і задаватися в 1024 перших байтів HTML сторінки, оскільки деякі браузери дивляться лише ці байти перед вибором кодування.
• Цей елемент - частина алгоритму, що визначає набір символів (сторінки, який підтримує браузер). Заголовок Content-Type та будь-які Byte-Order Marks елементи перевизначають цей елемент.
• Рекомендовано визначити кодування символів. Якщо для сторінки не визначено набір символів, деякі cross-scripting технології можуть пошкодити сторінку, наприклад такі як UTF-7 fallback cross-scripting technique. Постійне встановлення цього елемента буде захищати вас від цього ризику.
• Цей елемент це синонім для pre-HTML5, де * IANAcharset * відповідає значенню еквівалентного charset атрибута.Цей синтаксис, як і раніше, дозволений, хоча і застарів і більше не рекомендується.

Цей атрибут містить значення для http-equiv або name атрибута залежно від контексту.

Цей атрибут визначає прагму, яка може змінювати поведінку серверів та користувачів. Значення прагми визначається за допомогою content і може бути наступним:

Ця прагма визначає значення мови сторінки за промовчанням.

Примітка: Не використовуйте цю прагму, оскільки вона застаріла. Використовуйте глобальний атрибут елемента замість цього.

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

Цей атрибут визначає MIME тип документа. За ним слідує синтаксис такий же, як і в полі заголовка об'єкта вмісту HTTPI, однак як і всередині HTML-елемента, більшість цих значень не доступна. Тому допустимим синтаксисом для його вмісту є літеральний рядок 'text/html', за яким слідує набір символів з наступним синтаксисом: '; charset= IANAcharset ' де IANAcharset це краще MIME ім'я для набору символів, що визначається якIANA.

Спеціалізація цієї прагми - найкращий стиль таблиць, що використовується на сторінці. content атрибут повинен містити заголовок елемента, який href пов'язує атрибут з CSS таблицею стилів, або заголовок елемента, який містить CSS таблицю стилів.

Ця прагма визначає:

• Кількість секунд перезавантаження таблиці, якщо вміст атрибут містить тільки ціле позитивне число;
• Час, у кількості секунд, протягом якого сторінка має бути перенаправлена ​​на іншу, якщо content атрибут містить ціле позитивне число, що закінчується рядком ' ;url= ' і коректний URL.

Ця прагма визначає cookie для сторінки. Її вміст повинен закінчуватися синтаксисом, який визначається IETF HTTP Cookie Specification.

Примітка: Не використовуєте цієї прагми, оскільки вона застаріла. Використовуйте HTTP header set-cookie замість цього.

Цей атрибут визначає назву рівня документа метаданих. Його не слід встановлювати, якщо один із атрибутів itemprop, http-equiv або charset також вказаний у наборі. Ім'я цього документального рівня метаданих пов'язане зі значенням, яке міститься в content атрибуті. Допустимі значення для імені елемента, зі зв'язаними з ними значеннями, зберігаються за допомогою content атрибута:

application-name , визначає ім'я веб-застосунку, запущеного на веб-сторінці;

Примітка: Деякі браузери підтримують ключові слова завжди, за промовчанням і ніколи для реферера. Ці значення застаріли.

Примітка: Динамічна вставка (за допомогою document.write або appendChild) створює недетермінізм, коли доходить до відправки реферерів. Також слід зазначити, що коли визначається кілька конфліктуючих політик, застосовується No-referrer policy. Атрибут також може мати значення, взяте з існуючого аркуша визначень WHATWG Wiki MetaExtensions page. Хоча жоден з них офіційно не був прийнятий, до пропозицій входять кілька найчастіше використовуваних імен:

Примітка: Тільки кооперативні роботи слідуватимуть правилам, визначеним ім'ям роботів. Роботу необхідно отримати доступ до сторінки, щоб рахувати мета значення. Якщо ви хочете приховати від них інформацію, використовуйте robots.txt файл. Якщо ви хочете видалити сторінку індексу, зміна мета в noindex працюватиме, але тільки тоді, коли робот знову відвідає сторінку. Переконайтеся, що файл robots.txt не запобігає таким відвідуванням.Деякі пошукові системи мають інструменти, що дозволяють швидко видалити будь-яку сторінку. Деякі можливі значення взаємно виключають одне одного, такі як використання індексу та noindex або follow та nofollow одночасно. У цих випадках поведінка робота не визначена і може змінюватись від одного до іншого. Тому уникайте цих випадків. Деякі пошукові роботи-роботи, такі як Google, Yahoo Search або Bing, підтримують ті ж значення у директиві HTTP, X-Robot-Tags: це дозволяє їм використовувати цю прагму для документів, відмінних від HTML, наприклад зображень.

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

Примітка: Хоча і не стандартизований, цей атрибут використовується різними мобільними браузерами, наприклад Safari Mobile, Firefox для Mobile або Opera Mobile. Значення за замовчуванням можуть бути змінені у різних браузерів або пристроїв.

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

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

Зауваження

Залежно від встановлених атрибутів тип метаданих може бути одним з наступних:

• Якщо в наборі name, то це document-level metadata, що застосовується до всієї сторінки.
• Якщо в наборі http-equiv, то це pragma directive, тобто інформація, що веб-сервер надає інформацію про те, як повинна обслуговуватися веб-сторінка.
• Якщо в наборі charset, то це charset declaration, тобто кодування, яке використовується для серіалізованої форми веб-сторінки.
• Якщо в наборі itemprop, то це user-defined metadata, прозора для агента користувача, оскільки семантика метаданих залежить від користувача. Експериментальна можливість

приклад

Специфікації

Сумісність із браузерами

BCD tables only load in the browser

Дивіться також