Фев
5
2013

Правильная картинка для ссылки Вконтакте и других социальных сетей

Вы когда-нибудь задумывались, какая картинка прикрепляется к ссылке, которую посетитель публикует скажем в Вконтакте? Несомненно, посетитель имеет возможность выбора, он может по-щелкать по картинке, пока не выберет что-то подходящее. А может этого и не делать, или вообще передумать. Обычно если такая картинка не указана специально, о чем мы и будем говорить, показывается первая картинка встреченная на сайте. И чаще всего это бывает Ваш логотип, хотя и не обязательно. Но меня такой вариант не устраивает, я считаю что должна прикрепляться миниатюра записи, которую я сделал в блоге. Но как добавить правильную картинку для ссылки в Вконтакте?

Указываем картинку для ссылки в Вконтакте

Оказывается все уже придумано. Есть такая вещь как Open Graph protocol, с помощью которого можно сообщать дополнительную информацию о содержимом страницы, в частности изображение обложки.

Почитать немного больше об OGP можно на Яндекс.Вебмастер

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

Это можно сделать несколькими способами.

Правим header.php

Можно открыть файл header.php темы которую Вы используете и в тэге <head> добавить в нее следующий код:

<meta property="og:image" 
<?php
$dom = simplexml_load_string(get_the_post_thumbnail());
$src = $dom->attributes()->src;
echo 'content="'.$src.'"';
?>/>

Попутно сообщаем об использовании Open Graph protocol и добавляем атрибут «xmlns:og=»http://ogp.me/ns#» тэгу <html>

<html xmlns:og="http://ogp.me/ns#">

Используем плагин

Если Вы по какой-то причине не хотите править файлы темы, то можете воспользоваться соответствующими плагинами.
Наверняка многие слышали, или уже даже пользуются плагином WordPress SEO by Yoast, который умеет делать то что-нам нужно по умолчанию. Все что требуется сделать, это зайти в настройки плагина и включить функцию добавления Open Graph мета-данных, если она у Вас выключена.

Если Вы не хотите устанавливать себе этот комбайн, хотя он и очень полезный, но Вам возможно нравится другой, то для указания картинки для ссылки Вконтакте можете воспользоваться небольшим плагином WP Open Graph Meta, который только добавляет мета-данные, что нам и нужно.

Ссылки для скачивания: WP Open Graph Meta / WordPress SEO by Yoast