Open Graph (OG) метатеги — руководство

Быстрые ссылки

• Что такое Open Graph метатеги?

• Использование OG метатегов

• Отладка метатегов

• Можно ли генерировать теги динамически?

Вы, вероятно, часто видели такие развёрнутые предпросмотры ссылок, не задумываясь об этом — когда вы отправляете ссылку в соцсеть или в мессенджер, она расширяется и отображает изображение, заголовок и описание. Ниже — подробная инструкция по настройке.

Что такое Open Graph метатеги?

Конфигурация предпросмотров задаётся HTML-метатегами в секции страницы. Существует стандарт, известный как Open Graph Protocol, изначально разработанный Facebook. Формат метатегов простой: используется атрибут property со значением, начинающимся с “og:”, и атрибут content с нужным значением.

Простой набор для большинства сайтов выглядит так:

Эти теги устанавливают изображение, заголовок, ссылку, описание и указывают, что ресурс — это веб-сайт. В результате формируется простой предпросмотр, как на картинке ниже.

Стандарт содержит множество опций — полный список можно найти на официальном сайте Open Graph, но ниже мы разберём важные теги и практики. Учтите, что Twitter поддерживает OG теги, но имеет собственные теги (twitter:*) с приоритетом для некоторого поведения.