Open Graph e Tamanhos de Imagens para Link Post no Facebook


Tamanho-das-imagens-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

<meta property="og:locale" content="pt_BR" />

Tipo de Mídia

<meta property="og:type" content="website" />

Local onde esta hospedada a imagem a ser publicada quando inserimos o link no post

<meta property="og:image" content="http://www.seusite.com.br/imagens/facebook.png" />

Tipo de Imagem

<meta property="og:image:type" content="image/jpeg" />

Tamanho da Imagem

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">

Nome do Site

<meta property="og:site_name" content="Nome do Site">

Titulo da Página

<meta property="og:title" content="Titulo da Página />

Descrição da Página

<meta property="og:description" content="Descrição da Pagina" />

URL da página

<meta property="og:url" content="http://www.seusite.com.br" />

Exemplo completo

<meta property="og:locale" content="pt_BR" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.seusite.com.br/imagens/facebook.png" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
<meta property="og:site_name" content="Nome do Site">
<meta property="og:title" content="Titulo da Página" />
<meta property="og:description" content="Descrição da Página" />
<meta property="og:url" content="http://www.seusite.com.br/" />

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





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

Um comentário em “Open Graph e Tamanhos de Imagens para Link Post no Facebook

  1. Flávio Raniere 7 de junho de 2016 18:34

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

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>