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

Быстрые ссылки
Что такое Open Graph метатеги?
Использование OG метатегов
Отладка метатегов
Можно ли генерировать теги динамически?
Вы, вероятно, часто видели такие развёрнутые предпросмотры ссылок, не задумываясь об этом — когда вы отправляете ссылку в соцсеть или в мессенджер, она расширяется и отображает изображение, заголовок и описание. Ниже — подробная инструкция по настройке.
Что такое Open Graph метатеги?
Конфигурация предпросмотров задаётся HTML-метатегами в секции
страницы. Существует стандарт, известный как Open Graph Protocol, изначально разработанный Facebook. Формат метатегов простой: используется атрибут property со значением, начинающимся с “og:”, и атрибут content с нужным значением.Простой набор для большинства сайтов выглядит так:
Эти теги устанавливают изображение, заголовок, ссылку, описание и указывают, что ресурс — это веб-сайт. В результате формируется простой предпросмотр, как на картинке ниже.

Стандарт содержит множество опций — полный список можно найти на официальном сайте Open Graph, но ниже мы разберём важные теги и практики. Учтите, что Twitter поддерживает OG теги, но имеет собственные теги (twitter:*) с приоритетом для некоторого поведения.
Похожие материалы
Исправить ошибку Steam «Нет подключения» в Windows
Ошибка 0x8007371c — как исправить обновления Windows
Отмена Diskpart clean и восстановление раздела
Скрыть Audible‑аудиокниги на Kindle
Исправление VIDEO_TDR_FAILURE в Windows 11