Теги Open Graph объяснены: как строятся превью ссылок в социальных сетях

Всякий раз, когда вы делитесь веб-ссылкой в публикации на Facebook, вставляете статью в группу в Telegram или отправляете страницу продукта другу в личном сообщении на Twitter, вы ожидаете увидеть аккуратную визуальную превью-карту. Эта карта — с чётким баннерным изображением, привлекательным заголовком и кратким описанием — не появляется случайно. Она создаётся с помощью стандартизированной веб-спецификации под названием протокол Open Graph. Но если в коде вашего сайта отсутствуют эти метатеги, социальные платформы будут отображать некрасивую сломанную серую коробку или выбирать случайный миниатюрный изображение с вашей страницы. Изучение механики меток Open Graph важно для веб-разработчиков и технических маркетологов.

Изначально представленный Facebook в 2010 году, протокол Open Graph был разработан для интеграции внешних веб-страниц в социальные графовые сети. До появления Open Graph социальные сети должны были угадывать содержание статьи, сканируя текст параграфов и HTML-теги изображений, что часто приводило к неудачным визуальным превью. Сегодня Open Graph стал универсальным интернет-стандартом, поддерживаемым LinkedIn, Pinterest, Twitter, Telegram, Discord, Slack и WhatsApp. В этом подробном техническом обзоре вы узнаете точный синтаксис основных тегов OG, поймете требования к размерам изображений и откроете для себя способы отладки и оптимизации превью-карт для максимального социального взаимодействия.

Овладев метаданными Open Graph, вы обеспечиваете, что каждая ссылка, расшаренная с вашего домена, выглядит привлекательно, профессионально и оптимально для социального обмена.

Помимо общедоступных лент в социальных сетях, теги Open Graph также управляют тем, как ссылки отображаются внутри приватного программного обеспечения для совместной работы и инструментов командного общения, таких как Slack, Microsoft Teams и Discord. Когда член команды вставляет ваш URL в канал компании в Slack или сервер разработчиков в Discord, внутренний бот приложения в реальном времени анализирует ваши метаданные Open Graph, отображая ваш заголовок, миниатюру и краткое описание прямо в потоке чата. Высококачественные метаданные гарантируют, что внутренние заинтересованные лица и члены сообщества будут сразу же взаимодействовать с вашей ссылкой.

Что такое протокол Open Graph?

Протокол Open Graph — это набор структурированных мета-тегов, которые веб-разработчики помещают внутрь секции <head> HTML-документа. Когда автоматический краулер (например, facebookexternalhit или TelegramBot) посещает вашу страницу, он анализирует эти теги для создания интерактивного объекта предварительного просмотра с расширенными возможностями.

Без тегов Open Graph общий доступ к ссылке представляет собой просто обычный текст. С тегами Open Graph ваша ссылка превращается в интерактивную визуальную карточку с высокой видимостью, которая значительно увеличивает количество переходов по ней в социальных сетях.

Основные теги Open Graph, которые необходимо включить

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

Всегда убедитесь, что og:url совпадает с тегом канонической ссылки, чтобы предотвратить фрагментацию количества взаимодействий в социальных сетях и сигналов обратных ссылок между различными вариантами URL.

Оптимизация изображений Open Graph для современных дисплеев

Изображение является самым важным элементом любой карточки предварительного просмотра. Чтобы ваши графические элементы отображались с безупречной четкостью на современных смартфонах с высоким разрешением, следуйте этим техническим характеристикам:

• Стандартное разрешение (1.91:1): Используйте 1200x630 пикселей. Это универсальный стандарт для карточек с краткой информацией на Facebook, LinkedIn и Twitter.
• Альтернатива широкому экрану (16:9): 1200x675 пикселей широко используется для видеоконтента, публикаций на YouTube и современных адаптивных блогов.
• Явно указывайте размеры: Всегда включайте <meta property="og:image:width" content="1200" /> и <meta property="og:image:height" content="630" />. Это позволяет социальным сканерам сразу отображать макет карточки при первом сканировании, не загружая и не вычисляя размеры изображения асинхронно.
• Ограничения по размеру файла: Сохраняйте размер файлов меньше 5 МБ. Большинство социальных сканеров прекратят загрузку изображений, превышающих 5 МБ, чтобы сохранить пропускную способность сети.
• Критический текст центра: Социальные платформы обрезают предварительный просмотр графики по-разному на мобильных лентах и боковых панелях на компьютере. Сохраняйте все критические логотипы, заголовки текста и лица в центре, в пределах средней «зоны безопасности» изображения.

Карты Twitter против Open Graph: как они взаимодействуют

Twitter (X) поддерживает собственную проприетарную разметку метаданных, называемую Twitter Cards, но также нативно поддерживает резервный вариант Open Graph.

Чтобы ваши ссылки отображались на Twitter в виде больших, привлекательных визуальных карточек, а не маленьких квадратных миниатюр, включите эти специальные теги Twitter вместе с вашими тегами Open Graph:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Catchy Headline" />
<meta name="twitter:description" content="Engaging summary snippet." />
<meta name="twitter:image" content="https://yourbrand.com/images/og-image.jpg" />

Установка twitter:card в summary_large_image обязательна, если вы хотите полноширинные визуальные превью. Если этот параметр не указан, Twitter по умолчанию использует компактное текстовое превью, которое привлекает гораздо меньше переходов.

Продвинутые издатели также должны внедрять дополнительные свойства Open Graph, такие как og:locale и article:published_time. Объявление og:locale информирует краулеры о основном языке и региональном формате контента, в то время как временные метки публикации помогают системам обнаружения контента, таким как Google Discover, распознавать свежие редакционные материалы.

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

Вы также можете изучить, как теги Open Graph взаимодействуют с брендированными поддоменами, в нашем руководстве по брендированным поддоменам.

Тестирование, проверка и устранение неполадок с предварительными тегами

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

• Отладчик обмена Meta: Вставьте ваш URL, чтобы предварительно просмотреть карточки Facebook, проверить предупреждения о тегах и принудительно обновить кэш краулера, как обсуждается в нашем руководстве по исправлению неверных изображений превью.
• Telegram @WebpageBot: Отправьте вашу ссылку этому проверенному боту в Telegram, чтобы проверить отображение мобильного превью и очистить устаревшую кешированную графику.
• Инспектор постов LinkedIn: Очищает семидневный кэш предварительного просмотра ссылок LinkedIn и сообщает об отсутствующих полях метаданных.
• Автоматическая проверка ссылок: Проверяйте цепочки редиректов, SSL-сертификаты и коды состояния с помощью нашего бесплатного инструмента проверки ссылок.

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

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