Softonic

Генератор тегов Open Graph

Шаг 1 / 2
Далее

Заполните заголовок, описание, канонический (canonical) URL, изображение для превью и og:type, и этот генератор напишет соответствующие теги <meta> для Open Graph, готовые к вставке в <head> вашей страницы. Поля, которые вы оставите пустыми, просто опускаются, а кавычки и амперсанды в вашем тексте экранируются, чтобы разметка оставалась корректной. Генератор пишет только пять основных свойств og:, а не теги Twitter Card или article.

Как создать ваши теги OG

  1. 1

    Выберите og:type

    website для главных страниц, article для публикаций, product для страниц магазина, video.other для встраивания. Поле произвольное, поэтому подойдёт любое корректное значение og:type.

  2. 2

    Заполните основные поля

    Заголовок, описание, канонический URL и абсолютный URL изображения. Любое поле, оставленное пустым, опускается в результате.

  3. 3

    Сгенерируйте теги

    Кавычки и амперсанды экранируются за вас, и вы получаете по одной строке meta на каждое заполненное поле.

  4. 4

    Скопируйте блок в head

    Вставьте его в `<head>` шаблона вашей страницы, выше любых уже имеющихся социальных тегов.

Теги, которые создаёт этот генератор

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

Это весь вывод. og:type пишется всегда, а og:title, og:description, og:url и og:image добавляются только тогда, когда вы их заполняете. Эти пять свойств Facebook, LinkedIn, Slack, Discord, WhatsApp и X читают первыми, поэтому они покрывают распространённый случай.

Генератор не пишет теги карточек twitter:, og:image:width / og:image:height, og:site_name, og:locale или теги article:. Если они вам нужны, добавьте их вручную рядом со сгенерированным блоком.

Важные значения og:type

Тип Когда использовать
website Главная страница, лендинги, статичный контент
article Посты в блоге, новости, редакционные страницы
product Страницы карточек товаров интернет-магазина
video.other Видеоконтент и встраивания
profile Страницы профилей авторов или пользователей
music.song Страницы отдельных треков

Теги, которые стоит добавить вручную

Тег Что делает Пример значения
og:site_name Название сайта целиком Example
og:locale Язык и регион страницы en_US
og:image:width Помогает скраперам быстрее разместить карточку 1200
og:image:height Помогает скраперам быстрее разместить карточку 630
twitter:card Макет карточки в X summary_large_image

X возвращается к тегам og:, когда тегов twitter: нет, поэтому страница, несущая только пять сгенерированных свойств, всё равно корректно отображается в предпросмотре и там. Добавляйте теги twitter: только тогда, когда хотите другой заголовок, описание или изображение именно в X.

Частые ошибки, которых этот генератор помогает избежать

  • name вместо property. Свойства Open Graph относятся к property="og:...". Генератор всегда пишет правильный атрибут.
  • Неэкранированные кавычки и амперсанды. Необработанный символ " или & в вашем заголовке ломает тег. Генератор экранирует их за вас.
  • Относительные URL изображений. Социальные скраперы принимают только абсолютные URL. Вставьте полный адрес https:// изображения, потому что генератор не добавляет ваш домен.
  • Неправильный размер изображения. 1200 × 630 пикселей: универсально безопасный размер. Меньше 200 × 200 пикселей изображение обычно отклоняется.

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

В элементе <head> вашего HTML, повыше, желательно рядом с <title>. Скраперы читают head и часто останавливаются рано, поэтому размещение тегов OG ближе к началу не даёт им потеряться на очень больших страницах.

Нет. Он пишет только пять основных свойств og:. X возвращается к Open Graph, когда тегов twitter: нет, так что ваш предпросмотр по-прежнему работает. Добавляйте теги twitter: вручную только тогда, когда хотите другой заголовок, описание или изображение в X.

1200 × 630 пикселей, JPG или PNG: универсально безопасный размер. Работает в Facebook, LinkedIn, больших карточках X, Slack, Discord и iMessage. Всё, что меньше 200 × 200 пикселей, рискует быть отклонённым полностью.

Дайте каждой языковой версии собственную страницу с собственными тегами og: и добавьте og:locale (например, en_US) плюс og:locale:alternate для других версий вручную. Этот генератор не пишет теги locale за вас.

Сопутствующие инструменты

Валидатор XML-карты сайта

Проверьте XML-карту сайта в браузере: ошибки разбора, отсутствующие адреса, повторы URL и распространённые значения полей.

Инструмент проверки заголовков безопасности HTTP

Вставьте HTTP-заголовки ответа и локально проверьте HSTS, CSP, clickjacking, MIME, referrer и политики cross-origin.

Инструмент для извлечения внешних ссылок

Вставьте сырой HTML-код, при желании укажите базовый URL и получите чистый список без дубликатов всех внешних ссылок http/https в коде для проверки ссылок и анализа SEO.

Проверка длины мета-описания

Измерьте мета-описание в символах и расчётных пикселях, сравните редакционные ориентиры и макеты для компьютера и телефона.

Канонический генератор тегов

Создайте действительный тег ссылки rel=canonical для любого URL. Включает проверку URL и типичные ошибки, которых следует избегать.

Симулятор выдачи Google

Посмотрите приблизительный сниппет в стиле Google с лимитами символов для телефона и компьютера. Черновик остаётся в текущем сеансе браузера.

Инструмент доступен на других языках