Utilizando as metatags de OpenGraph

Postado em por Wolmir Cezer Garbin em SEO | 76 Visualizações
Última atualização em:

Aprenda como prepara o compartilhamento do conteúdo do seu site no Google, Facebook e Twitter de forma eficaz utilizando as metatags do openGraph

Você já se perguntou como alguns compartilhamentos de páginas no Facebook ou no Google+ mostram uma imagem, texto e o título do site corretamente? Isso é resultado do uso do metas :og ou OpenGraph em suas páginas.

O protocolo Open Graph permite que qualquer página da Web se torne um objeto graficamente rico no meio social.

O seu funcionamento é simples e se bem aplicado gera bons resultados. Para utilizar basta atribuir determinadas metatags dentro do <head> do seu html.

Por onde começar?

Para iniciar vamos mostrar a sintaxe, veja:

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

Note que é basicamente utilizar a tag <meta>, indicando qual a property e o content que ela terá.

Sabendo isso, agora podemos falar sobre cada propriedade para entender melhor.

A parte básica

Vamos iniciar mostrando as metatags básicas para o seu funcionamento que são:

og:title
og:type
og:image
og:url

Vamos estudar cada uma.


Meta og:title e og:site_name


No html o título da página aparece entre a tag title, isso inclui o título da página e o nome do site. Para especificar essas informações utilizando as marcações do og podemos utilizar da seguinte forma:

<meta property="og:title" content="Utilizando as metatags de OpenGraph">
<meta property="og:site_name" content="Receitas de Código">

Note que temos as informações separadas og:title se refere ao título da página e o og:site_name serve para adicionar o nome do site.


Meta og:type


Define o tipo do seu site, seu atributo default é website, caso seja um artigo pode utilizar article no seu valor. Veja o exemplo:

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

Note que dependendo do tipo que especificar outras propriedades podem ser necessárias, como é o caso do article, onde podemos informar mais o autor, sessão, tags e data de publicação.

<meta property="og:type" content="article">
<meta property="article:author" content="Wolmir Cezer Garbin">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Facebook, tags, og, open graph">
<meta property="article:published_time" content="2017-06-15 11:58:08.0">

Estas foram as informações do Open Graph desta publicação aqui no Receitas de Código.


Meta og:image


As informações de Open Graph para imagem, permite que mais informações para renderização sejam enviadas juntamente com o caminho da imagem em sí. Informações estas que ajudaram as redes sociais montarem estruturarem as publicações de compatilhamento.

Veja o exemplo:

<meta property="og:image" content="http://receitasdecodigo.com.br/seo/image.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 **/

Note que neste caso está sendo configurado a imagem, o tipo da imagem que suporta: JPEG, PNG, GIF e BMP, mas indico utilizar o formato .jpg. E também é configurado o tamanho da imagem em pixels, recomendo sempre configurar o tamanho real das imagens para não ter distorções e ficar mais atrativo o compartilhamento.


Meta og:url


A meta URL é utilizada para informar o link de destino da publicação. Ainda funciona como um identificador da página para contagens e métricas de compartilhamento.

Sua sintaxe é:

<meta property="og:url" content="http://www.meusite.com.br/minha-pagina">

Outras metatags ainda podem ser utilizadas opcionalmente, caso tenha utilidade para você, são elas:


Meta og:locale e og:locale:alternate


Utilizada para indicar qual o idioma principal do site/publicação, seu valor default é en_US. Uma dica importante, procure sempre utilizar o idioma desta tag igual ao idioma do site, definido em <html lang="">.

Sua sintaxe é:

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

Note que o formato padão para o valor é language_TERRITORY por isso adicionamos pt_BR.

Opcionalmente, você ainda pode informar locais alternativos, informando através de uma ou mais metatags utilizando a seguinte sintaxe:

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

Meta og:description


Faz referencia a uma breve descrição do conteúdo de sua página. Procure escrever no máximo 200 caracteres e crie um texto que atraia a atenção do usuário para sua publicação.

<meta property="og:description" content="Aprenda como prepara o compartilhamento do conteúdo do seu site no Google, Facebook e Twitter de forma eficaz utilizando as metatags do openGraph">

Resultado completo

Como resultado final, aqui no Receitas de Código utilizamos todas estas tags:

<meta property="og:title" content="Utilizando as metatags de OpenGraph">
<meta property="og:site_name" content="Receitas de Código">
<meta property="og:description" content="Aprenda como prepara o compartilhamento do conteúdo do seu site no Google, Facebook e Twitter de forma eficaz utilizando as metatags do openGraph">
<meta property="og:url" content="http://receitasdecodigo.com.br/seo/utilizando-as-metatags-de-opengraph">
<meta property="og:type" content="article">
<meta property="article:author" content="Wolmir Cezer Garbin">
<meta property="article:section" content="SEO">
<meta property="article:tag" content="Facebook, tags, og, open graph">
<meta property="article:published_time" content="2017-06-15 11:58:08.0">
<meta property="og:image" content="http://receitasdecodigo.com.br/seo/image.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:locale" content="pt_BR">

Quer saber mais sobre Open Graph?

Se quiser saber mais sobre Open Graph, deixe nos comentários sua dúvida que o ajudaremos a entender, ou se preferir, acesse o site http://ogp.me/, lá tem mais informações sobre outras tags opcionais que pode enriquecer mais o compartilhamento do seu conteúdo.

Wolmir Cezer Garbin

Wolmir Cezer Garbin


Sou formado em Desenvolvimento de Sistemas para Internet pela faculdade Mater Dei e Pós graduado em Desenvolvimento de sistemas em Java pela UTFPR. Trabalho a mais de 9 anos com desenvolvimento em Java, Android e Web utilizando as principais tecnologias do mercado. Atuo como professor na faculdade Mater Dei, programador na Garbo Software e criador do Receitas de Código.

Ver mais

Posts relacionados


Você sabe o que é sitemap? Precisa utilizar sitemap em seu site e não sabe como? Neste post vou mostrar o que é sitemap e como deve utilizar em seu web site.

Ler mais

Code Conference

Esta é uma conferência de código realizada na cidade de Pato Branco para dissiminar tendências e informações sobre programação e novas tecnológias

Veja mais sobre o Code Conference

Publique seu post no Receitas de Código

Agora você pode publicar seu post no Receitas de Código e compartilhar seu conhecimento com muitas pessoas!

Quero publicar