Для того, чтобы добавить поддержку Open Graph в WordPress, можно воспользоваться специальными плагинами, либо SEO-плагинами, которых тысячи. Но такую простую вещь как добавление HTML-кода я предпочитаю делать без плагинов.
Зачем это нужно надеюсь пояснять не надо, но всё же: эти мета-теги используются для извлечения названия/картинки/куска текста поста при шаринге в социальных сетях. Поэтому добавлять их или нет, вопрос уже не стоит. Сейчас они обязаны быть на любом сайте, даже если это не блог, а статичный сайт без регулярных публикаций или landing page.
Данное решение использую уже около года на нескольких WP-сайтах, но недавно немного обновил код и решил поделиться этим.
Код необходимо добавить в файл header.php вашей темы, естественно внутрь <head>:
Несколько пояснений, сверху вниз по строчкам:
- Про
og:url: можно было бы просто написатьthe_permalink(), чтобы получить URL поста, но я использую шаблон пермаликов
/%year%/%monthnum%/%day%/%postname%
и значит адрес содержит дату, а т.к. иногда посты имеют свойство обновляться, старые ссылки перестанут работать. Поэтому здесь таким образом указан "slug" поста (последняя часть адреса), а при помощи плагина Permalink Redirect работают и старые, и новые (в случае обновления поста) ссылки, независимо от даты. Но на такие короткие ссылки (точнее из-за редиректа на новый URL) ругается отладчик Facebook'а (ссылка на него ниже). Однако, сам шаринг работает везде корректно. Поэтому рекомендую именно такой способ, если в ваших URL'ах используются даты. - Уже при написании этого поста, когда искал допустимые размеры картинок для Google+, наткнулся на тег
og:headline, который в спецификации отсутствует, но только с ним подгружаются заголовки постов в Кругл. Подробнее, а также про размеры/обрезку картинок см. в статье Article Rendering. - Про логику выбора картинок: если к посту прикреплена "featured image" (я не помню как это по-русски в терминологии WP), то используется она, иначе ищется первая картинка в теге
<img>, если её нет, или это не пост, а главная страница или, например, страница тега/категории/поиска (либо любые другие, где картинок нет), то используется отдельный "основной" логотип. - Размеры картинки в
og:image:widthиog:image:heightне просто так указаны 640x320 — это рекомендуемые размеры для Одноклассников (документацию я не нашел, это написано непосредственно в форме создания поста), и они самые большие среди основных соцсетей (я рассматриваю ВК, Fb, ОК и Google+), и следовательно, рекомендуется использовать как минимум такие значения. Можно, естественно, больше. - По поводу значения
article:authorу Facebook и Pinterest есть расхождения: это должна быть ссылка на профиль Fb, либо просто ваше имя (для Pinterest). Но ссылку я считаю полезнее, а имя всё равно продублировано ниже тегамиprofile:first_nameиprofile:last_name. - Скорее всего НЕЛЬЗЯ использовать одновременно
article:author(ссылка на профиль Fb) иarticle:publisher(ссылка на страницу). Здесь оба тега указаны для примера. Тоже самое сtwitter:creatorиtwitter:site— этот тег используется если аккаунт Twitter'а принадлежит сайту в целом, а не человеку. og:type = "blog"отсутствует в спецификации, но это значение рекомендуется Pinterest (ссылка выше). Для обычных сайтов (не блогов) нужно использовать"website".
Ссылки по теме:
- Протокол Open Graph (перевод спецификации)
- Facebook Sharing Debugger
- Open Graph Object Debugger
- Google Structured Data Testing Tool
Ну и результат всего этого (на примере Facebook):
Самые внимательные читатели может быть заметили, что в листинге выше я НЕ использую bloginfo('url') и некоторые другие "теги шаблонов". Неизменяемая динамически информация типа адреса, названия сайта и т.п. прописана прямо в коде. Это сделано для оптимизации, а точнее для сокращения запросов к базе данных. На эту тему написано уже много, и ничего нового я не придумал.
Но раз тема сегодняшней заметки посвящена header'у, продолжим оптимизировать его, удалив лишний HTML-код. А ещё (и это главное!) отключив бесполезные функции в новых версиях WP: REST API, oEmbed, Emoji.
Это необходимо добавить в файл functions.php (либо создать, если его нет):
Объяснять каждую строчку я не буду, читайте описание фильтров к Кодексе. Хотя по названиям функций и фильтров всё, думаю, и так понятно.
Стоит пояснить только про куски закомментированного кода в конце: из шапки таким образом (если комментарий убрать) удаляются ссылки на RSS2-ленты, которые могут быть не нужны для НЕ блогов. Обратите внимание, что RSS1- и Atom-ленты удалены специально, т.к. все сразу форматы излишни.
Аналогично про отключение pingback'ов.
Этот функционал чаще все же нужен для блогов, поэтому эти строчки и были закомментированы, но написаны.
Последние комментарии