Opengraph’s metatag og:image does not take the link-specific image

Asked

Viewed 3,842 times

2

I have the following snippet of code, but facebook is randomly picking up another image that is not part of the specific link to this, the og:image as below.

<meta property="og:type" content="website">
<meta property="og:title" content="Acabamentos e Revestimentos">
<meta property="og:description" content="Acabamentos e Revestimentos Guarapari é o Guia Comercial de Guarapari com as melhores opções de Acabamentos e Revestimentos do mercado local.">
<meta property="og:url" content="http://www.guaraparivirtual.com.br/acabamento-e-revestimento-guarapari">
<meta property="og:image" content="http://www.guaraparivirtual.com.br/imagens/guia-comercial-rede-social.jpg">
<meta property="fb:app_id" content="966242223397117">

All other information appears perfectly, just does not catch the image specified in the link og:image.

html5 facebook-graph-api

  • What is the size of the image in px? Have you tried not using http with vc did and put the image path directly in the folder?

  • Maybe it’s cache, put your website address in the tool Debug from Facebook, it updates the image cache.

  • @hugocsl I set the direct path of the image and nothing.

  • @Lucasguima I used the Debug tool, but it didn’t solve.

  • Dear take a look at this answer https://answall.com/questions/292925/problemas-com-formata%C3%A7%C3%A3o-miniatura-de-links/292949#292949

  • @hugocsl When I go to Facebook Debug the meta tag appears with a url totally different from the one I put.

Show 1 more comment

1 answer

1


The problem is in the statement of !DOCTYPE of the pages of the site:

           inválido
              ↓
<!DOCTYPE html!>

The exclamation ! after the html is invalid, and with that the Facebook API is not validating the page’s HTML, whereas the meta tags are not in the <head>, as shown in the Open Graph Object Debugger:

inserir a descrição da imagem aqui

With this, the tool randomly chooses a page image.

See also the error pointed at W3C HTML validator:

inserir a descrição da imagem aqui

Solution: withdraw the ! and leave only <!DOCTYPE html>, which is the correct statement for the HTML5 standard.

To test, open this debugger link and you will see the correct image:

https://developers.facebook.com/tools/debug/sharing/? q=http%3A%2F%2Fdvdteste.hospedagemdesites.Ws%2Fstack%2Ft6.php

The link above the debugger points to this test page I created by copying the source code from your site and fixing the issue.

  • 1

    Thank you very much! It worked, everything working now perfectly.

Browser other questions tagged html5 facebook-graph-api

You are not signed in. Login or sign up in order to post.