Open Graph Предварительный просмотр

Инструмент Open Graph Preview показывает вам, как будет выглядеть общая ссылка перед публикацией. вы вводите свои поля og:title, og:description, og:image, og:url и Twitter Card - или вставляете блок метатегов, которые у вас уже есть - и инструмент отображает приблизительные социальные карты для Facebook, X/Twitter, LinkedIn, Slack и Discord рядом. Вместо того, чтобы продвигать страницу в прямом эфире, делиться ею и обнаруживать, что заголовок разрезан пополам или изображение никогда не загружается, вы видите проблему, пока вы все еще можете ее исправить.

Протокол Open Graph - это общий словарь, который почти каждая платформа использует для создания этих карт. Скребок посещает вашу страницу, читает метатеги og: в <head> и собирает из них предварительный просмотр. загвоздка в том, что каждая платформа отображает те же самые теги по-разному: X усекает описания примерно на 110 символов, в то время как Facebook показывает ближе к 155, LinkedIn полностью скрывает описание на некоторых поверхностях, а Slack сворачивает все в компактное вложение. Поле, которое хорошо выглядит на одной карте, может быть искалечено в другой, поэтому предварительный просмотр всех из них одновременно является единственной надежной проверкой.

Вот открытый предварительный просмотр графа с действительными числами.Set og:title to "How We Cut Our Page Load Time in Half Without a Rewrite" (55 символов, пропуск) и дать ему 125-символьную og:description.Validation проходит заголовок и предупреждает на описании: хорошо для Facebook и LinkedIn, но X усекает примерно 110.The X big-image card вырезает текст после "от 4.1 секунды...", в то время как карта Facebook показывает все предложение. предварительный просмотр изображения открытого графика загружает ваше og:image в каждую карту, поэтому сломанная ссылка показывает "Image failed to load" до того, как кто-либо поделится ею.

Этот инструмент работает на стороне клиента и никогда не получает и не царапает вашу страницу Он работает с тегов, которые вы даете ему, либо введен в форму или вставлен как необработанный HTML и проанализирован локально Это означает, что вы можете проверить метаданные для страниц, которые находятся за логином, на промежуточном домене, или не развернуты вообще. один запрос, который он делает на ваш сервер, это загрузка og:image URL, так что ваш браузер может показать изображение в картах.