Настройки метаданных
Оценка готовности Open Graph
Заполните поля для повышения кликабельности
Предпросмотр
HTML-код
Часто задаваемые вопросы (FAQ)
<title> используется вкладками браузеров и поисковыми роботами Google / Яндекс. Тег og:title предназначается для соцсетей и мессенджеров. Тег twitter:title оптимизирован специально под карточки Twitter / X. Если специфические теги не указаны, платформы используют стандартный <title>.
Генератор микроразметки Open Graph — это интерактивный инструмент для генерации Open Graph тегов, карточек Twitter/X, Telegram, MAX и базовых SEO-метатегов с функцией предпросмотра в реальном времени.
Быстрый старт: Использование готовых пресетов
Если вы хотите быстро увидеть, как работает сервис, или создать разметку под типовую страницу, воспользуйтесь кнопками готовых пресетов в верхней правой части шапки:
- Блог — оптимальный набор тегов для статей, публикаций и постов с картинкой формата 1200x630.
- Товар — разметка для страниц интернет-магазинов и карточек товаров.
- Сервис / SaaS — пресет для главных страниц продуктов, онлайн-сервисов и посадочных страниц (Landing Page).
- Сброс — очищает все поля формы для ввода данных с нуля.
Пошаговое заполнение метаданных
Форма ввода разделена на три логические вкладки:
1. Вкладка «Open Graph»
Используется большинством социальных сетей и мессенджеров (Telegram, VK, Facebook, LinkedIn, WhatsApp).
- Заголовок страницы (og:title): Заголовок, который отобразится в карточке ссылки. Рекомендуемая длина: 40–60 символов.
- Описание (og:description): Краткий анонс страницы. Рекомендуемая длина: 50–160 символов.
- Канонический URL (og:url): Полный веб-адрес страницы, начиная с https://.
- Тип объекта (og:type):
- website — для главных страниц и обычных сайтов;
- article — для статей и постов в блогах;
- product — для карточек товаров.
- Ссылка на превью-изображение (og:image): Прямая URL-ссылка на обложку.💡 Совет: Вы можете нажать на кнопку «Пример» рядом с полем ввода и выбрать одну из готовых тематических картинок (Технологии, Природа, Бизнес, Абстракция).
- Название сайта (og:site_name): Имя вашего бренда или проекта.
- Язык / Локаль (og:locale):Языковая зона страницы (например, ru_RU или en_US).
2. Вкладка «Twitter / X»
Позволяет настроить отображение ссылки в соцсети Twitter (X).
- Тип карточки (twitter:card):
- summary_large_image — большая плашка с крупной картинкой сверху (рекомендуется);
- summary — компактный вариант с небольшой квадратной картинкой слева.
- Аккаунт сайта (twitter:site): Никнейм профиля проекта в Twitter (без символа @).
- Автор контента (twitter:creator): Никнейм автора статьи/материала.
- Alt-текст изображения (twitter:image:alt): Описание картинки для пользователей с ограничениями по зрению.
3. Вкладка «SEO / Meta»
Стандартные теги для поисковых систем (Google, Яндекс) и вкладки браузера.
- Тег Title (<title>): Заголовок в вкладке браузера и поисковой выдаче.
- Meta Description: Описание для поискового сниппета.
- Ключевые слова (meta keywords): Ключевые фразы через запятую.
- Автор (meta author): Имя или организация-автор страницы.
- Индексация (meta robots): Инструкции для поисковых роботов (index, follow — индексировать все, noindex — скрыть от поиска).
Предпросмотр
В правом верхнем блоке отображается то, как ваша ссылка будет выглядеть на разных платформах.
Используйте переключатели:
- Twitter: Превью карточки в ленте Twitter/X.
- Telegram: Превью ссылки во всплывающем сообщении в чате Telegram.
- Google: Превью сниппета в поисковой выдаче Яндекс/Google.
Оценка готовности
Под формой расположен индикатор качества разметки (в процентах):
- 80–100% (Зеленый): Отличная разметка, все ключевые поля заполнены и соответствуют лимитам по длине.
- 50–79% (Желтый): Хороший результат, но некоторые поля можно улучшить.
- Менее 50% (Красный): Не заполнены основные поля (og:title, og:image, og:description).
Нажмите кнопку «Чек-лист», чтобы развернуть детальный список рекомендаций по длине текста и валидности ссылок.
Экспорт и вставка кода на сайт
В нижнем правом блоке автоматически формируется готовый HTML-код.
- Копирование в 1 клик: Нажмите кнопку «Копировать». Готовый код сохранится в буфер обмена.
- Скачивание файла: Нажмите «.html», чтобы сохранить файл meta-tags.html на компьютер.
- Установка на сайт: Вставьте скопированный код внутри тега <head>...</head> вашей HTML-страницы.