Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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.

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.

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 envolvimento.
Sem a marcação correta, só 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. 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.

Saiba mais

Esses microdados fornecem informações semânticas aos rastreadores, normalmente do Google+ e da Pesquisa do Google. Para saber mais sobre fragmentos e renderização no Google+, leia os documentos abaixo:

Valide fragmentos ricos

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

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 Google+ e 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:

  • itemscope está na tag head
  • title e description são compartilhadas 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"

Para fechar, não deixe de confirmar que sua página web é exibida como o esperado em cada rede social antes de publicar.