Мета-теги для Facebook в WordPress

Опубликовано в : 13-12-2012 | Автор : | В рубрике : Вебмастеринг

3

Мета-теги Open Graph (Facebook) для WordPress
Специальные мета-теги 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-&gt;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" />
  • Не работает http://kinoblogi.com/

    • У вас работает генерация тегов, только можно убрать description, потому что в большинстве случаев он пустой и картинок для превью нет, поэтому мой алгоритм для картинок не подходит, нужен немного другой.

      • Я решил эту проблему плагином. Все ровно спасибо за ответ.

Главная > Вебмастеринг > Мета-теги для Facebook в WordPress