Open Graph представляет собой разметку, разработанную компанией Facebook для того, чтобы менять внешний вид анонса, состоящего из текстового и графического контента, который формируется в процессе добавления в публику ссылок на сторонние сайты.
При помощи разметки Open Graph можно максимально «под себя» настроить картинку и текст, которые будут отображаться в превью публикации для ссылки. Используя Open Graph, можно прописать вывод корректного заголовка, картинки и описания ссылки.
Применение Open Graph на практике
Используя разметку, разработанную специалистами компании Facebook, можно:
- Показывать пользователям корректный текст описания и изображения для ссылки, которые можно настроить самостоятельно.
- Выводить сниппет в виде отдельного мини-поста, размещенного в социальной сети, а не в виде обычной ссылки, для которой дополнительно приходится подбирать изображения и делать описание.
- Создавать превью для ссылок в максимально красивом виде, что, в свою очередь, позволит улучшить поведенческие факторы и принесет больше переходов на сайт.
Хоть 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 — позволяет прописать высоту для видеоролика (в пикселях).