Как использовать 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" - не забудьте поменять на свою!).
не помогло. =(
у вас Open Graph разметка выводится плагином All in One SEO Pack, так чего вы хотели то?
Код отличный - думаю, что он рабочий! Автору - разметка Open Graph может и не выводиться если не активирован отдельный модуль социальных мета в плагине All in One Seo Pack. Но вы не увидите изменений после внесенного кода потому что Вконтакте тоже кеширует внешние страницы - ссылки сайтов которые вы пытаетесь добавить! Поэтому чистите кеш и будет вам счастье))
Заработало, спасибо! Важно не только втулить код на сайт со своими настройками, но и очистить кеш самого ВКонтакте, тогда все будет работать.
А что насчет таких же настроек для фейсбука?
facebook тоже работает с open graph, так что отдельного кода для него не надо.
а на какую ссылку менять ваш адрес в коде, не пойму? у меня такого адреса с pics/gif нету.
просто ссылку на свою картинку вставьте.
Сделал разметку, тяну правильную картинку к рубрике, но в ВК всё равно какая то миниатюра левая подтягивается. И не тянется описание. В чем может быть проблема?
не вижу у вас open graph разметки на сайте.
Как так? Может не в том месте формирую код? Но в исходном коде получается нечто подобное, единственное я саму ссылку пока не стал добавлять
например, что это такое?
какой еще артикул?