Веб-разработка: как добавить метаданные open graph и проверить предпросмотр ссылки

Open Graph метаданные задают заголовок, описание, изображение и URL, которые отображаются в карточке ссылки при публикации. Чтобы настроить их, добавьте теги в раздел <head> страницы, проверьте доступность изображения и сверьте результат в исходном коде и отладчике предпросмотра. Если карточка показывает прежние данные, обновите кэш средствами платформы.

Что проверить перед публикацией Open Graph

• На каждой странице указаны собственные og:title, og:description и og:url.
• Значение og:image - полный URL изображения, доступный без авторизации.
• Теги находятся в исходном HTML внутри <head>, а не только появляются после загрузки JavaScript.
• Проверена карточка ссылки в отладчике нужной платформы.
• Если содержимое недавно менялось, предприняты меры для обновления кэша предпросмотра.

Какие метатеги формируют карточку ссылки

Основные Open Graph метатеги описывают страницу для карточки ссылки: og:title задаёт заголовок, og:description - краткое описание, og:image - изображение, а og:url - канонический адрес страницы. Часто также указывают og:type, например website или article.

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

Как добавить Open Graph-разметку в HTML

Для ручной настройки понадобятся доступ к шаблону страницы или HTML-редактору и возможность проверить опубликованный исходный код. В CMS метаданные часто добавляют через SEO-плагин или настройки шаблона; не вносите одни и те же теги одновременно в нескольких местах.

Добавьте в <head> набор тегов, заменив примерные значения своими:

<meta property="og:title" content="Название страницы">
<meta property="og:description" content="Краткое описание страницы">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:image" content="https://example.com/images/preview.jpg">

Если используете генератор Open Graph метатегов, проверьте полученный HTML и убедитесь, что значения подходят именно этой странице. Генератор помогает составить разметку, но не проверяет автоматически правильность URL, доступность изображения или результат предпросмотра.

Как выбрать изображение и указать его URL

1. Подберите изображение для конкретной страницы. Используйте понятную иллюстрацию, которая хорошо воспринимается в уменьшенном виде. Учитывайте, что сервис может обрезать изображение или показывать его в другом соотношении сторон.
2. Разместите файл на доступном адресе. Укажите полный URL с протоколом, например https://example.com/images/preview.jpg. Проверьте, что файл открывается напрямую в браузере и сервер не требует авторизации.
3. Добавьте URL в тег. Впишите адрес файла в значение content у og:image. Не используйте относительный путь вроде /images/preview.jpg: полная ссылка однозначнее для внешнего сервиса.
4. Проверьте тип и ответ сервера. Убедитесь, что URL ведёт именно к изображению, а не к HTML-странице с ошибкой, редиректом на вход или заглушкой.
5. Проверьте карточку в отладчике. После публикации выполните проверку предпросмотра ссылки и убедитесь, что сервис загрузил нужное изображение. Если файл заменили по тому же адресу, платформа может использовать сохранённую копию.

Быстрый режим настройки

1. Добавьте основные теги в <head>.
2. Укажите абсолютный URL страницы и изображения.
3. Откройте исходный код опубликованной страницы и сверьте значения.
4. Проверьте карточку в отладчике платформы и обновите кэш, если нужно.

Как проверить метаданные в исходном коде страницы

Чтобы проверить Open Graph сайта, откройте опубликованную страницу, просмотрите её исходный HTML и найдите теги с атрибутом property, начинающимся с og:. Сверьте их с этим чек-листом:

• Теги расположены в разделе <head>.
• У каждого тега есть атрибут content с непустым значением.
• og:title соответствует заголовку конкретной страницы.
• og:description описывает её содержимое, а не другую страницу.
• og:url указывает на правильный канонический адрес.
• og:image содержит полный URL без опечаток.
• На странице нет нескольких конфликтующих наборов Open Graph тегов.
• В HTML нет неэкранированных кавычек или разметки, из-за которых значение атрибута обрывается.

Просмотр исходного кода полезен тем, что показывает HTML, отправленный сервером. Если теги добавляются только скриптом в браузере, внешний сервис может не получить их при загрузке страницы.

Как увидеть предпросмотр в отладчиках соцсетей

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

• Изображение не загружается или URL ведёт на страницу с ошибкой.
• Страница закрыта авторизацией, ограничена правилами сервера или недоступна роботу платформы.
• Отладчик показывает другой адрес из-за редиректа или несовпадения с og:url.
• В карточке отображается заголовок или описание от другой страницы.
• В исходном коде обнаружены дублирующиеся теги с разными значениями.
• Теги присутствуют только после выполнения JavaScript.
• Отладчик показывает ранее сохранённую карточку, хотя HTML уже обновлён.

Если сервис показывает ошибку, сначала проверьте доступность страницы и изображения снаружи сайта, затем повторно сверьте исходный HTML. Так проще отделить проблему разметки от ограничений доступа или кэширования.

Что делать, если карточка показывает старые данные

1. Запросите обновление через отладчик платформы. У некоторых сервисов есть повторный анализ ссылки или обновление кэша. Используйте эту возможность после проверки разметки.
2. Убедитесь, что обновили нужную страницу. Сравните адрес в браузере с og:url, включая протокол, домен и путь. Разные варианты URL могут восприниматься платформой как отдельные страницы.
3. Проверьте кэш сайта и CDN. Если сервер или сеть доставки контента отдают старый HTML либо файл, очистите соответствующий кэш безопасным способом и повторите проверку.
4. При необходимости смените URL изображения. Если платформа продолжает показывать сохранённую копию файла, публикация новой версии по новому адресу может помочь. Сначала убедитесь, что новый файл доступен, и обновите значение og:image.

Сведения об авторе

Алексей Воронов

Нюансы настройки Open Graph на практике

Нужно ли добавлять теги на каждую страницу?

Да, если для разных страниц нужны разные заголовки, описания или изображения. Общие значения в шаблоне могут привести к одинаковым карточкам для всего сайта.

Можно ли использовать относительный адрес для og:image?

Лучше указать полный URL с протоколом и доменом. Так внешнему сервису не нужно угадывать, относительно какого адреса строить путь.

Где размещать Open Graph метатеги?

Добавляйте их в раздел <head> HTML-документа. Проверьте опубликованный исходный код, а не только настройки редактора или визуальную панель CMS.

Почему отладчик не показывает новые значения?

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

Нужно ли удалять старые теги перед добавлением новых?

Да, удалите или исправьте дублирующиеся Open Graph метатеги, чтобы в исходном коде не осталось конфликтующих значений. Проверьте, не добавляет ли второй набор SEO-плагин или шаблон.

Open Graph влияет на заголовок страницы в поиске?

Эти метатеги предназначены прежде всего для оформления карточек ссылок. Для поисковой выдачи используйте соответствующие метаданные и разметку отдельно.

Можно ли подготовить разметку генератором?

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