ВойтиРегистрация

Разметка Open Graph для превью ссылок

пошаговая инструкция · Быстро: 5–15 минут

← Все инструкции

1. Что произошло

Разметка Open Graph задаёт картинку и текст, когда ссылку отправляют в мессенджеры и соцсети.

2. Почему это важно

Ссылка выглядит голой и вызывает меньше кликов. После исправления: Привлекательные карточки ссылок в соцсетях.

3. На каких страницах обнаружено

Теги og:title, og:description, og:image и og:url в head главной страницы.

Чтобы увидеть адреса на вашем сайте, откройте инструкцию из отчёта или добавьте домен в адрес: /fix/og/ваш-сайт.ru.

4. Как исправить

Для WordPress

  1. Yoast SEO и Rank Math добавляют разметку автоматически: «Соцсети» в настройках и в каждой записи. Картинку по умолчанию задайте в «Соцсети → Facebook».

Общее для любого сайта

  1. Добавьте теги Open Graph в head: заголовок, описание, картинка и адрес. Они определяют вид ссылки в Telegram, ВКонтакте, WhatsApp, Facebook.
  2. Картинка — 1200×630 пикселей, до 1 МБ, адрес абсолютный (https://…).
  3. После правки обновите кэш превью: ВКонтакте — «Отладчик ссылок» на vk.com/dev, Telegram — бот @WebpageBot, Facebook — Sharing Debugger.

5. Готовый код

Замените example.com на свой домен. Перед правкой конфигурации сделайте резервную копию файла.

Любой сайт

Теги в head
<meta property="og:type" content="website">
<meta property="og:title" content="Ремонт ноутбуков в Москве">
<meta property="og:description" content="Ремонт за 1 день с гарантией.">
<meta property="og:image" content="https://example.com/img/og.jpg">
<meta property="og:url" content="https://example.com/">
<meta name="twitter:card" content="summary_large_image">

6. Как проверить результат

  1. Видны как минимум og:title, og:description, og:image.
  2. Вставьте адрес в отладчик ссылок и проверьте внешний вид карточки.
  3. Нажмите «Перепроверить сайт».
Теги
curl -s https://example.com/ | grep -io '<meta[^>]*og:[a-z]*[^>]*>'

Чтобы перепроверить сайт, откройте отчёт и нажмите «Проверить заново».