INT 21h

• 🏠 ДОМОЙ
• Админство
• Програмство
• Электронство
• Микроскопство
• Мой софт
• 3D печать
• Авто
• Музей
• Часы

The Open Graph protocol: Улучшаем вид ссылок на ваш сайт в социальных сетях

№ 6866 В разделе Programming от December 22nd, 2014,

Делается это с помощью стандарта OGP: The Open Graph protocol. Задача этого стандарта улучшить описание ссылок для социальных сетей, а социальные сети улучшат вид ссылок для вас 🙂 Поскольку мой сайт на WordPress, то примеры я буду давать именно под него.
Чтобы послать минимальное количество данных для описания ссылки необходимо добавить следующие метаданные:

 og:title - Название вашего объекта
 og:type - Тип вашего объекта
 og:image - URL картинки, характеризующей ваш объект
 og:url - Канонический URL вашего объекта

но очень полезен дополнительный метатег og:description, в котором вы напишете краткий текст вашей статьи.
Вот пример того, что я отправляю социалкам о моем сайте:

<meta property="og:type"        content="article" />
<meta property="og:url"         content="/?p=6842" /> 
<meta property="og:description"       content="INT 21h: Домашняя страница самого страшного прерывания" /> 
<meta property="og:title" content="Карта автоканалов в России: как я это сделал" />
<meta property="og:image"       content="/social_pic3.jpg" />

Итого вы видите указан тип страницы, нормальная ссылка на нее, название сайта и краткое описание (у меня заголовок статьи). Если вставить ссылку с моей статьей в социалочку, то результат получится гораздо лучше, чем был до этого.

Сравните результат на сайте ВКонтакте до посылки описания:

И вот результаты, которые я получил на ВКонтакте и Google Plus

Как вы обратили внимание на ВКонтакте картинки у постов разные. Все дело в том, что если у записи есть собственный thumbnail, то посылается он, а не универсальная картинка для всех записей. Я уже описывал как у WordPress сделать картинку, описывающую пост, поэтому просто покажу код как я подгрузил конкретный thumbnail вместо универсальной. Пишется все в заголовке страницы в шаблоне, разумеется.

<meta property="og:type"        content="article" />
<meta property="og:url"         content="<?=get_permalink();?>" />
<meta property="og:description"       content="<? bloginfo('name'); ?>: <? bloginfo('description'); ?>" />
<meta property="og:title" content="<? the_title(); ?>" />
<?php if(has_post_thumbnail()) { ?>
<meta property="og:image"       content="<?=wp_get_attachment_image_src( get_post_thumbnail_id(), 'post-thumbnail' )[0];?>" />
<? } else { ?>
<meta property="og:image"       content="/social_pic3.jpg" />
<? } ?>

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

<meta name="AUTHOR" content="Владимир Смагин 21h">
<meta content='width=1324' name='viewport'>
<meta property="og:type"        content="article" />
<meta property="og:url"         content="<?=get_permalink();?>" />
<meta property="og:description"       content="<? bloginfo('name'); ?>: <? bloginfo('description'); ?>" />
<meta property="og:title" content="<? the_title(); ?>" />
<?php.
function postimage() {
    $image = get_children( array(
    'post_parent' => get_the_ID(),
    'post_type' => 'attachment',
    'numberposts' => 1,
    'order' => 'asc',
    'orderby' => 'ID',
    'post_mime_type' => 'image',
    ) );
  $image_url = ( $image ) ? wp_get_attachment_url( current($image)->ID ) : "";
  return $image_url;
}
$post_image_src=postimage(false);
if ($post_image_src and is_single()) {
?>
<meta property="og:image"       content="<?=$post_image_src; ?>" />
<? } else { ?>
<meta property="og:image"       content="/social_pic2.jpg" />
<? } ?>

Нет комментариев »