Descoberta social

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.

Eiji Kitamura

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.

Resumo

  • 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 como seu site aparece quando compartilhado nas mídias sociais adicionando algumas linhas de código a cada página. Isso pode ajudar a aumentar o engajamento oferecendo prévias com informações mais valiosas do que as que normalmente estariam disponíveis. Sem isso, os sites de redes sociais vão fornecer 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.

Com a marcação apropriada: temos o título correto, uma descrição breve e uma imagem. Adicionar esses itens pode ajudar a aumentar o engajamento.
Com a marcação apropriada: temos o título correto, uma descrição breve e uma imagem. Adicionar esses itens pode ajudar a aumentar o engajamento.
Sem a marcação correta, apenas o título da página é incluído.
Sem a marcação correta, apenas o título da página é incluído.

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. No entanto, descrever um site pode ser complicado e pode passar despercebido do 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 às suas páginas, você consegue simplificar o processo de compartilhamento para os usuários fornecendo um título, uma descrição e uma imagem atraente. Isso significa que eles não precisam passar tempo (nem caracteres) descrevendo o link.

Usar schema.org + microdados para fornecer rich snippets no Google+

Os rastreadores usam vários métodos para analisar uma página e entender o conteúdo dela. Usando microdados e o vocabulário do schema.org, você ajuda os sites sociais e mecanismos de pesquisa a entender melhor o conteúdo da 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 maioria dos metadados esteja incorporada à seção "head" de uma página da Web, os microdados ficam onde há contexto.

Adicionar itemscope para definir o escopo dos microdados

Ao adicionar itemscope, você pode especificar a tag como um bloco de conteúdo sobre um item específico.

Adicione itemtype para definir o tipo do seu site

Você pode especificar o tipo de item usando o atributo itemtype com o itemscope. O valor de um itemtype pode ser determinado de acordo com o tipo de conteúdo na sua página da Web. Você pode encontrar um exemplo relevante em esta página.

Adicionar itemprop para descrever cada item usando o vocabulário do schema.org

itemprop define propriedades para itemtype no escopo. Para fornecer metadados a sites de redes sociais, os valores típicos de itemprop são name, description e image.

Validar rich snippets

Para validar fragmentos ricos no Google+, você pode usar ferramentas como:

Ferramenta de teste de dados estruturados

Use o protocolo Open Graph (OGP) para oferecer fragmentos ricos no 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 "head" da página, esses metadados fornecem informações de snippet ricas quando a página é compartilhada.

Usar tags meta com namespace og: para descrever metadados

Uma tag meta consiste em um atributo property e um atributo content. As propriedades e o conteúdo 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 anexada à postagem compartilhada.
og:type Uma string que indica o tipo da página da Web. Encontre uma solução mais adequada para sua página da Web neste link.

Essas metatags fornecem informações semânticas aos rastreadores de sites sociais, como o Facebook.

Saiba mais

Para saber mais sobre o que você pode anexar à postagem no Facebook, acesse o site oficial do protocolo Open Graph.

Validar rich snippets

Para validar sua marcação no Facebook, você pode usar ferramentas como:

Use cartões do Twitter para fornecer fragmentos ricos no Twitter

Os cards do Twitter são uma extensão do protocolo Open Graph aplicável ao Twitter (em inglês). Eles permitem que você adicione anexos de mídia, como imagens e vídeos, aos tweets com um link para sua página da Web. Adicionando os metadados corretos, os tuítes com links da sua página terão um card que inclui os detalhes que você adicionou.

Usar metatags com namespace twitter: para descrever metadados

Para que um card do Twitter funcione, seu domínio precisa ser aprovado e conter uma tag "meta" que tenha twitter:card como o atributo name em vez do 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.

Cartão do Twitter.

Saiba mais

Para saber mais sobre os cards do Twitter, acesse:

Validar rich snippets

Para validar sua marcação, o Twitter disponibiliza:

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:

  • itemscope está localizado na tag head
  • title e description são compartilhados entre microdados e OGP
  • itemprop="image" está usando a tag link com o atributo href em vez de reutilizar a tag meta com property="og:image".

Por fim, confirme se a página da Web aparece como esperado em cada rede social antes de publicar.