Open Graph Facebook does not show picture

Question

Guys, Facebook doesn’t automatically display the page image. For the image to appear, I have to go to the "Facebook Share Debugger", type the URL (it shows some errors) and after doing this the image appears automatically, always.

I’m using the following:

<!-- Open Graph Meta Tags -->
<meta property="og:description" content="Anuncie tudo, é grátis!" />
<meta property="og:image" content="http://www.bazar24h.com.br/fotoprod/<% = 
anomes & "/" & idusuario_vend & "/" & idfotoprod_vend & "-" & fotopadrao & 
"g.jpg" %>" />
<meta property="og:image:secure_url" 
content="https://www.bazar24h.com.br/fotoprod/<% = anomes & "/" & 
idusuario_vend & "/" & idfotoprod_vend & "-" & fotopadrao & "g.jpg" %>" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:locale" content="pt_BR" />
<meta property="og:site_name" content="Bazar 24h" />
<meta property="og:title" content="<% = titulo %>" />
<meta property="og:url" content="https://www.bazar24h.com.br/produto.asp? 
idprod=<% = idprod %>" />
<meta property="og:type" content="website" />
<!-- /Open Graph Meta Tags  -->

I have the mobile version and the desktop version of the site (not in the directory m but files in the same directory preceded by m.). One of the errors that appears is "It was not possible to resolve the canonical URL because the redirect path contains a cycle." I imagine it’s because it has two versions.

I’ve been racking my brain for a long time. I appreciate your help.

Answer 1

The og:image meta tag will not recognize the dynamic URL. Its use, as a meta tag, is to share an image URL already defined in the DOM upload.

I suggest, for this case, create a JS function that mounts the URL at the time of the event and share via Sharer.php. Example:

//Share Facebook
$('a.compartilhar').click(function(){
    var _title    = $(this).find('.title').html();
    var _summary  = $(this).find('.summary').html();
    var _url      = 'http://www.bazar24h.com.br/fotoprod';
    var _imageRel = $(this).find('img').attr('src');

window.open("http://www.facebook.com/sharer.php?s=100&p[title]="+_title+"&p[summary]="+_summary+"&p[url]="+_url+"&p[images][0]="+_imageRel,'sharer','toolbar=0,status=0,width=626,height=436');

    return false;
});

This example is in jquery and surely there may already be better ways, but it is enough to explain the logic of using the Facebook URL Sharer.php passing dynamically the values to be shared.