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

Создавайте мета-теги SEO, Open Graph и Twitter Card для вашей страницы на основе заголовка, описания, канонического URL, изображения, имени сайта и типа карточки.

Загрузка инструмента…

Генератор мета-тегов — Заполните заголовок страницы, описание, канонический URL, изображение и имя сайта, чтобы получить готовый к вставке блок мета-тегов SEO, Open Graph и Twitter Card для секции head вашего HTML. Живые превью результатов поиска Google и социальной карточки показывают, как страница будет выглядеть в поиске и при публикации. Всё генерируется в вашем браузере — ничего о вашей странице не загружается на сервер.

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

Генератор мета-тегов — это бесплатный онлайн-инструмент, который превращает несколько данных о странице в полный набор 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-теги — он не сканирует ваш сайт и не читает страницу за вас.

Как пользоваться Генератор мета-тегов

  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 и социальной карточки, чтобы проверить результат перед публикацией.

Примеры

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

Ввод

Заголовок: 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>

Часто задаваемые вопросы

Какие мета-теги создаёт этот инструмент?
Он создаёт стандартные теги 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 или описания — не загружается, не сохраняется и никуда не отправляется, поэтому инструмент безопасно использовать на закрытых страницах или страницах до запуска.

Похожие инструменты

Генератор тегов 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 страницы.