Você pode influenciar a forma com que o site é exibido quando compartilhado em redes sociais adicionando algumas linhas de código a cada página. Com isso, você pode oferecer prévias com informações mais valiosas do que as que normalmente disponibilizaria e atrair mais pessoas ao seu site.
TL;DR
- Use os microdados do schema.org para fornecer o título da página, uma descrição e uma imagem para o Google+.
- Use o Protocolo Open Graph (OGP) para fornecer o título da página, uma descrição e uma imagem para o Facebook.
- Use cartões do Twitter para fornecer o título da página, uma descrição, uma imagem e um ID do Twitter para o Twitter.
Você pode influenciar a forma com que o site é exibido quando compartilhado em redes sociais adicionando algumas linhas de código a cada página. Ajuda a gerar mais envolvimento quando se oferece prévias com informações mais valiosas do que as normalmente oferecidas. Sem isso, as redes sociais forneceriam apenas informações básicas, sem imagens ou outras informações úteis.
Qual dos dois você acha que tem mais chances de receber um clique? As pessoas são atraídas por imagens e sentem-se mais confiantes de que vão gostar do conteúdo quando veem uma prévia.
Quando alguém em uma rede social quer compartilhar o seu site com amigos, provavelmente escreveria alguma coisa que explicasse o quão incrível ele é antes de compartilhar. Mas, descrever um site pode ser trabalhoso e pode destacar coisas diferentes em relação ao ponto de vista do proprietário da página. Alguns serviços restringem o número de caracteres que os usuários podem adicionar em uma nota.
Adicionando os metadados corretos à sua página, você consegue simplificar o processo de compartilhamento para os usuários fornecendo um título, uma descrição e uma imagem atrativa. Isso significa que eles não precisam gastar tempo valioso (nem caracteres) descrevendo o link.
Use schema.org + microdados para fornecer fragmentos ricos no Google+
Os rastreadores usam vários métodos para analisar uma página e entender seu conteúdo. Usando microdados e o vocabulário do schema.org, você ajuda os sites sociais e mecanismos de pesquisa a entender melhor os conteúdos de uma página.
Veja um exemplo:
<div itemscope itemtype="http://schema.org/Article"> <h1 itemprop="name">Enjoy fireworks</h1> <p itemprop="description">Fireworks are beautiful. This article explains how beautiful fireworks are.</p> <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" /> </div>
Embora a maior parte dos metadados esteja embutida na seção "
" de uma página web, os microdados ficam onde há contexto.Adicione itemscope para definir o escopo dos microdados
Ao adicionar itemscope, você pode especificar a tag como um bloco de conteúdos sobre um
determinado item.
Adicione itemtype para definir o tipo do seu site
Você pode especificar o tipo de item usando o atributo itemtype junto com o
itemscope. O valor de um itemtype pode ser determinado de acordo com o tipo
de conteúdo da sua página da web. Veja um exemplo relevante
nesta página.
Adicione itemprop para descrever cada item usando o vocabulário
itemprop define propriedades de itemtype no escopo. Para fornecer
metadados em sites sociais, os valores comuns para itemprop são name, description
e image.
Valide fragmentos ricos
Para validar fragmentos ricos no Google+, você pode usar ferramentas como:
- Ferramenta de teste de dados estruturados - Webmaster Tools
Use o protocolo Open Graph (OGP) para oferecer fragmentos ricos pelo Facebook
O protocolo Open Graph (OGP) fornece ao Facebook os metadados necessários para permitir que as páginas da web tenham a mesma funcionalidade que outros objetos do Facebook.
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
<meta property="og:title" content="Enjoy Fireworks">
<meta property="og:description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
<meta property="og:type" content="website">
Quando incluídos na seção "
" da página, esses metadados fornecem informações de fragmento valiosas quando a página é compartilhada.Use tags meta og: com namespace para descrever os metadados
Uma tag meta é composta por um atributo property e um atributo content.
As propriedades e os conteúdos podem ter os seguintes valores:
| Propriedade | Conteúdo |
|---|---|
og:title |
O título da página da web. |
og:description |
A descrição da página da web. |
og:url |
O URL canônico da página da web. |
og:image |
URL de uma imagem vinculada à postagem publicada. |
og:type |
Uma string que indica o tipo da página da web. Você pode achar uma solução mais indicada para a sua página web aqui. |
Essas tags "meta" fornecem informações semânticas aos rastreadores dos sites sociais, normalmente do Facebook.
Saiba mais
Para saber mais sobre que coisas você pode anexar a uma postagem do Facebook, acesse o site oficial do protocolo Open Graph.
Valide fragmentos ricos
Para validar a sua marcação no Facebook, você pode usar ferramentas como:
Use cartões do Twitter para fornecer fragmentos ricos no Twitter
Os cartões do Twitter são uma extensão do protocolo Open Graph para Twitter. Eles permitem adicionar anexos de mídia, como imagens e vídeo, a tuítes com um link para a sua página da web. Adicionando os metadados corretos, os tuítes com links da sua página terão um cartão que contém os detalhes que você adicionou.
Use tags "meta" twitter: com namespace para descrever os metadados
Para fazer um cartão do Twitter funcionar, o seu domínio deve
ser aprovado e
conter uma tag "meta" que tenha twitter:card como o atributo name em vez de o atributo
property.
Veja um exemplo rápido:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
<meta property="og:title" content="Enjoy Fireworks">
<meta property="og:description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="agektmr">
Ao atribuir o ID do Twitter ao valor de twitter:site, o Twitter incorpora essa informação na postagem compartilhada para que as pessoas se sintam mais envolvidas com o proprietário da página.
Saiba mais
Para saber mais sobre os cartões do Twitter, acesse:
Valide fragmentos ricos
Para validar sua marcação o Twitter disponibiliza:
A prática recomendada
Com essas três opções, a melhor coisa que você pode fazer é incluir as três na sua página da web. Veja um exemplo:
<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
<!-- define microdata scope and type -->
<head itemscope itemtype="http://schema.org/Article">
<title>Social Site Example</title>
<!-- define ogp and itemprop of microdata in one line -->
<meta property="og:title" itemprop="name" content="Enjoy Fireworks">
<!-- define ogp image -->
<meta property="og:image"
content="https://developers.google.com/web/imgs/fireworks.jpg">
<!-- use link[href] to define image url for microdata -->
<link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
<!-- define ogp and itemprop of microdata in one line -->
<meta property="og:url"
content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
<!-- define ogp type -->
<meta property="og:type" content="website">
<!-- define twitter cards type -->
<meta name="twitter:card" content="summary_large_image">
<!-- define site's owner twitter id -->
<meta name="twitter:site" content="agektmr">
<!-- define description for ogp and itemprop of microdata in one line -->
<meta property="og:description" itemprop="description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<!-- general description (separate with ogp and microdata) -->
<meta name="description"
content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<style>
body {
margin: 2em;
}
</style>
</head>
Observe que os microdados e o OGP compartilham parte da marcação:
itemscopeestá na tagheadtitleedescriptionsão compartilhadas entre microdados e OGPitemprop="image"está usando a taglinkcom o atributohrefem vez de reutilizar a tagmetacomproperty="og:image"
Para fechar, não deixe de confirmar que sua página web é exibida como o esperado em cada rede social antes de publicar.