Clever Geek Handbook

Og: Image doesn't work except when I try to use "Open Graph Object Debugger"

I have a site with all the tags og:image

set correctly and it doesn't work except when I use the Open Graph Object Debugger which shows me the expected preview.

Step by step (with a picture for each step):

If I take a non-cached url like ... http://club.ad/andorra-la-vella/ca/activitat/activitats-infantils and I try to share it on facebook, this is what I get:

og: image without cache

As you can see, there is no image in the preview. In this case, the first thing I do is check if the installation is correct og:image

. By checking the source code of this link, we can read:

<meta property="og:image" content="http://club.ad/files/thumbs/activities-illustrative/10557110_m.jpg" />

And if we check the url of the image, we get this:

illustrative activity image http://club.ad/files/thumbs/activities-illustrative/10557110_m.jpg

The tag og:image

is inside the main tag, so everything looks fine. Here, when I go to Facebook Open Graph Object Debugger and I try the link that was previously checked.

The first time he says that this URL hasn't been cached, but it shows the preview pretty well:

Open Graph Object Debugger

Now that the request was made from here, if I go back to facebook, the preview is loaded correctly:

enter image description here

And if we go back to the Open Graph Object Debugger and we click on "Fetch new scrape information", no errors and warnings are displayed there:

enter image description here

So what happened to my site? Or what's wrong with facebook?

If you want to check it yourself, grab any URL from the website activity index (there are some that have been checked and thus will return cached content):

http://club.ad/andorra-la-vella/ca/activitats (click on any activity image)

Thanks in advance for any help :)

+3


source to share


2 answers


Try specifying image dimensions in OG meta tags.

https://developers.facebook.com/docs/sharing/best-practices#precaching :



There are two ways to avoid [image not showing in first share] and have images displayed on first Like or Share:

  • Pre-cache image using URL debugger [...]

  • Use og:image:width

    and og:image:height

    Open Image Tags
    Using these tags will define an image for the crawler so that it can render it immediately, without asynchrony. (Sic)

+3


source


From: http://developers.facebook.com/docs/sharing/best-practices#precaching

When the shared content is first used, the Facebook crawler will flush and cache metadata from the shared URL. The crawler must be at least once before it can be displayed. This means that the first person to share a piece of content will not see the Image:

I am using this script to refresh facebook cache before user splits the page:



<script>
        var fbShareLink = '<yourLink>';
        var d = new Date();
        $.post(
            'https://graph.facebook.com',
            {
                id: fbShareLink,
                scrape: true
            },
            function(response){
                console.log(response);
            }
        );
</script>

I currently do this every time the page is loaded because my images are live renderd and contain the current time.

There might be a better solution for static images. (Calling facebook from backend when new content is added)

+2


source






More articles:


All Articles