Logotipo Design Interativo

Open Graph e Tamanhos de Imagens para Link Post no Facebook


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


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

Resultado
facebook-post

 

Tamanhos das imagens do Facebook

 

facebook-image-dimensions

Comentários
  1. Você ‘upou’ a imagem em PNG mas especificou que ela é um jpeg, está certo?

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade