Генератор Тегов Open Graph — Бесплатно онлайн

Генерируйте мета-теги Open Graph для качественного предпросмотра в соцсетях - Facebook, LinkedIn и других.

Результаты предоставляются исключительно в информационных целях и могут содержать ошибки. Проверяйте важную информацию самостоятельно. Использование этого инструмента осуществляется на ваш страх и риск.

Что делает этот инструмент

Генератор тегов Open Graph пишет мета-теги og:, которые определяют, как выглядит ссылка, когда ею делятся в Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram и многих других приложениях. Введите заголовок, описание, канонический URL и URL изображения, выберите тип (website, article, product или profile) и скопируйте теги в <head> страницы.

Выводятся только заполненные поля, а спецсимволы экранируются. Без тегов Open Graph приложения угадывают заголовок и берут со страницы случайную картинку — или вовсе не показывают превью. Самый важный тег — og:image: с чётким изображением 1200 × 630 пикселей по ссылке кликают гораздо охотнее.

Когда использовать

  • Нужно подготовить запись в блоге, страницу товара или лендинг к публикации в соцсетях.
  • Нужно исправить превью ссылки, в котором не та картинка или старый заголовок.
  • Нужно добавить превью для одностраничного приложения, которое рендерит контент на JavaScript.
  • Нужно настроить карточки ссылок для сайта документации, которым делятся в Slack или Discord.

Пример

Ввод

Заголовок: Free JSON Formatter
Описание: Format and validate JSON in your browser.
URL: https://4dev.net/json-formatter
URL изображения: https://4dev.net/og/json-formatter.png
Тип: website

Вывод

<meta property="og:title" content="Free JSON Formatter"/>
<meta property="og:description" content="Format and validate JSON in your browser."/>
<meta property="og:url" content="https://4dev.net/json-formatter"/>
<meta property="og:image" content="https://4dev.net/og/json-formatter.png"/>
<meta property="og:type" content="website"/>

Вопросы об этом инструменте

Я обновил теги, но по-прежнему показывается старое превью. Почему?

Платформы кешируют превью. Чтобы платформа загрузила страницу заново, воспользуйтесь Facebook Sharing Debugger или LinkedIn Post Inspector. Slack и WhatsApp со временем обновляют превью сами.

Нужны ли ещё теги Twitter Card?

X (Twitter) использует теги Open Graph как запасной вариант, но чтобы получить макет с крупным изображением, добавьте <meta name="twitter:card" content="summary_large_image"/>.

URL изображения обязательно должен быть абсолютным?

Да. Указывайте полный адрес с https://. Большинство краулеров не разрешают относительные пути, а изображение должно быть публично доступно без входа в аккаунт.

Помогают ли теги Open Graph в SEO?

Напрямую — нет: поисковики ранжируют по заголовку, описанию и содержимому. Зато они повышают кликабельность при репостах в соцсетях, а это приводит посетителей. Поисковые теги задайте в генераторе мета-тегов.

Этот инструмент бесплатный?

Да, он бесплатный. Без регистрации и электронной почты. Результат на этой странице.

Как получить результат?

Используйте инструмент на этой странице. Результат появится здесь, без отправки по электронной почте.