Open Graph Facebook does not show image

Question

Open Graph Facebook does not show image

Dear, Facebook does not show the page image automatically. For the image to appear, I have to go to the Facebook "Share Debugger", enter the URL (it shows some errors) and after doing this the image appears automatically, always.

I am 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 (they are not in the m directory but files in the same directory preceded by M.). One of the errors that appears is " was not it is possible to resolve the canonical URL because the Redirect Path contains a loop."I imagine it is because it has 2 versions.

I've been breaking my head for quite a while. I appreciate help.

0

facebook meta-tags open-graph

Author: Dirceu Bueno, 2019-11-07

Source

1 answers

score 0 · 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 load.

I suggest, for this case, to create a JS function that mounts the URL at the time of the event and does the 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 for sure there should already be better ways, but it is enough to explain the logic of using the Facebook sharer URL.php passing dynamically the values to be shared.