Open Graph Studio

Open Graph и карточка ссылки

Настройте заголовок, описание, изображение и URL страницы, сравните Open Graph и Twitter/X Card и получите готовые meta-теги для сайта.

OGTwitter CardImagePreview

Open Graph Studio

Карточка ссылки, OG-теги и Twitter/X Card.

Метаданные карточки

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

Заголовок43 символовОписание98 символовURL страницыURL изображенияНазвание сайтаLocaleOG TypeTwitter CardAlt изображенияШирина изображенияВысота изображенияtwitter:sitetwitter:creator

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

Open Graph · summary_large_image

helionix.ru

SEO-инструменты для сайта онлайн — Helionix

Создавайте и проверяйте метатеги, robots.txt, sitemap.xml, Schema.org и другие SEO-элементы сайта.

Helionix

Размер1200 × 630

Соотношение1.90 : 1

Title43символов

Description98символов

Проверка карточки

Основные поля и рекомендации.

100/100

✓Заголовок карточки заполнен.

✓Описание карточки заполнено.

✓URL страницы корректен.

✓URL изображения корректен.

✓Соотношение изображения близко к 1.91:1.

✓Alt изображения заполнен.

Готовые meta-теги

Open Graph + Twitter/X.

<meta property="og:title" content="SEO-инструменты для сайта онлайн — Helionix">
<meta property="og:description" content="Создавайте и проверяйте метатеги, robots.txt, sitemap.xml, Schema.org и другие SEO-элементы сайта.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://helionix.ru/tools/seo">
<meta property="og:site_name" content="Helionix">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="https://helionix.ru/og/seo-tools.jpg">
<meta property="og:image:alt" content="SEO-инструменты Helionix">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SEO-инструменты для сайта онлайн — Helionix">
<meta name="twitter:description" content="Создавайте и проверяйте метатеги, robots.txt, sitemap.xml, Schema.org и другие SEO-элементы сайта.">
<meta name="twitter:image" content="https://helionix.ru/og/seo-tools.jpg">
<meta name="twitter:image:alt" content="SEO-инструменты Helionix">
<meta name="twitter:site" content="@helionix">

Быстрые форматы

Типовые настройки изображения и карточки.

История

Последние сохранённые карточки.

История пока пуста.

Фактический вид карточки зависит от конкретной платформы, её кэша и поддержки метатегов. После публикации страницу полезно повторно проверить средствами самой платформы.

Что такое Open Graph

Open Graph описывает страницу для внешних сервисов. Заголовок, описание, URL и изображение могут использоваться при публикации ссылки в социальных сетях, мессенджерах и других приложениях.

og:title и og:description

Эти поля предназначены именно для карточки ссылки и могут отличаться от SEO Title и Meta Description страницы, если для социальной публикации нужен другой текст.

Изображение Open Graph

Широкий формат около 1.91:1 подходит для многих карточек. Studio позволяет указать фактические размеры и проверяет соотношение сторон.

og:url и og:type

URL указывает основную страницу карточки, а type описывает тип объекта: например website, article или product.

Twitter/X Card

Режим summary_large_image подходит для широкого изображения, а summary — для более компактной карточки. Дополнительно можно указать twitter:site и twitter:creator.

Alt изображения

Описание изображения стоит заполнять содержательно и кратко. Оно помогает сделать метаданные более полными и доступными.

Почему карточка может отличаться

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

Ответы на вопросы

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

Что такое Open Graph?

Open Graph — набор meta-тегов, который помогает сайтам и приложениям формировать карточку ссылки с заголовком, описанием и изображением.

Какой размер изображения использовать?

Популярный универсальный вариант — широкое изображение около 1200×630 пикселей. Конкретные платформы могут кадрировать или масштабировать его по-своему.

Нужны ли Twitter/X Card теги отдельно?

Их полезно добавить для более предсказуемой карточки в сервисах, которые поддерживают twitter:card и связанные поля. При отсутствии отдельных значений часть платформ может использовать Open Graph.

Почему карточка не обновляется сразу?

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

Обязательно ли использовать HTTPS для изображения?

Для публичных сайтов HTTPS является предпочтительным вариантом: он уменьшает проблемы с загрузкой ресурсов и смешанным содержимым.

Что писать в og:image:alt?

Короткое понятное описание изображения, передающее его смысл. Оно полезно для доступности и корректного описания медиа.