Специальные мета-теги OpenGraph используются не только Facebook, но и другими соцсетями, в частности Вконтакте и Google+.
Зачем нужны мета-теги Open Graph?
Мета-теги Open Graph, как и другие мета-теги, содержат информацию о документе, в нашем случае это страница блога. Facebook, Вконтакте, Google+ при добавлении пользователем ссылку на страницу руками прямо в соц-сети или при нажатии на кнопку «Like» (кстати, лайкните этот пост :), в этих мета-тегах информацию, которая будет использована при публикации: заголовок статьи, аннотация, ссылка на иллюстрацию. Если мета-теги не найдены, то соц-сеть будет использовать другую информацию: для заголовка пойдет title страницы, для иллюстрации подходящее изображение и так далее. В результате многие видели у себя в ленте ссылки, где вместо заголовка конкретной статьи стоит название сайта, а вместо иллюстрации — картинка счетчика. Вот с этим мы и будем бороться.
Какие есть теги Open Graph?
Информацию об основных мета-тегах, которые нам нужны, я свел в таблицу, заодно указал функции WordPress, которые будут выводить соответствующую информацию.
| Мета-тег | Что означает | Значение или функция в WordPress |
| og:title | Заголовок материала | single_post_title() |
| og:type | Тип материала | Всегда article |
| og:url | URL, который будет лайкаться, может отличаться от текущего URL | the_permalink() |
| og:image | Адрес картинки, которая будет использоваться в качестве иллюстрации | the_attachment_link() |
| og:site_name | Название сайта | bloginfo_rss() |
| fb:admins | Facebook ID/ Нужно в частности для доступа | Свой Facebook ID |
| og:description | Описание |
Как прописать мета-теги Open Graph в WordPress
Прежде всего надо в текущей теме найти файл, где прописан head страниц нашего блога. Чаще всего это header.php, но в некоторых темах может быть и single.php. В данной статье я покажу прописывание мета-тегов для отдельных постов, для всего блока код должен быть несколько сложнее.
Итак, прежде всего необходимо указать Open Graph Namespace, чтобы все работало, для этого ищем тег <html> и прописываем namespace.
Было:
Стало:
Дальше в любом месте в теге <head> прописываем следующий код:
'DESC',
'orderby' => 'menu_order',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => 1
);
$attachments = get_posts($args);
if ($attachments) {
$attachment = $attachments[0];
$img_link=wp_get_attachment_image_src($attachment->ID);
echo '';
}
?>
В коде все просто, кроме вывода ссылки на иллюстрацию, там код кривоватый. Вместо ВАШ_ЛИЧНЫЙ_ID_FACEBOOK надо указать свой Facebook ID. Для этого зайти в свой профиль и взять id из адреса, например http://www.facebook.com/profile.php?id=1652632588, если же у вас там имя пользователя, то можно зайти по адресу https://graph.facebook.com/ВАШ_username, например https://graph.facebook.com/Vcherny
Сохраняем файл, заходим на сайт, открываем код своих постов, где должны появиться примерно такие мета-теги:
Не работает http://kinoblogi.com/
У вас работает генерация тегов, только можно убрать description, потому что в большинстве случаев он пустой и картинок для превью нет, поэтому мой алгоритм для картинок не подходит, нужен немного другой.
Я решил эту проблему плагином. Все ровно спасибо за ответ.