Просмотрщик Open Graph

Введите URL сайта

Предпросмотр карточки Open Graph

Предпросмотр Facebook

EXAMPLE WEBSITE

Пример заголовка страницы

Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях.

https://example.com/page

Предпросмотр Twitter

Пример заголовка страницы

Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях.

example.com

website

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

<!-- Primary Meta Tags -->
<title>Пример заголовка страницы</title>
<meta name="title" content="Пример заголовка страницы" />
<meta name="description" content="Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="Пример заголовка страницы" />
<meta property="og:description" content="Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях." />
<meta property="og:image" content="https://images.unsplash.com/photo-1591696331111-ef9586a5b17a?q=80&w=1200&auto=format" />
<meta property="og:site_name" content="Example Website" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="Пример заголовка страницы" />
<meta property="twitter:description" content="Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях." />
<meta property="twitter:image" content="https://images.unsplash.com/photo-1591696331111-ef9586a5b17a?q=80&w=1200&auto=format" />

Как пользоваться Open Graph Previewer

1
Введите URL страницы
Вставьте полный URL страницы, которую вы хотите проверить, в поле URL сайта.
2
Получите данные OG
Нажмите «Получить данные OG», чтобы извлечь существующие заголовок, описание, изображение и имя сайта Open Graph для страницы.
3
При необходимости отредактируйте вручную
Переключитесь в режим «Редактировать вручную», чтобы изменить заголовок, описание, URL изображения, тип и другие поля и увидеть обновление предпросмотра.

4
Просмотрите и скопируйте теги
Просмотрите предпросмотры карточек Facebook и Twitter, затем скопируйте сгенерированные meta-теги, чтобы добавить их на свою страницу.

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

Что такое теги Open Graph и почему они важны?

Meta-теги Open Graph сообщают соцсетям, какие заголовок, описание и изображение показывать при публикации вашей страницы, поэтому правильно заданные теги дают более насыщенные, кликабельные предпросмотры ссылок в Facebook, X, LinkedIn и других.

Как работает предпросмотр Facebook и Twitter?

Инструмент отрисовывает макеты карточек Facebook и Twitter, используя ваши значения Open Graph, чтобы вы могли увидеть, как заголовок, описание и изображение будут выглядеть, прежде чем опубликовать или поделиться ссылкой.

Можно ли сгенерировать теги без существующей страницы?

Да, используйте «Редактировать вручную», чтобы с нуля заполнить заголовок, описание, URL изображения, имя сайта, URL и тип, затем скопировать готовые meta-теги для вашего HTML.

Почему получение URL может завершиться неудачей или не вернуть данные?

Некоторые сайты блокируют автоматические запросы, требуют входа или вообще не имеют тегов Open Graph; в таких случаях переключитесь в ручной режим и введите значения самостоятельно.

Бесплатен ли инструмент и что происходит с введённым URL?

Инструмент бесплатен и не требует регистрации. Чтобы прочитать теги с действующей страницы, он получает URL через наш серверный прокси (необходимо для обхода межсайтовых ограничений браузера), поэтому запрашивается только публичный адрес страницы; ручное редактирование и предпросмотры выполняются в вашем браузере.

Просмотрщик Open Graph

Пример заголовка страницы

Пример заголовка страницы

Как пользоваться Open Graph Previewer

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

Похожие инструменты