Как создать разметку Open Graph для социального предпросмотра страницы

Для чего нужна разметка для социального предпросмотра

Open Graph Preview помогает подготовить разметку для предпросмотра страницы при публикации ссылки в социальных сервисах. Вы указываете текстовые значения, а инструмент формирует на их основе метаданные для заголовка, описания, изображения, ссылки, названия сайта, типа и локали. Это удобно, когда нужно заранее проверить состав данных для карточки страницы, не собирая разметку вручную.

Поля изображения и ссылки здесь выступают как передаваемые значения. Инструмент не получает содержимое по этим адресам: он работает с введённым текстом. Поэтому результат стоит рассматривать как подготовленную разметку с указанными значениями, а не как подтверждение того, что изображение доступно или страница открывается.

Как подготовить и проверить разметку

1. Откройте инструмент и подготовьте значения для страницы. Введите заголовок. При необходимости добавьте описание, адрес изображения, адрес страницы и название сайта. Эти поля являются необязательными текстовыми значениями, поэтому можно начать с минимального набора.

2. Если для карточки нужен определённый тип или язык, укажите их в соответствующих полях. Когда тип не задан, используется website, а при отсутствии локали применяется en_US. Не подставляйте адрес изображения или страницы, если хотите проверить вариант без соответствующего элемента: пустое значение не добавляется в результат.

3. Запустите создание разметки после заполнения формы. Для полезного варианта укажите непустой заголовок. Описание можно оставить пустым, если вы проверяете только заголовок, но при наличии заголовка запись для описания всё равно появится.

4. Просмотрите сформированный текст. Сопоставьте заголовок и описание с введёнными значениями, проверьте наличие или отсутствие условных элементов и обратите внимание на тип и локаль. Специальные символы в переданных значениях должны быть экранированы перед включением в HTML-разметку.

5. Сохраните полученный фрагмент в рабочем процессе страницы только после собственной проверки контекста. Не добавляйте рядом пароль или другой секрет, если они случайно попали в текстовые поля. Для разных вариантов карточки меняйте одно значение за раз, чтобы было понятнее, какой элемент изменился.

Как читать результат и понимать его границы

Успешный результат с непустым заголовком должен содержать метаданные заголовка и описания. Это относится и к случаю, когда описание оставлено пустым. При заполнении изображения, адреса страницы или названия сайта соответствующие элементы появляются в разметке; при пустых значениях они не добавляются. Тип и локаль присутствуют для варианта с заголовком, даже если вы не вводили их вручную: тогда используются website и en_US.

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

Экранирование значений означает, что специальные символы из введённого текста не должны попадать в HTML в исходном виде, если для них требуется безопасное представление внутри разметки. Это полезно учитывать при проверке длинных заголовков, кавычек и знаков, используемых в тексте страницы. Инструмент формирует фрагмент из переданных значений, но не подтверждает внешний вид карточки на конкретной платформе. Итоговое отображение может зависеть от правил сервиса, где будет опубликована ссылка.

Практический пример

Редактор готовит карточку страницы каталога с заголовком, описанием, изображением и ссылкой и хочет проверить, какие элементы попадут в результат.

В поле заголовка укажите «Летняя коллекция», в поле описания введите «Новые модели для отдыха», а в поля изображения и страницы добавьте текстовые адреса. Запустите создание и проверьте состав сформированной разметки.

При непустом заголовке результат сообщает об успешном выполнении и содержит метаданные заголовка и описания. Для заполненных адреса изображения и адреса страницы появляются соответствующие элементы; тип и локаль также присутствуют.

Ограничения

• Инструмент формирует разметку из переданных текстовых значений, но этот результат не подтверждает, как конкретная платформа покажет ссылку или её предпросмотр.

Частые ошибки

• Если после запуска нет записей, причиной может быть пустое поле заголовка. Введите непустой заголовок и повторите проверку: пустой заголовок допускает успешное завершение без метаданных.

Частые вопросы

Что произойдёт, если оставить описание пустым?

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

Добавляются ли изображение, ссылка и название сайта автоматически?

Да, но только для заполненных значений. Изображение, адрес страницы и название сайта добавляются условно, когда соответствующее поле непустое.

Какие значения используются для типа и локали по умолчанию?

Если заголовок задан, тип и локаль попадут в результат. При пустых полях применяются значения website и en_US.