Open Graph (превью ссылки)

Что входит в теги Open Graph?

Теги Open Graph — это короткая «карточка описания» в начале кода страницы; базовые четыре — заголовок, тип, главное изображение и адрес. Официальная документация протокола Open Graph (ogp.me) называет эти четыре свойства обязательными для каждой страницы.

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

Эти теги записаны там, где клиент их не видит. Поэтому пока не отправишь ссылку, трудно заметить, что чего-то не хватает, — обязательно включите их в чек-лист перед запуском.

Какого размера и состава делать картинку для превью ссылки?

Чаще всего делают горизонтальный прямоугольник с соотношением примерно 1.91:1 (например, 1200×630). Документация для разработчиков Meta (Facebook) рекомендует изображения шириной от 1080 пикселей, чтобы они хорошо смотрелись на экранах высокого разрешения, и советует указывать ширину и высоту изображения в тегах.

Каждый сервис обрезает изображение немного по-своему. Поэтому название заведения и главный текст безопаснее размещать в центре, подальше от краёв.

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

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

Нужно ли делать разные превью для разных страниц?

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

Задайте отдельно хотя бы для главной, для страницы меню · цен, записи и акций. В заголовке — что клиент получит на этой странице, на картинке — кадр, который лучше всего это показывает.

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

• Кафе: для ссылки о новинке — фото нового напитка и заголовок «Осенний лимитированный каштановый латте уже в продаже».
• Салон: для ссылки на акцию — заголовок «Уход для новых клиентов» и фото салона.
• Мастерская: для ссылки на набор — фото готовых работ и заголовок «Набор на мастер-классы выходного дня на ноябрь (11)».
• Онлайн-продажи: для ссылки на товар — фото и название именно этого товара.

Как написать заголовок и описание для превью ссылки?

Заголовок превью должен сообщать получателю, что он найдёт по ссылке, ещё до перехода. Можно использовать тот же заголовок, что в результатах поиска, но с учётом того, что его читают в чате, можно сделать его чуть разговорнее.

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

Выбрав главное изображение, добавьте и его описание (og:image:alt). Документация Open Graph тоже это рекомендует, а людям с программами экранного доступа так передаётся содержание картинки.

Заголовок, из которого понятно, что сделать получателю, даёт больше причин нажать, чем повтор названия. Например, не «Мастерская ○○», а «Мастерская ○○ · расписание мастер-классов на ноябрь (11)».

• Пример заголовка: «Кафе ○○ · кофе ручного заваривания в Ённам-доне, ежедневно с 10:00 до 22:00»
• Пример описания: «Кофейня ручного заваривания с просторными местами у окна. Кофе в зёрнах можно купить прямо в зале».
• Неудачный пример: заголовок «Главная», описание «Добро пожаловать» — из них ничего не понятно о заведении

В каком порядке проверять, если превью не обновляется или выглядит странно?

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

Meta (Facebook) сообщает, что если заставить отладчик публикаций заново считать страницу, не придётся ждать стандартного цикла обновления (около 24 часов). В KakaoTalk то же самое можно сделать в отладчике публикаций на сайте Kakao Developers.

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

1. 01Проверьте, действительно ли на странице есть теги og:title · og:image.
2. 02Проверьте, что адрес изображения полный и начинается с «https://».
3. 03Вставьте адрес изображения прямо в браузер и проверьте, открывается ли он без входа в аккаунт.
4. 04Проверьте, не слишком ли тяжёлое изображение.
5. 05Вставьте адрес в отладчик публикаций Meta или Kakao и заново загрузите превью.
6. 06Отправьте ссылку ещё раз через «Отправить себе» в KakaoTalk и проверьте результат.

Какие ошибки чаще всего совершают с Open Graph?

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

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

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

Что спросить у веб-студии об Open Graph?

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

• Можно ли задать отдельные заголовок, описание и изображение для каждой страницы?
• Будет ли картинка превью задаваться автоматически при публикации новых статей или товаров?
• Проверите ли вы превью ссылок сами в KakaoTalk?
• Смогу ли я позже менять превью в админ-панели?