Настройка отображения ссылок wordpress в вконтакте и facebook




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

Опять же, для wordpress существуют специальные плагины, которые это делают в полуавтоматическом режиме. Но я почему-то плагины не люблю и на то есть, по моему мнению, несколько причин:

  • Их нужно обновлять, включать-выключать, а я это не люблю.
  • Неизвестно что у них внутри (может и известно, но лезть туда не хочется).
  • Заранее не знаешь через какое место они будут работать.
  • Захламляют интерфейс wordpress.
  • Травма детства.

Да и вообще я предпочитаю все тривиальные вещи делать сам, так можно разбираться и показывать себя умным в мелочах 😉

Обязательная часть настройки отображения ссылки сайта на wordpress в вконтакте

Всё сводится к прописыванию верных тегов meta внутри тега head. Он, в свою очередь, располагается в файле header.php темы wordpress. Существуют 4 типа метаданных, которые нужно указать:

  1. og:title
    Или как будет отображаться название ссылки, я решил, что подойдёт и обычное title:
    <meta property="og:title" content="<?php echo wp_get_document_title(); ?>" />
  2. og:type
    Тип контента. Для моего блога это просто текстовые страницы, то есть вебсайт:
    <meta property="og:type" content="website" />
  3. og:image
    Картинка, которая будет прикрепляться к ссылке, её нужно сделать и залить на сервер. Я просто сделал скриншот логотипа сайта, да и сохранили его в корне под название og_image.png.
    <meta property="og:image" content="<?php echo get_site_url(); ?>/og_image.png"/>
  4. og:url
    Полная ссылка на страницу.
    <meta property="og:url" content="<?php $server_name = $_SERVER["SERVER_NAME"]; $request_uri = $_SERVER["REQUEST_URI"]; $current_url .= "http://"; $current_url .= $server_name . $request_uri; echo $current_url; ?>" />

Дополнительные настройки ссылки сайта на wordpress в социальных сетях

Но вконтакте это показалось мало, нужен было ему хоть какое описание страницы, иначе ссылку отказывался вставлять красиво. Обычно он эти данные берёт из description страницы, но у меня его нет. Сделать для каждой записи нормальный description мне лень, а ненормальный только усугубит отображение в поисковике. Поэтому нужно дописать еще один тег, ну а locale – тут мне просто захотелось конкретики :) для души, так сказать:

  1. og:description
    Прописываем описание страницы, для отдельных постов и страниц берём первые 30 слов, удаляем html теги и выводим. Для других страниц – стандартное описание.
    <?php if (is_single() || (is_page())) { if ( have_posts() ) : while ( have_posts() ) : the_post(); $str = wp_trim_words( get_the_content(), 30 ); $str = wp_strip_all_tags( $str ); echo '<meta property="og:description" content="'.$str.'" />'; endwhile; endif; } else { echo '<meta property="og:description" content="Страница блога, посвященного всяким весёлым штучкам как-то отдаленно связанными с Linux." />'; } ?>
  2. og:locale
    Язык и страна страницы по умолчанию. Русский язык для Российской Федерации:
    <meta property="og:locale" content="ru_RU" />
  3. og:locale:alternate
    Ну и решил не забыть братские народы:
    <meta property="og:locale:alternate" content="ru_BY" /> <meta property="og:locale:alternate" content="ru_UA" />

Заключение

Результат меня устроил, на стене:
Отображение ссылки wordpress вконтакте

Вставка сообщения:
Отображение ссылки wordpress вконтакте

При отправке сообщения:
Отображение ссылки wordpress вконтакте

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


Рубрика Linux, Без рубрики