Просмотрщик Open Graph
EXAMPLE WEBSITE
Пример заголовка страницы
Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях.
https://example.com/page
Пример заголовка страницы
Это пример описания содержимого страницы, которое будет отображаться при публикации в социальных сетях.
example.com
websiteКак пользоваться Open Graph Previewer
- 1
Введите URL страницы
Вставьте полный URL страницы, которую вы хотите проверить, в поле URL сайта.
- 2
Получите данные OG
Нажмите «Получить данные OG», чтобы извлечь существующие заголовок, описание, изображение и имя сайта Open Graph для страницы.
- 3
При необходимости отредактируйте вручную
Переключитесь в режим «Редактировать вручную», чтобы изменить заголовок, описание, URL изображения, тип и другие поля и увидеть обновление предпросмотра.
- 4
Просмотрите и скопируйте теги
Просмотрите предпросмотры карточек Facebook и Twitter, затем скопируйте сгенерированные meta-теги, чтобы добавить их на свою страницу.
Исчерпывающее руководство по Open Graph и предпросмотрам ссылок
Что такое протокол Open Graph
Протокол Open Graph — это небольшой набор мета-тегов, изначально представленный Facebook, который позволяет любой веб-странице описать себя как насыщенный объект при публикации. Вместо голой синей ссылки страница с тегами Open Graph превращается в карточку с заголовком, кратким описанием и крупным изображением. Теги размещаются в head страницы и используют атрибут property с префиксом og, например og:title и og:image, в паре с атрибутом content, содержащим значение. Поскольку стандарт получил широкое распространение, одни и те же теги og теперь формируют предпросмотры далеко не только в Facebook.
Open Graph целиком посвящён внешнему виду в социальных сетях и мессенджерах. Он не влияет напрямую на ранжирование в поиске, но сильно влияет на кликабельность и распространение, потому что привлекательную карточку нажимают и пересылают дальше, а простую или сломанную пролистывают мимо.
Основные теги Open Graph
Основную работу выполняют пять свойств. og:title — это заголовок карточки, который может отличаться от вашего HTML-тега title, позволяя сформулировать фразу, оптимизированную под публикацию. og:description — это вспомогательная строка под ним. og:image — это миниатюра, и она с большим отрывом несёт наибольший визуальный вес. og:url — это канонический URL, на который должна указывать карточка, благодаря чему все публикации сводятся к одному адресу, даже когда один и тот же контент доступен по нескольким URL. og:type описывает объект — обычно website для обычной страницы или article для записи в блоге либо новостной статьи.
Дополнительные свойства уточняют результат: og:site_name обозначает источник, og:locale указывает язык, а для изображений og:image:width и og:image:height помогают платформам сверстать карточку ещё до того, как изображение полностью загрузится. Заполнение этих свойств даёт более надёжный и быстрее отрисовываемый предпросмотр.
Twitter Cards и как X читает ваши теги
X использует собственные теги twitter card, но относится к этому снисходительно: если специфичных для Twitter тегов нет, он возвращается к вашим тегам Open Graph. Ключевой тег — twitter:card, где summary_large_image даёт макет с крупным изображением, который нужен большинству брендов, а summary даёт уменьшенную миниатюру рядом с текстом. Вы также можете задать twitter:title, twitter:description, twitter:image и twitter:site, чтобы переопределить значения Open Graph специально для X, когда хотите использовать там другой текст.
На практике хорошая стратегия — задать полный набор тегов Open Graph для широкого охвата и добавить только twitter:card, чтобы выбрать макет с крупным изображением, позволяя X унаследовать остальное из Open Graph. Это избавляет от поддержки двух почти одинаковых наборов тегов, но при этом даёт более насыщенную карточку в X.
Требования к изображению, от которых зависит успех карточки
Именно на og:image большинство предпросмотров удаётся или проваливается. Широко рекомендуемый размер — 1200 на 630 пикселей, соотношение примерно 1.91 к 1, которое аккуратно заполняет карточку с крупным изображением в Facebook, LinkedIn и X без обрезки. Используйте абсолютный, публично доступный URL, начинающийся с https; относительные пути вроде /images/card.png — причина номер один, по которой миниатюра попросту не появляется, ведь у сборщика данных нет базового URL, относительно которого их можно было бы разрешить. Держите размер файла в пределах нескольких сотен килобайт и не размещайте важный текст у краёв, поскольку разные платформы обрезают изображение чуть по-разному.
Каждая платформа также устанавливает собственные минимумы и максимумы. Слишком маленькие изображения превращаются в крошечную миниатюру или вовсе не показываются, а чрезмерно большие файлы могут быть пропущены. Один файл JPEG или PNG размером 1200 на 630, отдаваемый по HTTPS, — самый безопасный выбор для единообразной отрисовки везде.
Как Facebook, LinkedIn, Discord и Slack отрисовывают предпросмотры
Когда ссылку вставляют в любую из этих платформ, платформа отправляет собственного бота-сборщика, чтобы загрузить страницу и прочитать её head, прежде чем отрисовать карточку. Facebook использует facebookexternalhit, у Slack и Discord есть свои боты, и каждый разбирает теги og, чтобы построить предпросмотр. Это значит, что предпросмотр отражает то, что сборщик видит на стороне сервера, а это может отличаться от того, что видит вошедший в систему пользователь, особенно на страницах, требующих входа или формирующих свои мета-теги с помощью JavaScript уже после загрузки.
Поскольку отрисовка происходит на стороне бота, важны две вещи. Во-первых, ваши теги og должны присутствовать в исходном HTML, который возвращает сервер, а не добавляться позже клиентскими скриптами, которые сборщик может и не выполнить. Во-вторых, страница должна быть доступна боту без аутентификации, иначе сборщик получит страницу входа вместо вашего контента, и предпросмотр вернётся пустым.
Кэширование, отладчики и принудительное повторное считывание
Социальные платформы агрессивно кэшируют считанный ими предпросмотр, иногда на несколько дней. Именно отсюда берётся классическая жалоба на то, что обновлённые теги Open Graph не отображаются: платформа всё ещё отдаёт кэшированную версию, существовавшую до вашего изменения. Решение — воспользоваться собственным отладочным инструментом платформы, чтобы принудительно выполнить свежее считывание. Facebook Sharing Debugger, LinkedIn Post Inspector и X card validator заново загружают страницу и показывают вам, какие именно теги они разобрали, что заодно служит способом выяснить, почему карточка выглядит неправильно.
Сделайте повторное считывание частью своего процесса публикации всякий раз, когда меняете заголовок, описание или изображение на уже опубликованном URL. Без этого ранние публикации могут закрепить устаревшую или сломанную карточку, которая остаётся надолго после того, как сама страница уже исправна. Этот просмотрщик позволяет проверить теги до публикации, чтобы позже потребовалось меньше исправлений.
Самые распространённые ошибки в Open Graph
Повторяющиеся сбои предсказуемы: отсутствующий og:image, из-за которого у карточки нет миниатюры; относительный URL изображения, который сборщик не может разрешить; og:image, отдаваемый по HTTP на странице, которая в остальном работает по HTTPS (что некоторые платформы отвергают); и теги, добавляемые через JavaScript, который сборщик так и не запускает. Ещё одна частая ошибка — оставить og:url указывающим на неканонический или тестовый URL, что дробит счётчики публикаций и может отправить пользователей не туда.
Более тонкая ошибка — забыть, что Open Graph и ваш поисковый сниппет — это разные вещи. og:title и og:description управляют карточкой в соцсетях, тогда как HTML-тег title и meta description управляют результатом в Google, и они не обязаны быть одинаковыми. Оптимизируйте каждый под свой контекст: цепко и с расчётом на любопытство для карточки в соцсетях, ясно и с учётом ключевых слов для поискового сниппета.
Часто задаваемые вопросы
Что такое теги Open Graph и почему они важны?
Как работает предпросмотр Facebook и Twitter?
Можно ли сгенерировать теги без существующей страницы?
Почему получение URL может завершиться неудачей или не вернуть данные?
Бесплатен ли инструмент и что происходит с введённым URL?
Похожие инструменты
Продолжайте работу с этими удобными инструментами