Мета-теги для Facebook в WordPress
Опубликовано в : 13-12-2012 | Автор : Владимир Чернышов | В рубрике : Вебмастеринг
3
Специальные мета-теги 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.
Было:
<html xmlns="http://www.w3.org/1999/xhtml"> |
Стало:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#"
xmlns:og="http://ogp.me/ns#" dir="ltr" lang="ru-RU"> |
Дальше в любом месте в теге <head> прописываем следующий код:
<?php if (is_single()) { ?> <meta property="og:type" content="article" /> <meta property="og:title" content="<?php single_post_title(); ?>" /> <meta property="og:url" content="<?php the_permalink(); ?>" /> <?php $args = array( 'order' => '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 '<meta property="og:image" content="'.$img_link[0].'" />'; } ?> <?php } ?> |
В коде все просто, кроме вывода ссылки на иллюстрацию, там код кривоватый. Вместо ВАШ_ЛИЧНЫЙ_ID_FACEBOOK надо указать свой Facebook ID. Для этого зайти в свой профиль и взять id из адреса, например http://www.facebook.com/profile.php?id=1652632588, если же у вас там имя пользователя, то можно зайти по адресу https://graph.facebook.com/ВАШ_username, например https://graph.facebook.com/Vcherny
Сохраняем файл, заходим на сайт, открываем код своих постов, где должны появиться примерно такие мета-теги:
<meta property="og:type" content="article" /> <meta property="og:title" content="Мне уже не нужны зимние шины!" /> <meta property="og:url" content="http://vcherny.ru/personal/zimnie-shiny/" /> <meta property="og:image" content="http://vcherny.ru/wp-content/uploads/2012/11/Shiny-150x150.jpg" /> <meta property="og:site_name" content="(не)?путевые заметки" /> <meta property="fb:admins" content="1652632588" /> |