В данной заметке рассматривается вопрос о том, как разметить страницу, чтобы при «расшаривании» данной страницы в фейсбуке была корректная превьюшка. В первой части данной заметки рассматривается алгоритм решения данной задачи при помощи мета-тегов Open Graph, во второй части, бонусом, рассматривается функционал плагина разметки для CMS WordPress.
Часть 1. Добавление мета-тегов Open Graph
В самом деле, добавление мета-тегов Open Graph для статейной страницы — это достаточно примитивный процесс, описание которого займет всего пару-тройку абзацев.
Вероятно, нужно дать небольшую справку о том, что же такое Open Graph. Протокол разметки Open Graph — это специальный протокол, разработанный Facebook для «интеграции» сторонних сайтов с соц. сетью. На данный момент данный протокол также принимается другими соц. сетями. В рамках данного примера, под «интеграцией» мы будем понимать процесс корректного расшаривания материалов с сайта в Facebook.
Для корректного отображения превьюшки достаточно указания всего четырех тегов:
- og:url — Адрес страницы
- og:type — Тип страницы
- og:title — Заголовок страницы
- og:image — Картинка для превью (Ссылкой)
К слову, несмотря на то, что теги очень желательно добавлять в <head> сайта, они также корректно работают, если вставить их в тело шаблона страницы. Для страницы на WordPress строки с тегами будут выглядеть следующим образом:
<meta property="og:url" content="<?php echo esc_url( get_permalink() ); ?>" /> <meta property="og:type" content="article" /> <meta property="og:title" content="<?php the_title(); ?>" /> <?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'large', true); ?> <meta property="og:image" content="<?php echo $thumb_url[0]; ?>" />
На первой строке мы передаем адрес страницы в качестве значения. На второй строке тип страницы. На третьей — тайтл. А дальше мы получаем url-адрес изображения записи и передаем его в последний тег, «og:image».
В целом, разметка страницы закончена. Стоит заметить, что есть еще несколько необязательных OG-тегов. Ниже перечислены некоторые из них:
- og:description — Описание для анонса
- og:video — URL-адрес для видео
- og:audio — URL-адрес для аудио
- og:site_name — Название сайта
- og:locale — Язык сайта и его географическое расположение
- og:locale:alternate — Другие языки, на которых доступна страница
Часть 2. Плагин для WordPress
По задумке, здесь должно было быть описание одного из специализированных плагинов для интеграции Open Graph’а на сайт на ВП. Однако, после внимательного изучения комплексного SEO-плагина All In One Seo Pack, выяснилось, что надобность в специальных плагинах отпадает. Данный плагин справляется с задачей разметки страницы «на ура».
Итак для интеграции достаточно лишь установить плагин и заполнить необходимые поля при добавлении записи. На скриншоте ниже видно, какие это поля:
После добавления записи в og:title отправится заголовок записи, в og:description описание записи, а в og:image — первая картинка записи.
В целом всё, любой путь решения оправдан, однако второй гораздо проще. В заключение, стоит сказать, что для отладки превьюшек у FB есть специальный сервис. Вот ссылка на него (Требуется авторизация на фейсбуке): https://developers.facebook.com/tools/debug/sharing/. Нюансам работы с данным инструментом, скорее всего, будет посвящена отдельная заметка.