Flector

Как использовать Open Graph разметку для ВКонтакте?

Вставляемая ссылка в комментах ВКонтакте

ВКонтакте при вставке ссылок умеет определять на сайте Open Graph разметку и использует ее при формировании сниппета ссылки. Эту самую Open Graph разметку можно добавить вашему сайту без использования сторонних плагинов. Для этого вам необходимо добавить в файл functions.php вашей темы следующий код:

//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

Данный сниппет добавляет Open Graph разметку для главной страницы вашего сайта и для всех страниц одиночных записей. В качестве картинки используется миниатюра записи, а при ее отсутствии первая картинка, найденная в записи. Если же картинок в записи найдено не будет, то будет использована картинка заглушки ("http://www.wphook.ru/pics/logo.gif" - не забудьте поменять на свою!).


Комментарии (6 комментариев)
  1. не помогло. =(

    • Flector:

      у вас Open Graph разметка выводится плагином All in One SEO Pack, так чего вы хотели то?

  2. Код отличный - думаю, что он рабочий! Автору - разметка Open Graph может и не выводиться если не активирован отдельный модуль социальных мета в плагине All in One Seo Pack. Но вы не увидите изменений после внесенного кода потому что Вконтакте тоже кеширует внешние страницы - ссылки сайтов которые вы пытаетесь добавить! Поэтому чистите кеш и будет вам счастье))

  3. Дарья:

    Заработало, спасибо! Важно не только втулить код на сайт со своими настройками, но и очистить кеш самого ВКонтакте, тогда все будет работать.
    А что насчет таких же настроек для фейсбука?

    • Flector:

      facebook тоже работает с open graph, так что отдельного кода для него не надо.

  4. wp-fan:

    а на какую ссылку менять ваш адрес в коде, не пойму? у меня такого адреса с pics/gif нету.

Написать комментарий

Для вставки кода воспользуйтесь кнопкой "Код". Используйте предпросмотр!