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

При помощи разметки Open Graph можно максимально «под себя» настроить картинку и текст, которые будут отображаться в превью публикации для ссылки. Используя Open Graph, можно прописать вывод корректного заголовка, картинки и описания ссылки.

Применение Open Graph на практике

Используя разметку, разработанную специалистами компании Facebook, можно:

1. Показывать пользователям корректный текст описания и изображения для ссылки, которые можно настроить самостоятельно.
2. Выводить сниппет в виде отдельного мини-поста, размещенного в социальной сети, а не в виде обычной ссылки, для которой дополнительно приходится подбирать изображения и делать описание.
3. Создавать превью для ссылок в максимально красивом виде, что, в свою очередь, позволит улучшить поведенческие факторы и принесет больше переходов на сайт.

Хоть Open Graph и была создана для Facebook, сейчас эту разметку можно применять почти для всех популярных социальных сетей и мессенджеров: Вконтакте, Твиттер, Пинтерест, Одноклассники, Скайп, Телеграм и т. д.

Мета-теги, используемые в Open Graph

Для настройки Open Graph пользователю предоставляются специальные мета-теги. Условно их можно разделить на основные и второстепенные. Рассмотрим оба типа детальнее.

Главные мета-теги Open Graph:

• og:image — необходим для указания пути к изображению, которое будет отображено в превью к ссылке (можно использовать любые современные форматы);
• og:title — помогает настроить заголовок, который будет отображаться в превью (можно использовать как заголовок со страницы, так и прописать свой);
• og:description — позволяет создать короткое содержание (текст анонса), которое может составлять не более 295 символов (для сравнения — description для сайтов в поисковых системах может иметь в длину примерно до 170 символов);
• og:url — здесь прописывается ссылка на страницу, для которой генерируется превью (УРЛ);
• og:site_name — можно указать название сайта, на который ведет ссылка (или использовать вариант по умолчанию);
• og:type — используется для указания типа содержимого страницы, на которую ведет ссылка (текстовый контент — article, видео — movie и т. д.).

Среди второстепенных, вспомогательных Open Graph мета-тегов можно добавить к превью какой-либо дополнительный контент и настроить его «под себя»:

• og:video — ссылка на видеоконтент, прикрепленный к превью;
• og:audio — ссылка на аудиофайл, который будет добавлен к анонсу;
• og:locale — язык страницы сайта, на которую ведет ссылка.

Большинство мета-тегов Open Graph имеют свои параметры. Например, для аудио и видео можно использовать следующие значения-команды:

• :secure_url — указывает ссылку на страницу, защищенную протоколом передачи данных HTTPS;
• :width — позволяет задать ширину картинки-превью для видео (в пикселях);
• :height — позволяет прописать высоту для видеоролика (в пикселях).