НАСТРОЙКА ОТОБРАЖЕНИЯ ССЫЛОК 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" />

Заключение

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