Генератор мета-тегів

Створюйте мета-теги SEO, Open Graph, article і Twitter Card з живими лічильниками довжини заголовка та опису й параметрами robots, theme-color і автора.

Завантаження інструмента…

Генератор мета-тегів — Заповніть заголовок сторінки, опис, канонічний URL, зображення та назву сайту, щоб отримати готовий до вставлення блок мета-тегів SEO, Open Graph і Twitter Card для секції head вашого HTML. Живі попередні перегляди результатів пошуку Google і соціальної картки показують, як сторінка виглядатиме в пошуку та під час поширення. Усе генерується у вашому браузері — нічого про вашу сторінку не завантажується на сервер. Живі лічильники порівнюють ваш заголовок та опис із рекомендованою довжиною, необовʼязкові поля додають теги robots, viewport, charset, theme-color та автора, а також специфічні для статей теги Open Graph, і інструмент зчитує URL зображення, щоб попередити про відсутнє або незвично велике прев’ю.

Що таке Генератор мета-тегів?

Генератор мета-тегів — це безкоштовний онлайн-інструмент, який перетворює кілька даних про сторінку на повний набір HTML-мета-тегів: стандартні теги SEO (title, meta description, канонічний link), теги Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name) і теги Twitter Card (twitter:card, twitter:title, twitter:description, twitter:image). Маркетологи, блогери та розробники використовують його під час запуску сторінки чи статті, щоб керувати тим, як вона відображається в результатах пошуку Google і як її посилання розгортається у Facebook, LinkedIn, X/Twitter, Slack і Discord. Виберіть og:type (website, article, product, profile або video.other) і стиль twitter:card (summary, summary_large_image, app або player), і інструмент запише лише рядки для тих полів, які ви заповнили. Він виводить звичайні HTML-теги — він не сканує ваш сайт і не читає сторінку замість вас. Живі лічильники попереджають, коли заголовок (близько 60 символів) або опис (близько 160) стає задовгим, а інструмент завантажує URL зображення, щоб зчитати його реальний розмір у пікселях і попередити про відсутнє чи завелике/замале зображення. Необовʼязкові поля додають директиву robots, теги viewport і charset UTF-8, theme-color та автора, а також article:published_time, article:author і article:section, коли og:type — article.

Як користуватися Генератор мета-тегів

  1. Уведіть заголовок сторінки — він стане тегами <title>, og:title і twitter:title.
  2. Напишіть мета-опис (близько 150–160 символів) для тегів description, og:description і twitter:description.
  3. Укажіть канонічний URL сторінки та абсолютний URL зображення для попереднього перегляду посилання.
  4. Додайте назву сайту та виберіть og:type і twitter:card у випадних списках.
  5. Скопіюйте згенерований блок HTML із поля виводу та вставте його в <head> вашої сторінки.
  6. Скористайтеся попередніми переглядами результатів пошуку Google і соціальної картки, щоб перевірити результат перед публікацією.
  7. Стежте за живими лічильниками довжини заголовка та опису й відкрийте параметри ⚙, щоб додати теги robots, viewport, charset, theme-color, автора чи статті.

Приклади

Теги для статті блогу

Вхідні дані

Заголовок: How to Bake Sourdough
Опис: A beginner's guide to baking sourdough bread at home.
URL: https://blog.example.com/sourdough
og:type: article

Результат

<title>How to Bake Sourdough</title>
<meta name="description" content="A beginner's guide to baking sourdough bread at home." />
<link rel="canonical" href="https://blog.example.com/sourdough" />
<meta property="og:title" content="How to Bake Sourdough" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />

Соціальна картка з великим зображенням

Вхідні дані

Зображення: https://example.com/og.png
twitter:card: summary_large_image

Результат

<meta property="og:image" content="https://example.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

Спеціальні символи екрануються

Вхідні дані

Заголовок: Tips & Tricks for "Pros"

Результат

<title>Tips &amp; Tricks for &quot;Pros&quot;</title>

Стаття з тегами robots і статті

Вхідні дані

Заголовок: How to Bake Sourdough
og:type: article
Robots: index, follow
article:published_time: 2024-05-01T09:00
article:section: Food

Результат

<meta name="robots" content="index, follow" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2024-05-01T09:00" />
<meta property="article:section" content="Food" />

Поширені запитання

Які мета-теги створює цей інструмент?
Він створює стандартні теги SEO (<title>, meta description і канонічний link), теги Open Graph (og:title, og:description, og:type, og:url, og:image, og:site_name) і теги Twitter Card (twitter:card, twitter:title, twitter:description, twitter:image). Включаються лише рядки для тих полів, які ви заповнили, тому ви ніколи не отримаєте порожніх тегів-заповнювачів.
Яка різниця між og:type і twitter:card?
og:type повідомляє платформам, який тип обʼєкта представляє сторінка — website, article, product, profile або video.other — що впливає на те, як розгортається посилання. twitter:card вибирає макет у X/Twitter: summary — це маленька мініатюра, summary_large_image показує велике банерне зображення, а app і player призначені для застосунків і медіа. Виберіть пару, що відповідає вашому контенту.
Чи має URL зображення бути абсолютним?
Так. og:image і twitter:image мають бути повними абсолютними URL, що починаються з https://, бо парсери завантажують їх ззовні вашого сайту — відносний шлях на кшталт /og.png не завантажиться. Для найкращого результату використовуйте зображення 1200×630 для великих карток.
Чи сканує цей інструмент мою діючу сторінку або читає її?
Ні. Він лише форматує введені вами значення в HTML-мета-теги. Він не завантажує, не сканує й не аналізує жодних URL — канонічний URL і URL зображення записуються в теги дослівно, без відвідування.
Чи надсилаються мої дані на сервер?
Ні. Теги створюються повністю у вашому браузері за допомогою JavaScript. Ніщо з того, що ви вводите — зокрема неопубліковані заголовки, URL чи описи — не завантажується, не зберігається й нікуди не надсилається, тому інструмент безпечно використовувати на закритих сторінках або сторінках до запуску.
Якої довжини мають бути заголовок і опис?
Орієнтуйтеся приблизно на 60 символів або менше для заголовка та приблизно на 120–160 для опису; пошукові системи обрізають довший текст. Інструмент показує для кожного живий лічильник, який перемикається зі стану «гаразд» на попередження, щойно ви перевищите рекомендовану довжину.
Які додаткові мета-теги я можу додати та як працюють попередження про зображення?
Відкрийте параметри ⚙, щоб додати директиву robots (пресети index/follow), тег viewport, тег charset UTF-8, theme-color та автора; коли og:type — article, можна також додати article:published_time, article:author і article:section. Інструмент також завантажує URL зображення у браузері, щоб показати його реальний розмір у пікселях і попередити, якщо зображення відсутнє або сильно відрізняється від рекомендованого 1200×630.

Схожі інструменти

Генератор тегів hreflang

Генерує теги link hreflang для багатомовної сторінки зі списку пар «локаль — URL», з необовʼязковим x-default і самопосильним тегом.

Генератор JSON-LD

Створюйте коректні структуровані дані JSON-LD для схем Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList та Organization за допомогою простої форми.

Перевірка щільності ключових слів

Аналізуйте частоту слів і щільність ключових слів для фраз із 1, 2 або 3 слів — із фільтром стоп-слів і пошуком цільового слова.

Попередній перегляд Open Graph і соціальних карток

Перегляньте, як посилання розгортається в соціальну картку в X, LinkedIn, Slack, Discord і Facebook на основі заголовка, опису, URL зображення та URL сторінки.