Как пользоваться
- Введите заголовок и описание страницы.
- Укажите полный адрес страницы в поле «Канонический URL» и ссылку на изображение для соцсетей в поле «URL изображения».
- Оставьте включёнными «Добавить Open Graph» и «Добавить Twitter Card», если нужны теги для соцсетей. Если какой-то блок не нужен, снимите его флажок.
- Выберите в «og:type» тип страницы: например, article для статьи или product для товара.
- Скопируйте готовый код и вставьте его в секцию head вашей страницы.
Примеры
Статья о поездке в Казань
Исходные данные
Заголовок: Что посмотреть в Казани за выходные — Город рядом Описание: Маршрут по Казани на два дня: Кремль, Старо-Татарская слобода, набережная и места, где попробовать татарскую кухню. Советы для самостоятельной поездки. Адрес: https://gorod-ryadom.example/blog/kazan Изображение: https://gorod-ryadom.example/images/kazan.jpg Автор: Анна Соколова
Результат
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Что посмотреть в Казани за выходные — Город рядом</title> <meta name="description" content="Маршрут по Казани на два дня: Кремль, Старо-Татарская слобода, набережная и места, где попробовать татарскую кухню. Советы для самостоятельной поездки."> <meta name="robots" content="index, follow, max-image-preview:large"> <meta name="author" content="Анна Соколова"> <link rel="canonical" href="https://gorod-ryadom.example/blog/kazan"> <!-- Open Graph --> <meta property="og:type" content="article"> <meta property="og:url" content="https://gorod-ryadom.example/blog/kazan"> <meta property="og:title" content="Что посмотреть в Казани за выходные — Город рядом"> <meta property="og:description" content="Маршрут по Казани на два дня: Кремль, Старо-Татарская слобода, набережная и места, где попробовать татарскую кухню. Советы для самостоятельной поездки."> <meta property="og:image" content="https://gorod-ryadom.example/images/kazan.jpg"> <meta property="og:image:alt" content="Казанский кремль со стороны набережной"> <meta property="og:site_name" content="Город рядом"> <meta property="og:locale" content="ru_RU"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@gorod_ryadom"> <meta name="twitter:image:alt" content="Казанский кремль со стороны набережной">
Товар с отдельным заголовком для соцсетей
Исходные данные
Заголовок: Чашка «Лён & глина», 300 мл — мастерская Тёплый дом Описание: Керамическая чашка ручной работы объёмом 300 мл. Матовая глазурь, два цвета на выбор. Доставка по России и самовывоз из мастерской в Туле. Адрес: https://teply-dom.example/catalog/chashka-len Изображение: https://teply-dom.example/images/chashka-len.jpg Заголовок для соцсетей: Новая чашка для уютных завтраков Описание для соцсетей: «Лён & глина»: ручная работа, матовая глазурь и два спокойных оттенка.
Результат
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Чашка «Лён & глина», 300 мл — мастерская Тёплый дом</title> <meta name="description" content="Керамическая чашка ручной работы объёмом 300 мл. Матовая глазурь, два цвета на выбор. Доставка по России и самовывоз из мастерской в Туле."> <link rel="canonical" href="https://teply-dom.example/catalog/chashka-len"> <!-- Open Graph --> <meta property="og:type" content="product"> <meta property="og:url" content="https://teply-dom.example/catalog/chashka-len"> <meta property="og:title" content="Новая чашка для уютных завтраков"> <meta property="og:description" content="«Лён & глина»: ручная работа, матовая глазурь и два спокойных оттенка."> <meta property="og:image" content="https://teply-dom.example/images/chashka-len.jpg"> <meta property="og:image:alt" content="Керамическая чашка с матовой глазурью на льняной салфетке"> <meta property="og:site_name" content="Тёплый дом"> <meta property="og:locale" content="ru_RU"> <!-- Twitter --> <meta name="twitter:card" content="summary"> <meta name="twitter:image:alt" content="Керамическая чашка с матовой глазурью на льняной салфетке">
Частые вопросы
Какая длина заголовка (Title) и описания (Description) считается подходящей?
Счётчик отмечает Title как подходящий при 30–60 символах и ширине до 580 пикселей, а Description — при 70–160 символах. Это ориентиры инструмента, а не гарантия отображения текста целиком.
Будет ли сниппет в Google выглядеть точно как в превью?
Превью помогает оценить вид заголовка и описания, но не гарантирует совпадение с выдачей. Google может изменить оба текста.
Сохраняются ли введённые данные?
Текстовые поля не сохраняются между посещениями; в localStorage остаются только настройки флажков и списков. Код генерируется в браузере без отправки введённых значений на сервер сайта, но при открытии превью Facebook или X браузер загружает изображение напрямую по указанной ссылке.
Можно ли добавить meta keywords?
Генератор не создаёт meta keywords. Поля для этого тега нет.