Utilizando as metatags de OpenGraph

O tutorial para compartilhar o conteúdo do seu site no Facebook de forma eficaz.

por Victor "reidark" Matias 23/01/2014 ~ 4 min. / 700 palavras

Creio que você, usuário frenético de facebook já tenha visto algo mais ou menos assim na sua linha do tempo:

Esse tipo de compartilhamento é devido ao uso das meta tags que o próprio facebook oferece aos desenvolvedores, as famosas metas :og ou Open Graph. Elas existem com o intuito de especificar metas no <head> para sua publicação no facebook ser a mais agradável e apresentável possível.

O que você precisa saber e fazer

A syntax para essa tag é básica:

A seguir veremos as tags que podemos especificar para modificar nossa publicação:

Locale

Nessa tag definimos basicamente o local/idioma da publicação. O valor default dela é en_US. É interessante o idioma dessa tag acompanhar o mesmo que está definido dentro do <html lang="">.

Eu, particularmente, não uso pt_BR para publicações no facebook, e para ser bem sincero não encontro muitas pessoas que usam. Porém, a documentação do Open Graph diz para optarmos pelo idioma em qual o site, artigo ou portfólio está escrito.

URL

A tag URL é usada para definir o link destino da publicação. Ela também é usada para definir o tanto de  likes e shares que uma página possui, sem desmembrar nenhum dado perdido por ai, como um like ali e um like aqui. Tudo é “somado” na URL especificáda.

Title

No HTML puro, a forma que usamos para especificar, tanto o nome a página quanto o nome do site é a tag <title>. As meta tags:og vão um pouco a mais que isso. É fornecido 2 tags para usar em relação ao título da página:

<property="og:title"> Específica o título da página, assim como essa: Utilizando as meta tags do Facebook.

<property="og:site_name"> Especifica o nome do site: Tableless.

Description

Acho que essa tag não necessita de muita explicação. É basicamente a descrição da sua postagem. Mas é importante ressaltar de colocar um bom texto chamativo e interessante, para o usuário ver a publicação, gostar e acessar.

É interessante a sua descrição não ultrapassar o máximo de 200 caracteres.

Images

A syntax mostrada logo a cima seria a ideal para um bom compartilhamento. Lembre-se que imagens são a porta de entrada. Você pode ter um bom título, uma boa descrição, mas nada se compara com o impacto que uma imagem provoca no usuário.

Colocando apenas a URL da imagem já é necessário para que sua postagem a apresente. Porém, quando você não especifica o tamanho da imagem, a miniatura vai ser estabelecida com as dimensões originais, e assim o próprio facebook vai decidir se o thumbnail vai ser:

Pequeno

Isso acontece porque ela não é grande o suficiente para ser um Thumbanil de modelo grande, e caso tentássemos “esticar” a imagem para transformar num thumbanil grande a qualidade ficaria MUITO ruim. Mas não se esqueça, se você especificar na tag uma dimensão pequena, mesmo que sua dimensão original seja grande, ela vai aparecer pequena, como no modelo a cima.

E caso a imagem seja grande, ou se você especificou uma dimensão grande na tag, ela irá aparecer assim:

Os formatos que o Facebook aceita é: JPEG, PNG, GIF, e BMP. A dica que eu dou é sempre optar pelo JPG e sempre especificar o formato e as dimensões da imagem. Isso faz o Facebook “entender melhor” o que você está enviando.

Type

Define o tipo do seu site. O valor default desse atributo é o website. Geralmente é isso mesmo que é usado, o valor website. Mas, caso o seu conteúdo for um artigo, você pode optar pela tag article e assim especificar novos valores (o próprio Tableless faz isso.)

Escopo Final

Especificando todas as meta tags:og o seu cabeçalho tem que ficar preenchido mais ou menos dessa maneira:

Lembre-se que essa forma de publicação no Facebook atrai pessoas para seu site, seja tanto para ler um artigo, ou apenas dar uma olhada, e assim acaba sendo uma espécie de SEO para rede sociais. Então não esqueça de acrescentar isso ao seu site, vai te ajudar 😉

Tenha em mente que isso é o básico, mas é essencial.

Caso você queira pular de ponta nessas meta tags Open Graph, entre aqui e se divirta 🙂

Eu esqueci alguma coisa? Então me ajude, comente aqui em baixo.

Abraços!