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="https://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 = "https://www.wphook.ru/pics/logo.gif";
    }
    return $first_img;
}
//получаем ссылку на первую картинку записи end

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


Комментарии (11 комментариев)
  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 нету.

    • Flector:

      просто ссылку на свою картинку вставьте.

  5. Сделал разметку, тяну правильную картинку к рубрике, но в ВК всё равно какая то миниатюра левая подтягивается. И не тянется описание. В чем может быть проблема?

    • Flector:

      не вижу у вас open graph разметки на сайте.

      • Как так? Может не в том месте формирую код? Но в исходном коде получается нечто подобное, единственное я саму ссылку пока не стал добавлять

        1
        2
        3
        4
        5
        
        <!--open graff-->
        <meta property="og:description" content="В этой статья я расскажу как самостоятельно оформить приглашение во Вьетнам для визы (Approval Letter) в 2017 году. Как получить приглашение во Вьетнам, как заполнить заявку на приглашение, на каком сайте сделать это приглашение, сколько оно будет стоить, всё самое полезное для тех кто собрался отдохнуть или пожить во Вьетнаме" />
        <meta property="og:image" content="http://anotherfinestep.org/wp-content/uploads/2016/11/priglachenie_vo_vetnam_11_1.jpg" />
        <meta property="og:title" content="Приглашение во Вьетнам для визы  &#8212; Approval Letter | Ещё один великолепный шаг" />
        <meta property="og:type" content = "website" />
        • Flector:

          например, что это такое?

          <meta property="og:type" content = "articul" />

          какой еще артикул?

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

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