Viber, Telegram
+38 066 7342127
Call me
+372 55916393

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

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

Довольно часто бывает, что при публикации ссылки на 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);
 

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься.