Коротко
безкоштовний генератор мета-тегів пише код head, потрібний сторінці, щоб добре виглядати в Google і під час поширення: тег title, мета-опис, viewport, теги Open Graph, які читають Facebook і LinkedIn, та теги Twitter Card, які читає X. Введіть заголовок і опис, дотримуйтесь лічильників символів і трьох живих прев'ю, а потім вставте HTML-блок у head своєї сторінки.
Хочете дізнатися більше? Запитайте
Генератор мета-тегів позбавляє вас від написання вручну тих самих дванадцяти рядків для кожної сторінки та від дрібних помилок, які їх ламають. Два з цих рядків формують ваш результат у Google. Google повідомляє, що може використати мета-опис для сніпета, коли він описує сторінку краще за сам текст сторінки (Google Search Central, meta descriptions). Інші рядки визначають, що бачать люди, коли ваше посилання вставляють у стрічку, чат чи лист.
Що створює генератор мета-тегів?
Він повертає один HTML-блок, згрупований у три частини: базові теги, теги Open Graph і теги Twitter Card. Необов'язкові поля додають свій тег лише тоді, коли ви їх заповнюєте, тож у коді ніколи немає порожніх значень.
| Тег | Що він робить | Основний читач | Коли записується |
|---|---|---|---|
| charset (UTF-8) | Оголошує кодування символів | Браузери | Завжди |
| viewport | Підказує мобільним браузерам, як масштабувати сторінку | Браузери та Google | Завжди |
| title | Називає сторінку у видачі та у вкладці браузера | Google, Bing, браузери | Завжди |
| мета-опис | Коротко описує сторінку для сніпета у видачі | Google, Bing | Завжди |
| content-language | Оголошує мову сторінки | Деякі інструменти та браузери | Коли ви обираєте мову |
| og:type, og:title, og:description | Формує прев'ю посилання | Facebook, LinkedIn, месенджери | Завжди |
| og:url, og:image, og:site_name | Додає адресу, зображення та ваш бренд | Ті самі платформи | Коли заповнено |
| twitter:card, twitter:title, twitter:description, twitter:image | Формує картку з великим зображенням | X | Завжди, зображення коли заповнено |
Тип картки встановлено як summary_large_image: формат, що показує широке зображення над заголовком в X.
Як користуватися генератором мета-тегів?
Заповніть два поля, перевірте три прев'ю й скопіюйте код. Увесь процес займає приблизно хвилину на сторінку.
- Введіть заголовок сторінки. Лічильник стає зеленим між 50 і 60 символами; поле зупиняється на 70.
- Напишіть мета-опис. Лічильник стає зеленим між 150 і 160 символами, що є максимумом для поля.
- Відкрийте «Зображення, назва сайту та мова», щоб додати URL сторінки, URL зображення для поширення, назву сайту та мову (англійська, французька, іспанська або німецька).
- Натисніть «Згенерувати мета-теги» і прочитайте три прев'ю: Google, Facebook і LinkedIn, а потім X.
- Скопіюйте HTML і вставте його всередину елемента head сторінки або скопіюйте кожне значення в SEO-поля вашої CMS.
Більшість CMS-платформ уже виводять рядки charset і viewport. У такому разі залишайте лише title, опис і соціальні теги, щоб на сторінці не було дублів.
Якої довжини мають бути тег title і мета-опис?
Орієнтуйтеся на 50-60 символів для title і 150-160 символів для опису. Google не встановлює жорсткого ліміту: він заявляє, що довжина елемента title не обмежена, але посилання-заголовок обрізається за потреби, зазвичай відповідно до ширини пристрою (Google Search Central, title links). Те саме він каже й про описи. Наведені нижче орієнтири зберігають важливі слова у видимій частині на більшості екранів.
| Елемент | Орієнтир в інструменті | Ліміт поля | Прев'ю Google в інструменті |
|---|---|---|---|
| Тег title | 50-60 символів | 70 символів | Понад 60 символів показує перші 57 і три крапки |
| Мета-опис | 150-160 символів | 160 символів | Показується повністю до ліміту 160 |
| og:title і twitter:title | Те саме, що title | Копіюється з title | Показується у прев'ю Facebook, LinkedIn та X |
Обрізання залежить від ширини в пікселях, а не від кількості символів: title, повний широких літер на кшталт M і W, обрізається раніше, ніж повний літер i та l. Сприймайте лічильники як орієнтир і ставте ключове слово та вигоду в першу половину кожного рядка.
Які мета-теги Google справді використовує?
Менше, ніж міститься в більшості шаблонів. Google документує мета-теги, які підтримує, і кілька поширених не мають жодного впливу на пошук (Google, meta tags Google supports).
- Title і опис: використовуються для посилання-заголовка та сніпета. Google використовує елемент title у понад 80% випадків і переписує його, коли він довгий, перевантажений ключовими словами або загальний (Google Search Central blog, 2021).
- Viewport: підтримується, а його наявність підказує Google, що сторінку створено для мобільних пристроїв.
- Meta keywords: Google Search не використовує зовсім, тому генератор його пропускає.
- Мовні теги: Google визначає мову за видимим контентом і не використовує мовну інформацію на рівні коду, як-от атрибути lang (Google, multi-regional and multilingual sites). Рядок content-language допомагає іншим інструментам; для міжнародних версій сторінки використовуйте hreflang із генератором hreflang.
Щодо термінології дивіться наші статті глосарія про мета-теги, тег title і мета-опис.
Навіщо додавати теги Open Graph і Twitter Card?
Тому що без них кожна платформа гадає. Посилання, поширене в LinkedIn або месенджері без тегів Open Graph, може показати не те зображення, назву пункту меню замість заголовка або взагалі не показати прев'ю. Протокол Open Graph визначає чотири обов'язкові властивості для кожної сторінки: og:title, og:type, og:image та og:url (The Open Graph protocol).
Генератор завжди записує og:title і og:type. Він додає og:url та og:image лише тоді, коли ви заповнюєте необов'язкові поля, тож заповніть обидва, щоб виконати чотири обов'язкові властивості. Використовуйте абсолютний URL зображення, що починається з https, і горизонтальне зображення, яке добре читається навіть після обрізання. Потім перевірте результат інструментом попереднього перегляду Open Graph, який показує, як картка виглядає в кожній мережі.
Яких помилок із мета-тегами допомагають уникнути генератори?
Більшість проблем із мета-тегами повторюються і їх легко виявити до публікації.
- Однаковий title на кожній сторінці. Google вимагає окремого тексту на кожній сторінці й застерігає від шаблонних заголовків, що відрізняються одним словом.
- Опис, скопійований із першого абзацу. Напишіть натомість короткий виклад: на що відповідає сторінка, для кого й чому варто клікнути.
- Лапки, що ламають код. Генератор їх екранує, тож лапка всередині вашого опису не закриває атрибут.
- Зображення для поширення з відносним шляхом. Соціальним платформам потрібна повна адреса зображення.
- Теги в body. Мета-теги працюють лише всередині елемента head; вставлені нижче, вони ігноруються.
Коли краще писати мета-теги вручну?
Використовуйте генератор для однієї сторінки чи жменьки сторінок. Для великого сайту теги належать до шаблонів: title сторінки товару можна скласти з назви товару, категорії та бренду, а опис із реальних характеристик, як-от ціна чи розмір. Документація Google рекомендує генерувати описи програмно на великих сайтах, доки кожен залишається специфічним для своєї сторінки. Щоб спершу написати чіткіший опис, спробуйте AI-генератор мета-описів; для ідей заголовків AI-генератор SEO-заголовків пропонує п'ять варіантів, що вміщуються в Google.
Чи важливі мета-теги в пошуку на основі ШІ?
Так, хоча інакше. ChatGPT, Perplexity і Gemini не показують ваш мета-опис так, як Google, але title та опис усе одно описують сторінку для краулерів, що їх живлять, і для результатів пошуку, до яких ці асистенти часто звертаються. Зрозумілий title, що відповідає H1, й опис, який формулює відповідь, допомагають в обох випадках. Щоб побачити, як уся ваша сторінка виглядає для AI-асистентів, запустіть AI SEO-аудит.
Від однієї сторінки до всього сайту
Унікальні, точні мета-теги на кожній сторінці: невелика робота з тривалим впливом на кліки. Згенеруйте їх тут для ключових сторінок, а потім довірте генератору статей для блогу Sorank писати кожну нову статтю з уже оптимізованими тегом title і мета-описом та стежте за кліками, які вони здобувають, у дашборді GEO / SEO. Ознайомтеся з тарифами Sorank, щоб публікувати на autopilot.
