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

Что подготовить для Open Graph-разметки

Генератор собирает Open Graph-разметку из метаданных страницы и выдаёт экранированный HTML-фрагмент. Такой результат удобно подготовить перед добавлением метаданных на страницу или передать специалисту, который отвечает за её содержимое. Для начала достаточно определить заголовок и описание, а затем решить, нужны ли дополнительные значения.

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

Тип и язык относятся к дополнительным текстовым параметрам. Если для них не передать собственные значения, используются website и en_US соответственно. Значения в готовой HTML-разметке экранируются, поэтому специальные символы могут выглядеть иначе, чем в исходном поле. Перед созданием заранее подготовьте данные, которые хотите увидеть в результате.

Как заполнить поля и получить результат

Откройте генератор и найдите поля для текстовых метаданных страницы. Введите непустой заголовок, потому что без него разметка не создаётся. Затем укажите описание, которое должно попасть в основной набор результата.
Если странице нужно изображение, передайте значение адреса изображения в соответствующее поле. Для адреса самой страницы и названия сайта используйте отдельные поля. Каждый такой элемент добавляется только при передаче его собственного значения, поэтому не рассчитывайте на появление пустого элемента.
Просмотрите поля типа и языка. При отсутствии собственных значений тип получает значение website, а язык получает en_US. Если проект требует других настроек, передайте их как текстовые значения до запуска создания результата.
Запустите создание разметки и прочитайте полученный HTML-фрагмент. При заданном заголовке найдите элементы заголовка и описания, затем сопоставьте дополнительные элементы с заполненными полями. Обратите внимание на специальные символы: введённые значения должны быть представлены в экранированном виде.
Сравните результат с подготовленными метаданными. Отдельно просмотрите заголовок, описание, адрес изображения, адрес страницы, название сайта, тип и язык. Если разметка отсутствует, сначала вернитесь к полю заголовка и убедитесь, что в нём есть непустое значение.

Как понять состав готового фрагмента

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

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

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

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

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

Для статьи блога введите заголовок и описание, передайте адрес страницы, оставьте поле изображения без значения, создайте фрагмент и сопоставьте его элементы с этими исходными полями. Затем отдельно просмотрите запись специальных символов в HTML-фрагменте, если они были в тексте.

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

Ограничения

Инструмент собирает экранированный HTML-фрагмент из введённых метаданных; результат следует читать именно как созданную разметку.

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

Причина: заголовок не передан как непустое значение, поэтому фрагмент не создаётся. Действие: заполните поле заголовка и запустите создание результата ещё раз.

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

Создаётся ли разметка без заголовка?

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

Появится ли изображение без заполненного поля?

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

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

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