Utilizando as metatags de OpenGraph
Aprenda como prepara o compartilhamento do conteúdo do seu site no Google, Facebook e Twitter de forma eficaz utilizando as metatags do openGraph
por Wolmir Cezer Garbin - - SEO - TUTORIAL Última atualização em: | 13310 Visualizações
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 apropertye ocontentque 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:titlese refere ao título da página e oog:site_nameserve 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 empixels, 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_TERRITORYpor isso adicionamospt_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.
Não esqueca de deixar suas dúvidas nos comentários e compartilhar este post.
