O Open Graph nada mais é do que metadados que podemos incorporar em nossas páginas entre as tags head do html, sua função é muito importante para termos melhores resultados quando compartilhamos links nas redes sociais principalmente para o Facebook.
Utilizando os metadados podemos fornecer informações para o Facebook com dados pré cadastradas no html, com isso as publicações ficam bem apresentadas o que garante melhor performance para atrair o público.
Também podemos dizer que agora as páginas estão semanticamente corretas para as redes sociais já que elas passam a entender melhor o que aquele link apresenta e qual o conteúdo relevante para se apresentar na publicação.
Mas além desses dados também é importante definir o tamanho e o formato correto da imagem já que a imagem é um fator importante na decisão do usuário clicar ou não clicar no post.
Tamanho da Imagem
A imagem que você quer que apareça quando colocamos o link no Facebook, deve estar em uma pasta no servidor do site, para cada página do site deve se ter uma imagem diferente a não ser que você queira que qualquer link apareça com a mesma imagem.
As medidas correta para se ter uma ótima qualidade e não ter cortes é de 1200X628 pixels com a extensão .png.
Parece estranho uma medida tão grande mas é a medida que realmente funciona sem que se tenha cortes e o Facebook não estique sua imagem mesmo sabendo que o Link Post do Facebook tem uma medida de 470x246px, e a extensão deve ser sempre png quando se utiliza jpg a imagem fica com baixa qualidade. No fim deste artigo estou publicando um infográfico mostrando todos os tamanhos de imagens do Facebook.
Metatags Open Graph com a Propriedade og:
É muito simples, as tags são fáceis de entender, passamos as seguintes informações:
Idioma
Tipo de Mídia
Local onde esta hospedada a imagem a ser publicada quando inserimos o link no post
Tipo de Imagem
Tamanho da Imagem
Nome do Site
Titulo da Página
Descrição da Página
URL da página
Exemplo completo
Se você quiser se aprofundar mais no assunto pode acessar o site do projeto neste link.
Para fazer um teste se tudo esta inserido corretamente no html você pode utilizar esta ferramenta de Debug do Facebook
Tamanhos das imagens do Facebook
Gostou desse artigo? Dá uma forcinha!
A única forma que consigo remunerar meu site é através de anúncios, não esqueça de conferir!