Используйте микроразметку OpenGraph для расшариваний в соцсетях

⇐ ПредыдущаяСтр 6 из 9Следующая ⇒

По умолчанию, когда кто-то делится страницей сайта, например, в VK, социальная сеть берет для анонса случайную картинку (зачастую рекламный баннер с сайта).

Заголовок и текст сеть берет из мета-данных title и description. Хорошо, если вы грамотно заполняете мета-данные – тогда с текстом проблем не будет. Но на изображение повлиять из админки нельзя.

При расшаривании Фейсбук взял в качестве изображения рекламный баннер

Open Graph – набор мета-тегов, который позволяет контролировать анонсы страниц в социальных сетях прямо из админской панели сайта.

Чтобы использовать Open Graph, достаточно на странице указать содержимое тегов:

· Og: title (Заголовок анонса в соцсети)

· Og: image (Изображение анонса)

· Og: description (Описание в анонсе)

Например:

< meta property=" og: title" content=" Приятный баг для новых пользователей Google AdSense " />

< meta property=" og: description" content=" Описание новой ошибки в системе Google AdSense " />

< meta property=" og: image" content=" http: //pr-cy.ru/news/upload/49127/images/1051f4d0d4dee5fe79e56c59aa71c063.jpg " >

Теперь после того, как кто-нибудь поделится страницей сайта в социальных сетях, появится красивый анонс с тем содержимым, которое вам нужно.

Разумеется, лезть в код каждой страницы и прописывать мета-данные не нужно. Для этой цели есть масса плагинов. Я использую Open Graph Metabox.

Сегодня протокол работает со всем доступными социальными сетями: FaceBook, Вконтакте, Одноклассники, Google+, Twitter. Однако не все плагины поддерживают все соцсети одновременно. Будьте внимательны при выборе.

Что делать, если на вашем сайте ежедневно появляются десятки новых страниц и нет желания прописывать мета-данные даже через плагин.

В таком случае вам поможет следующий код:

//open graph разметка для сайта start

function wph_open_graph() {

echo '< meta property=" og: site_name" content=" '. get_bloginfo('name'). '" /> '.PHP_EOL;

global $post;

if (is_singular()) { //страница одиночной записи

echo '< meta property=" og: title" content=" '. get_the_title(). '" /> '.PHP_EOL;

echo '< meta property=" og: type" content=" article" /> '.PHP_EOL;

echo '< meta property=" og: url" content=" '. get_permalink(). '" /> '.PHP_EOL;

if (has_post_thumbnail($post-> ID)) { //если есть миниатюра - используем ее

$ogimage = wp_get_attachment_image_src(get_post_thumbnail_id($post-> ID), 'thumbnail');

echo '< meta property=" og: image" content=" '. esc_attr($ogimage[0]). '" /> '.PHP_EOL;

}

else { //если нет миниатюры, то берем первую картинку записи

echo '< meta property=" og: image" content=" '. esc_attr(wph_catch_that_image()). '" /> '.PHP_EOL;

}

if (is_home()) {// для главной

echo '< meta property=" og: type" content=" website" /> '.PHP_EOL;

echo '< meta property=" og: url" content=" '. get_bloginfo('url'). '" /> '.PHP_EOL;

echo '< meta property=" og: image" content=" http: //www.wphook.ru/pics/logo.gif" /> '.PHP_EOL;

}

add_action('wp_head', 'wph_open_graph');

//open graph разметка для сайта end

//получаем ссылку на первую картинку записи start

function wph_catch_that_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

preg_match_all('/< img[^> ]+src=([ \' " ])? ((? (1).+? |[^ \s > ]+))(? (1) \1 )/', $post-> post_content, $result);

$first_img = $result[2][0];

if(empty($first_img)) {

$first_img = " http: //www.wphook.ru/pics/logo.gif";

}

return $first_img;

}

//получаем ссылку на первую картинку записи end

Его нужно вставить в шаблон functions.php.

Однако у кода есть недостаток. Он берет в качестве изображения анонса заданную в админке миниатюру. Так что ее все равно придется выбирать в визуальном редакторе. Если миниатюры нет, он использует заглушку. Значит придется нарисовать симпатичную заглушку.

Плагины для внедрения микроразметки Open Graph:

	WordPress	WP Facebook Open Graph protocol, Open Graph Metabox
	Joomla	Phoca Open Graph, Global Open Graph
	Drupal	Open Graph meta tags, Metatag

⇐ Предыдущая 1 2 3 4 567 8 9 Следующая ⇒