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

Создавайте мета-теги 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 страницы.