Что делать если не подтягивается картинка на фейсбук

Довольно часто бывает, что при публикации ссылки на facebook изображение не подтягивается.

Есть несколько причин и соответственно вариантов решения проблемы.

Вариант 1. Причина в кэше facebook.

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

Если вы опубликовали ссылку на запись без картинки, а потом эту картинку добавили, но на facebook она не появилась, то это ваш вариант.

Чтобы картинка отобразилась нужно очистить кэш facebook.

Это делается с помощью специального инструмента Debug. Заходите в инструменты разработчика, вводите вашу ссылку и нажимаете кнопку “Отладка”.

Вариант 2. На сайте отсутствует Open Graph

Протокол Open Graph обогащает возможности страницы в социальных медиа. Другими словами, это группа мета-тегов, рассказывающая социальным сетям о содержимом страниц, которыми вы делитесь. Благодаря этому ссылки из набора символов превращаются в понятные заголовки с картинками и пояснениями. Протокол Open Graph был создан Facebook’ом и сейчас регулируется Open Web Foundation.

Мета-теги Open Graph

og:title – заголовок страницы. Для него есть ограничение в 65 символов. Напишите что-то длиннее – текст будет обрезан.
og:type описывает тип объекта на странице (веб-сайт, блог, книга, фильм и т.д.).
og:image — URL изображения, характеризующего страницу.
og:url – адрес сайта.
og:description – краткое описание страницы длиной не более 300 символов.
og:video – если на странице есть видео, здесь прописывается URL.
og:locale – язык страницы (ru_RU, en_GB, de_DE, etc.).
og:site_name – название сайта.

Использование тегов Open Graph

Чтобы добавить протокол Open Graph, нужно выполнить следующие шаги:

Добавить «http://ogp.me/ns#» к тегу html.
Вставить мета-теги с их содержимым и атрибутами между тегами head.
Использовать min 4 мета-тега Open Graph, которые являются обязательными: og:title, og:type, og:image и og:url.
Расширить разметку, если на вашей странице много разнообразного контента.

Вот как будет выглядеть HTML-код.

Для отдельной записи:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Title of Your Article</title>
<meta property="og:title" content="Article on Anything by You" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.websiteaddress.com/article/" />
<meta property="og:image" content="http://www.websiteaddress.com/images/article_pic.jpg" />
...
</head>
...
</html>

Для сайта:

<meta property="og:title" content="$ENTRY_NAME$" />
<meta property="og:description" content="$SOCIAL_DESCRIPTION$" />
<meta property="og:image" content="$IMG_URL1$" />
<meta property="og:url" content="$REQUEST_URI$" />

Вариант для WordPress

<meta property="og:image" content="<?php the_post_thumbnail_url(); ?>">
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="600">
<meta property="og:title" content="<?php echo the_title(); ?>">
<meta property="og:url" content="<?php echo get_permalink(); ?>">

Второй вариант для WordPress/Код добавляем в functions.php

//Добавляем Open Graph в Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');

//Разрешаем добавить Open Graph Meta Info

function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '';
echo '';
echo '';
echo '';
echo '';
if(!has_post_thumbnail( $post->ID )) { //у записи нет миниатюры - используем изображение по-умолчанию
$default_image="/wp-content/uploads/2020/07/noimage.jpg";
echo '';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'big' );
echo '';
echo '';
echo '';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

//Конец Open Graph Meta Info

и WooCommerce.
Код добавляем в functions.php

function wh_doctype_opengraph($output) {
    return $output . '
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml"';
}

add_filter('language_attributes', 'wh_doctype_opengraph');


function wh_fb_opengraph()
{
    global $post;
    if (is_home() && is_front_page())
    {
        ?>
        <meta property="og:type" content="website" />
        <meta property="og:title" content="<?= get_bloginfo('name') ?>"/>
        <meta property="og:url" content="<?= get_site_url() ?>"/>
        <meta property="og:image" content="<?= get_site_url() . '/wp-content/uploads/myhome.jpg' ?>"/> <!-- replace it with your static image-->
        <?php
    }
    //for singles post page
    else if (is_single() && !is_product())
    {
        if (has_post_thumbnail($post->ID))
        {
            $img_src = wp_get_attachment_url(get_post_thumbnail_id($post->ID), 'medium');
        }
        //if featured image not present
        else
        {
            $img_src = get_site_url() . '/wp-content/uploads/post.jpg'; //replace it with your static image
        }
        ?>
        <meta property="og:type" content="article" />
        <meta property="og:title" content="<?= get_the_title($post->ID); ?>"/>
        <meta property="og:url" content="<?= get_the_permalink($post->ID); ?>"/>
        <meta property="og:image" content="<?= $img_src; ?>"/>
        <?php
    }
    //for singles product page only
    elseif (is_product())
    {
        $img_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'woocommerce_single_image_width'); //replace it with your desired size
        ?>
        <meta property="og:type" content="product" />
        <meta property="og:title" content="<?= get_the_title($post->ID); ?> by Pixel Komando"/>
        <meta property="og:url" content="<?= get_the_permalink($post->ID); ?>" />
        <meta property="og:image" content="<?= $img_url[0]; ?>"/>
        <?php
    }
    //for product cat page
    else if (is_product_category())
    {
        $term = get_queried_object();
        $img_src = wp_get_attachment_url(get_woocommerce_term_meta($term->term_id, 'thumbnail_id', true));
        if (empty($img_src))
        {
            $img_src = get_site_url() . '/wp-content/uploads/myproductcat.jpg'; //replace it with your static image
        }
        ?>
        <meta property="og:type" content="object" />
        <meta property="og:title" content="<?= $term->name; ?>" />
        <meta property="og:url" content="<?= get_term_link($term->term_id, 'product_cat'); ?>" />
        <meta property="og:image" content="<?= $img_src; ?>" />
        <?php
    }
    //for shop page
    elseif (is_shop())
    {
        ?>
        <meta property="og:title" content="<?= $term->name; ?>" />
        <meta property="og:url" content="<?= get_permalink(woocommerce_get_page_id('shop')); ?>" />
        <meta property="og:image" content="<?= get_site_url(); ?>/wp-content/uploads/myshop.jpg" /> <!-- replace it with your static image-->
        <?php
    }
    else
    {
        return;
    }
}

add_action('wp_head', 'wh_fb_opengraph', 5);