Shumaher’s_Blog@AlexZ.me

— yet another stupid personal weblog

Open Graph теги для WordPress (и про оптимизацию)

WordPress Open GraphДля того, чтобы добавить поддержку 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".


Ссылки по теме:

Ну и результат всего этого (на примере Facebook):

Facebook share



Самые внимательные читатели может быть заметили, что в листинге выше я НЕ использую bloginfo('url') и некоторые другие "теги шаблонов". Неизменяемая динамически информация типа адреса, названия сайта и т.п. прописана прямо в коде. Это сделано для оптимизации, а точнее для сокращения запросов к базе данных. На эту тему написано уже много, и ничего нового я не придумал.
Но раз тема сегодняшней заметки посвящена header'у, продолжим оптимизировать его, удалив лишний HTML-код. А ещё (и это главное!) отключив бесполезные функции в новых версиях WP: REST API, oEmbed, Emoji.

Это необходимо добавить в файл functions.php (либо создать, если его нет):

Объяснять каждую строчку я не буду, читайте описание фильтров к Кодексе. Хотя по названиям функций и фильтров всё, думаю, и так понятно.
Стоит пояснить только про куски закомментированного кода в конце: из шапки таким образом (если комментарий убрать) удаляются ссылки на RSS2-ленты, которые могут быть не нужны для НЕ блогов. Обратите внимание, что RSS1- и Atom-ленты удалены специально, т.к. все сразу форматы излишни.
Аналогично про отключение pingback'ов.
Этот функционал чаще все же нужен для блогов, поэтому эти строчки и были закомментированы, но написаны.

VN:F [1.9.17_1161]
Rating: 0.0/5 (0 votes cast)
Оставьте свой комментарий




OpenID Mail.Ru Flickr Blogger WordPress.com Technorati Verisign AOL

Вы можете использовать следующие теги: <a href="" title=""> <abbr title="">
<acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime="">
<em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Это не спам.

Subscribe without commenting