O que é Opengraph e como usá-lo para SEO

Faça uma avaliação
Gratuita

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form
O que é Opengraph e como usá-lo para SEO
Conteúdo Desenvolvido por:
comercial@webceo.br.com

O que é Opengraph e como usá-lo para SEO

Você pode aparecer com grande nas redes sociais com informações que você já tem no seu website, então por que não aproveitar???

O Facebook é a rede social mais utilizada no Brasil. Cada brasileiro passa, em média, 5 horas por dia conectado com amigos, parentes, grupos e fan pages dentro do ambiente criado por Mark Zuckerberg.

Você já deve ter visto alguma publicação que tinha grades imagens, textos, descrições e a quantidade exata de caracteres que praticamente tomavam conta do seu celular ou Desktop. Se você se perguntou como aquilo funcionava, a resposta é simples: Facebook Open Graph.

O que é o Facebook Open Graph?

               O Facebook Open Graph (ou só Open Graph) é um conjunto de meetadados que o Facebook procura na sua página para destacar quando alguém curtir uma página sua ou colocar uma URL sua no seu feed.

               Basicamente, o Open Graph transforma seu conteúdo em seções. Muito parecido com o Rich Snippets do Schema.org que já falamos aqui no site do WebCEO, o Open Graph requer que você separe determinadas partes da sua página e informe que tipo de informação é aquela.

               Por exemplo: você pode dizer que http://www.webceo.br.com/open-graph é a URL de um post,  que a imagem logo.png é o seu logo e que Fulano da Silva é o autor do post do blog ou da notícia do site e que o título do post é “Como o Open Graph pode ajudar seu SEO”.

               Todas as tags seguem esse modelo abaixo:

<head>  <meta property="OG TAG" content="VALOR">

</head>

Então o código do exemplo acima ficaria dessa forma:

<head>

 <meta property"og:url" content="http://www.webceo.br.com/open-graph ">

 <meta property="og:title" content="Como o Open Graph pode ajudar seu SEO.">

<meta property="og:site_name" content="WebCEO">

<meta property="og:author" content="Fulano da Silva">

</head>

Com essas metatags pré-definidas você pode fazer com que cada Like conquistado no seu blog se transforme em basicamente uma timeline da pessoa que admirou seu conteúdo. Assim, aquela barra flutuante de sinais sociais nos seus posts de blog terá muito mais poder do que possui hoje.

Como Utilizar o Facebook Open Graph?

               Existem muitas formas de conseguir integrar o conteúdo do seu site com o Facebook Open Graph. Plugins de Wordpress, módulo de Magento ou complementos de Prestashop fazem com que essa tarefa fique mais fácil.

               Mas, para entender a teoria por trás do trabalho desses plug-ins, é possível que comecemos uma correlação entre as metatags do SEO com as metatags do Open Graph. Ambas metatags querem mostrar o melhor da sua página para os usuários, seja na Timeline do Facebook ou nas SERP’s do Google.

               Por isso, para utilizar o Facebook Open Graph você pode começar respondendo às perguntas abaixo:

1)      Qual é a URL otimizada dessa página?

<meta property="og:url" content="SUA URL otimizada para o Google vem aqui">

 

2)      Qual é o Title dela no Google?

<meta property="og:title" content="O Title do Google pode vir aqui">

 

3)      Qual a Description dela para o Google?

<meta property="og:description" content="Minha boa descrição para intrigar os usuários.">

 

4)      Qual é o nome do site?

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

 

5)      Essa página contém imagens? Se sim, quais são e quais os Alt e Titles dela?

<meta property="og:image" content="www.meusite.com.br/imagem1.jpg">

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

<meta property="og:image:width" content="800"> /** PIXELS **/

<meta property="og:image:height" content="600"> /** PIXELS **/

 

<meta property="og:image" content="www.meusite.com.br/imagem2.jpg">

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

<meta property="og:image:width" content="800"> /** PIXELS **/

<meta property="og:image:height" content="600"> /** PIXELS **/

 

O importante aqui para SEO é definir Alts e Titles para todas as imagens e descrevê-las com clareza para Facebook e Google indexá-las com agilidade.

Se sua imagem for pequena, você aparecerá com o thumbnail menor, como no exemplo abaixo da imagem central:

 

 

6)      Qual é a categoria do meu site?

<meta property="og:type" content="article">

 

7)      Qual a categoria dessa página dentro do meu site?

<meta property="article:section" content="Seção do artigo">

<meta property="article:tag" content="Tags do artigo">

Se você quer ver mais opções, o Facebook tem uma extensa documentação sobre o assunto. Você pode aprender mais nos sites abaixo:

·         site do Open Graph Project: http://ogp.me/  

·         central de ajuda do Facebook:https://developers.facebook.com/docs/sharing/opengraph/;

Ferramentas para auxiliar com o Facebook Open Graph

O próprio Facebook tem uma ótima ferramenta para auxiliar os webmasters conseguirem trazer melhores resultados na timeline dos usuários: o Facebook Debugger.

https://developers.facebook.com/tools/debug/

Basta jogar sua URL lá antes de publicá-la no Facebook e ver como aparecerá para seus seguidores e os amigos de quem compartilhar seu site.

O Google também ajuda a entender quais erros suas páginas podem possuir antes mesmo de você publicar no Facebook: o Google Structured Data Testing Tool.

https://search.google.com/structured-data/testing-tool

Ele é parte de uma série de ferramentas analíticas do Google que ajudam desenvolvedores e webmasters a conseguir agilizar o trabalho de análise. Basicamente ele pega o código fonte e procura por erros de malformação de código e já identifica as metatags quebradas ou mal formadas.

Como o Facebook Open Graph influencia o SEO?

Depois de ver todos os formatos e técnicas de ter metatags otimizadas para o Facebook Open Graph, vem a pergunta: o Open Graph também pode auxiliar o SEO?

A resposta é sim, mas indiretamente. Uma página bem montada pode utilizar todas as informações do Google no Facebook e vice-versa. Você cria uma copy interessante para o Facebook com imagem, texto, CTA e URL otimizadas. Por que não utilizar esses parâmetros também no Google?

A mesma coisa aconteceria ao contrário: você já tem uma lista de URL’s otimizadas com TItles e Descriptions bacanas e Rich Snippets definidos. Com apenas alguns passos extras e um desenvolvedor, você pode escalonar isso para todas suas URL’s terem destaque no Facebook, basta puxar as informações que já foram criadas.

Poderíamos fazer da seguinte forma:

<title>Mesma informação do Facebook </title>

<meta name=”description” content=”mesma informação do Facebook” />

<meta property="og:url" content="SUA URL otimizada para o Google vem aqui, na url OG do Facebook">

Para as imagens, você pode aproveitar que terá que otimizá-las para o Facebook e já trata-las para o Google também, aparecendo em até 30% a mais de buscas no Google Images.

Com essa integração de duas vias, você pode fazer com que seu site seja duplamente otimizado com metade do trabalho!

Gostou do artigo? Quer ver mais artigos técnicos como esse? Comente abaixo e compartilhe no Facebook para ver um ótimo exemplo do Facebook Open Graph em ação!

Ultimas Publicações do Autor

WEBCEO BRASIL

Ultimas Publicações

Conheça nosso programa de Canais

Se Você é uma Agência, Profissional de Marketing ou SEO, Vou Ajuda-lo a Conhecer As Ferramentas WebCEO.

Marcos Custódio,
Country Manager & Partnerships
Web CEO Brazil