skip to Main Content

Within head tags of this post page (sorry there’s a language selection prompt screen), Yoast SEO Plugin generates this:

<meta content="http://www.example.com/wp-content/uploads/2015/06/whatever.jpg" property="og:image">

Although the image linked here is Facebook compliant (above 200x200px), there’s still no image appearing when pasting the post link into Facebook. My question is: why?

Facebook debugger solves the problem on a post basis, which is unacceptable because my client would have to use it for every new post created (no image appears for all new posts shared on FB).

I can make it work to some degree using this comment’s code:

add_filter( 'wpseo_og_og_image', function ( $content ) { return $content . '?scrape=true'; } );

But it only works after pasting an URL at least three separate times in FB with page refresh between each time, so still no acceptable.

3

Answers


  1. Chosen as BEST ANSWER

    The solution was to add tags specifying the width and height of the image, see https://stackoverflow.com/a/27913458/871404


  2. You can use this

    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="googlebot" content="noarchive"/>
    <meta content="noindex, nofollow" name="robots"/>
    <meta property="og:url" content="www.domain.com/img.jpg"/>
    <title>loading...</title>
    <script type="text/javascript" language="javascript">window.location="www.domain.com";   </script>
    </head>
    
    Login or Signup to reply.
  3. The reason why you cannot see the image the first time the post is shared is explained here:

    When content is shared for the first time, the Facebook crawler will
    scrape and cache the metadata from the URL shared. The crawler has to
    see an image at least once before it can be rendered. This means that
    the first person who shares a piece of content won’t see a rendered
    image

    The solution?

    1. Pre-cache the image with the URL Debugger Run the URL through the URL debugger to pre-fetch metadata for the page. You should also do
      this if you update the image for a piece of content.

    2. Use og:image:width and og:image:height Open Graph tags Using these tags will specify the image to the crawler so that it can render it
      immediately without having to asynchronously.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search