Eventos

Novo! O schema.org permite marcar uma variedade muito maior de tipos de item nas suas páginas, usando um vocabulário que Google, Microsoft e Yahoo! conseguem entender. Saiba mais. O Google ainda oferece suporte a sua marcação de rich snippets existente.

Sobre as informações de evento

Quando as informações de evento estão marcadas no corpo de uma página da web, o Google pode identificar e disponibilizar essas informações para serem usadas nas páginas dos resultados de pesquisa e em outras propriedades do Google. Informações como título, data e local do evento podem ajudar os usuários a decidir em quais páginas clicar nos resultados de pesquisa.

imagem de um rich snippet do Google para uma página que lista diversos eventos

...ou pode listar apenas um evento, como este:

imagem de um rich snippet do Google para uma página que lista um único evento

... ou ele pode combinar as informações de local e evento:

imagem de um rich snippet do Google para a combinação de informações de evento e local

Diretrizes de uso

A marcação de eventos pode ser usada para marcar eventos que ocorrem em datas futuras específicas, como um concerto musical ou um festival de arte.

As informações visíveis no snippet, como o nome e local do evento também precisam ser definidas claramente. Como este recurso não foi criado para fins publicitários, o nome do evento não deve conter elementos promocionais como o preço do evento, uma chamada para compra ou uma indicação de venda ou desconto temporário.

Exemplos de nomes de evento válidos:

  • Concerto da East Bay Symphony
  • Music Festival Northwest

Nomes de evento inválidos:

  • Pacote de viagem: San Diego/LA, 7 noites Não use uma marcação de rich snippets para promover produtos e serviços de não evento.
  • Festival de música – apenas R$ 10! Em vez disso, marque preços de ingressos usando a propriedade ingressos.
  • Liquidação de vestidos! Informações de não evento
  • Show – compre seus ingressos agora! Promoção
  • Show – 50% de desconto só até sábado! Promoção

Propriedades

Eventos têm propriedades, como descrição, data de início (que deve ser no futuro: o Google não exibe rich snippets para eventos que já aconteceram) e informações sobre o local. O Google reconhece as seguintes propriedades de evento (derivadas do microformato hCalendar). Quando os nomes de propriedade de microdados/RDFa e de microformatos forem diferentes, o nome de propriedade de microformatos aparecerá entre parênteses. As propriedades em negrito são obrigatórias. Verifique nossas diretrizes de uso.

Propriedade Descrição
summary O nome do evento.
url Exigido para páginas que listarem diversos eventos. Link para a página de detalhes do evento. Desnecessário se o URL for o mesmo da página que contém a marcação.
location Obrigatório para evento único. O local do evento. É permitida uma sequência de texto, mas recomendamos que você represente o local usando uma Organização aninhada para especificar o nome e o endereço do local. Mais informações sobre entidades aninhadas.
description Uma descrição do evento.
startDate (dtstart) A data e hora de início do evento no formato de data ISO.
endDate (dtend) A data e hora de término do evento no formato de data ISO.
duration A duração do evento no formato de duração ISO.
eventType (category) A categoria do evento, como "Festival", "Show", "Palestra".
geo Especifica as coordenadas geográficas do local. Inclui dois elementos: latitude e longitude. Opcional.
photo Um link para uma foto ou imagem relacionada ao evento.
tickets Uma oferta de compra de ingressos para o evento. Pode ser um URL para uma página em que ingressos podem ser comprados ou que inclui propriedades específicas para a Oferta, como price, quantity, priceValidUntil e currency.
ticketAggregate Informações adicionais sobre todos os ingressos para o evento. É possível incluir propriedades específicas de agregação de ofertas, como lowPrice, highPrice, offerCount e currency.

Como marcar o conteúdo

HTML, nenhuma marcação adicionada

O seguinte código HTML descreve o show de retorno triunfante do Spinal Tap.

Para verificar se sua marcação está correta e visualizar a aparência do seu conteúdo em resultados de pesquisas, use a ferramenta de teste de rich snippets. Se os rich snippets não estiverem aparecendo em seu site, consulte as possíveis razões.

<div>
<a href="http://www.example.com/events/spinaltap">Spinal Tap</a>
<img src="spinal_tap.jpg" />
Após a busca amplamente divulgada por um novo baterista, o Spinal Tap dá início à sua mais recente turnê de retorno com um show em São Francisco.

Quando: 15 de outubro, das 19 às 21h

Onde: Warfield Theatre, 982 Market St, São Francisco, Califórnia

Categoria: Show

Ingressos de US$ 10 a US$ 11
2.000 ingressos disponíveis
<a href="http://www.example.com/events/spinaltap/alltickets">Ver todos os ingressos disponíveis</a>
<a href="http://www.example.com/events/spinaltap/presale">Pré-venda de ingressos</a> US$ 10 até 10 de novembro de 2015 (1.000 ingressos disponíveis)
<a href="http://www.example.com/events/spinaltap/tickets">Preço integral</a> $11
</div>
Clique para ver o HTML marcado com microdados

Veja o mesmo conteúdo HTML marcado com microdados.

<div itemscope itemtype="http://data-vocabulary.org/Event">
  ​<a href="http://www.example.com/events/spinaltap" itemprop="url" >
    <span itemprop="summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />

  <span itemprop="description">Após a busca amplamente divulgada por um novo baterista,
   o Spinal Tap dá início à sua mais recente turnê de retorno com um show em 
São Francisco.</span>
   Quando:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">15 de outubro, 19h</time>—
  <time itemprop="endDate" datetime="2015-10-15T19:00-08:00">15 de outubro, 21h</time>

  Onde: 
   <span itemprop="location" itemscope itemtype="http://data-vocabulary.org/​Organization">
     ​<span itemprop="name">Warfield Theatre</span>
     ​<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
         <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">São Francisco</span>, 
         <span itemprop="region">Califórnia</span>
     </span>
      <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/​Geo">
        <meta itemprop="latitude" content="37.774929" />
        <meta itemprop="longitude" content="-122.419416" />
     </span>
      </span>
   Categoria: <span itemprop="eventType">Show</span> 
<span itemprop="ticketAggregate" itemscope itemtype="http://data-vocabulary.org/Offer-aggregate"> 
    Ingressos a partir de $<span itemprop="lowPrice">US$ 10,00</span>-$<span itemprop="highPrice">US$ 11,00</span>
    <span itemprop="currency" content="USD" /> 
    <span itemprop="offerCount">2.000</span> ingressos disponíveis
    <a href="http://www.example.com/events/spinaltap/alltickets" itemprop="offerurl">
      http://google.com/ticket</span>Ver todos os ingressos disponíveis</a>
  </span>
      <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/presale" itemprop="offerurl">Pré-venda de ingressos</a> 
    <span itemprop="price">$10</span><span itemprop="currency" content="USD" /> 
      till <time itemprop="priceValidUntil" datetime="2015-11-10">10 de novembro de 2015</time> 
      (<span itemprop="quantity">1.000</span> disponíveis)  
  </span>
      <span itemprop="tickets" itemscope itemtype="http://data-vocabulary.org/Offer"> 
    <a href="http://www.example.com/events/spinaltap/tickets" itemprop="offerurl">Preço integral</a> 
    <span itemprop="price">$11</span><span itemprop="currency" content="USD" /> 
  </span>
   </div>

Veja como esse exemplo funciona:

  • Na primeira linha, <itemscope itemtype="http://data-vocabulary.org/Event"> indica que o HTML entre <div> representa um evento. itemscope indica que o conteúdo de <div> descreve um item e itemtype="http://data-vocabulary.org/Event" indica que o item é um evento.
  • O exemplo descreve as propriedades do evento, como a categoria, nome e local. Para nomear as propriedades de evento, cada elemento que contém uma dessas propriedades (como <div> ou <span>) recebe um atributo itemprop indicando uma propriedade. Por exemplo, span itemprop="summary".
  • Uma propriedade pode consistir em outro item (em outras palavras, um item pode incluir outros itens). Por exemplo, o evento acima inclui informações da organização para o local, o Warwick Theatre (itemtype="http://data-vocabulary.org/Organization") que por sua vez inclui informações de endereço, com as propriedades street-address, locality e region.
  • Para especificar datas e horários sem ambiguidade, use o elemento time com o atributo datetime. Aqui, a propriedade startDate indica a data e o horário de início do show. O valor no atributo datetime é especificado usando o formato de data ISO. O uso desse formato fornece aos mecanismos de pesquisa, detalhadamente, a data, hora e, opcionalmente, o fuso horário no formato ISO ("2015-10-15T19:00-08:00"), sem deixar de exibir a data na página de uma forma que o usuário compreende ("15 de outubro de 2015, 19h").
  • A tag meta é usada para especificar informações adicionais que não estejam visíveis na página—nesse caso, a longitude e a latitude do local. Em geral, o Google não usa conteúdo oculto, mas informações geográficas podem ajudar a garantir que o local seja mapeado corretamente.

Como marcar eventos para um único local

Se sua página HTML exibir informações sobre o local e a lista de eventos, você poderá marcar o local como uma organização, seguido de uma série de marcações de eventos para cada evento em vez de repetir o local em cada marcação do evento.

O exemplo a seguir mostra os dados da organização para o Warfield Theatre e os eventos agendados que aparecerão lá.

<div itemscope itemtype="http://data-vocabulary.org/Organization"> 
    <span itemprop="name">Warfield Theatre</span>,
  <span itemprop="address" itemscope 
      itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">982 Market St</span>, 
         <span itemprop="locality">San Francisco</span>,
    <span itemprop="region">CA</span>
  </span>
      <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929"></span>
        </span>
      <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
   </span>
      </span>
      <span class="photo"> http://www.example.com/images/image.jpeg</span>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Event">
  <a href="http://www.example.com/events/spinaltap" itemprop="url”> 
    <span itemprop=”summary">Spinal Tap</span>
  </a>
   <img itemprop="photo" src="spinal_tap.jpg" />
  Quando:
  <time itemprop="startDate" datetime="2015-10-15T19:00-08:00">
    15 de outubro, 19h</time>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Event">
  <a href="http://www.example.com/events/u2" itemprop="url” summary">U2</a>
  <img itemprop="photo" src="u2.jpg" />

  Quando:
  <time itemprop="startDate" datetime="2015-10-16T19:00-08:00">
    Oct 16, 7:00PM</time> 
</div>

Clique para ver o HTML marcado com microformatos

Este é o mesmo conteúdo HTML marcado com o microformato hCalendar.

<div class="vevent">
   <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a>
<img src="spinal_tap.jpg" class="photo" />
   <span class="description">Após a busca amplamente divulgada por um
   novo baterista, o Spinal Tap dá início à sua mais recente turnê de retorno
   com um show em São Francisco.</span>
   Quando:
  <span class="dtstart">
      15 de outubro, 19h<span class="value-title" title="2015-10-15T19:00-08:00" /></span>
   </span>-
   <span class="dtend">
      21h<span class="value-title" title="2015-10-15T21:00-08:00"></span>
   </span>
   Onde: 
   <div class="location vcard">
      <span class="fn org">Warfield Theatre</span>,
      <span class="adr">
         <span class="street-address">982 Market St</span>, 
         <span class="locality">São Francisco</span>,
         <span class="region">Califórnia</span>
      </span>
      <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" ></span>
   </span>
      <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
   </span>
      </span>
      </div>  
Categoria: <span class="category">Show</span>
<span class="ticketAggregate"> 
     <span class="hoffer-aggregate"> 
       Ingressos de $<span class="lowprice">10</span>-$<span class="highprice">11</span>
       <span class="currency">USD</span> 
       <span class="offercount">2.000 ingressos disponíveis</span>
       <a href="http://www.example.com/events/spinaltap/alltickets" class="offerurl">Ver todos os ingressos disponíveis</a>
     </span>
      </span>
      <span class="tickets">
     <span class="hoffer">
       <a href="http://www.example.com/events/spinaltap/presale" class="offerurl">Pré-venda de ingressos</a> 
         <span class="price">$10</span> till <span class="pricevaliduntil">10 de novembro de 2015</span>
        (<span class="quantity">1.000</span> disponíveis)
    </span>
      <span class="tickets">
     <span class="hoffer">
       <a href="http://www.example.com/events/spinaltap/tickets class=offerurl">Preço integral</a> 
         <span class="price">$10</span> till <span class="pricevaliduntil">10 de novembro de 2015</span> 
         <span class="quantity">1.000</span> disponíveis)
     </span>
      </span>

</div>

Veja como o exemplo funciona.

  • Na primeira linha, class="vevent" indica que o HTML entre <div> descreve um evento, neste caso, uma sublime experiência de rock.
  • A linha a href na parte superior contém o URL para uma página detalhada sobre o evento e o título do evento e, portanto, inclui as propriedades url e summary. Ambas estão incluídas na mesma tag <a>.
  • O exemplo descreve as propriedades do evento, como a descrição e categoria. Para nomear essas propriedades do produto, cada elemento contendo uma dessas propriedades (como <span>, <img> ou <strong>) recebe um atributo class.
  • Neste exemplo, queremos incluir informações detalhadas sobre o local usando um microformato hCard (organização) aninhado, da seguinte forma: <div class="location vcard"></div>. Você pode fazer isso colocando location e vcard na mesma linha, separados por um espaço. Mais informações sobre entidades aninhadas.
  • Essa amostra também contém dois exemplos do padrão de classe de valor de microformatos. Exceto em circunstâncias especiais (por exemplo, ao marcar a melhor avaliação possível para sites de resenhas que não usam uma escala de avaliação de 5 pontos), o Google não exibe conteúdo que não é visível para o usuário. No entanto, o exemplo acima demonstra algumas exceções para datas e informações geográficas. Obtenha mais detalhes abaixo.

Conteúdo não visível

Pode ser útil fornecer aos mecanismos de pesquisa informações precisas de data e local, mesmo que você não queira que essas informações fiquem visíveis para o leitor da sua página. Por exemplo, fornecer a latitude e a longitude de um local pode ajudar o Google a garantir o mapeamento correto; fornecer a data no formato de data ISO pode ajudar a garantir a exibição correta nos resultados de pesquisa.

Considere este exemplo:

<span class="dtstart">
      15 de outubro, 19h<span class="value-title" title="2015-10-15T19:00-08:00" /></span>
   </span>
   

Ao incluir as informações detalhadas de data dentro do bloco chamado class="dtstart", você indica que o analisador de rich snippets deve usar o valor no atributo title para encontrar a data de início do evento. Essa data pode ser representada usando o formato de data ISO (o exemplo acima, 2015-10-15T19:00-08:00, especifica a data, a hora e o fuso horário) sem afetar a data legível ("15 de outubro, 19h") exibida aos usuários.

As informações geográficas (latitude e longitude do local) também podem ser incluídas na marcação HTML. Normalmente, essas informações não são visíveis em uma página web sobre um evento, mas fornecê-las pode ajudar a garantir o mapeamento preciso do local. Por exemplo:

<span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929" ></span>
   </span>
      <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
   </span>
      </span>

Como marcar eventos para um só foro

Se sua página HTML exibir informações sobre o foro e depois a lista de eventos, em vez de repetir o local do foro em cada marcação de foro, você pode marcar o foro usando um vCard, seguido de uma série de marcações de eventos para cada evento.

O exemplo a seguir exibe dados do vCard para o Warfield Theatre e os eventos agendados para serem apresentados lá.

<div class="vcard">
   <span class="fn org">Warfield Theatre</span>,
  <span class="adr">
         <span class="street-address">982 Market St</span>, 
         <span class="locality">São Francisco</span>,
         <span class="region">Califórnia</span>
      </span>
      <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929"></span>
        </span>
      <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
   </span>
      </span>
      <span class="photo"> http://www.example.com/images/image.jpeg</span>
</div>

<div class="vevent">
   <a href="http://www.example.com/events/spinaltap" class="url summary">Spinal Tap</a>
<img src="spinal_tap.jpg" class="photo" />
   Quando:
  <span class="dtstart">
      15 de outubro, 19h<span class="value-title" title="2015-10-15T19:00-08:00" /></span>
   </span>
   </div>

<div class="vevent">
   <a href="http://www.example.com/events/u2" class="url summary">U2</a>
  <img src="u2.jpg" class="photo" />
  Quando:
  <span class="dtstart">
      16 de outubro, 19h<span class="value-title" title="2015-10-16T19:00-08:00" /></span>
   </span>
   </div>
Clique para ver o HTML marcado com RDFa

Veja o mesmo código HTML marcado com RDFa:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event"> 
  <a href="http://www.example.com/events/spinaltap" rel="v:url" 
     property="v:summary">Spinal Tap</a> 
  <img src="spinal_tap.jpg" rel="v:photo" /> 
  <span property="v:description">Após a busca amplamente divulgada por um novo baterista, 
  o Spinal Tap dá início a sua mais recente turnê de retorno com um show em São Francisco. </span>

Quando:
  <span property="v:startDate" content="2015-10-15T19:00-08:00">15 de outubro, 19h</span>—
  <span property="v:endDate" content="2015-10-15T21:00-08:00">21h</span>

  Onde: 
   <span rel="v:location">
    <span typeof="v:Organization">
      <span property="v:name">Warfield Theatre</span>,
      <span rel="v:address">
      <span typeof="v:Address">
         <span property="v:street-address">982 Market St</span>, 
          <span property="v:locality">São Francisco</span>, 
          <span property="v:region">Califórnia</span>
        </span>
      </span>
      <span rel="v:geo">
        <span typeof="v:Geo">
         <span property="v:latitude" content="37.774929" ></span>
          <span property="v:longitude" content="-122.419416" ></span>
        </span>
   </span>
   </span>
      </span>

Categoria: <span property="v:eventType">Show</span>

   <span rel="v:ticketAggregate"> 
    <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Offer-aggregate">
      Ingressos de $<span property="v:lowPrice">10</span>-$<span property="v:highPrice">11</span>
      <span property="v:currency">USD</span> 
      <span property="v:offercount">2.000</span> ingressos disponíveis
      <a href="http://www.example.com/events/spinaltap/alltickets" property="v:offerurl">Ver todos os ingressos disponíveis</a>
    </div>
  </span>
      <span rel="v:tickets"> 
     <div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Offer"> 
      <a href="http://www.example.com/events/spinaltap/presale" property="v:offerurl">>Pré-venda de ingressos</a>  
        <span property="v:price">$10 </span>  <span property="v:currency">USD </span> till 
        <span property="v:pricevaliduntil" content="2025-10-15T19:00+08:00">10 de novembro de 2015</span> 
        (<span property="v:quantity">1.000 </span> disponíveis)
     </div>

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Offer"> 
      <a href="http://www.example.com/events/spinaltap/tickets" property="v:offerurl">Preço integral</a>
         <span property="v:price">$11 </span> <span property="v:currency">USD </span> 
     </div>

</div>

Veja como esse exemplo funciona:

  • O exemplo começa com uma declaração de namespace usando xmlns. Isso indica o namespace onde o vocabulário (uma lista de entidades e seus componentes) é especificado. Você pode usar a declaração xmlns:v="http://rdf.data-vocabulary.org/# namespace" sempre que estiver marcando páginas para definir pessoas, resenhas, eventos ou dados de locais. Lembre-se de usar uma barra e # (xmlns:v="http://rdf.data-vocabulary.org/#" ).
  • Além disso, na primeira linha, typeof="v:Event" indica que o conteúdo marcado descreve um evento.
  • Cada propriedade do evento (como descrição, tipo de evento e horário de início) é nomeada usando property. O nome da propriedade é prefixado com v: (<span property="v:description">).
  • O Google não exibe informações que não estejam visíveis para o usuário, com algumas exceções. Você pode incluir informações geográficas(latitude e longitude do local) na marcação HTML. Normalmente, essas informações não são visíveis em uma página web sobre um evento, mas fornecê-las pode ajudar a garantir o mapeamento preciso do local. Neste exemplo, <span typeof="v:Geo"> identifica informações geográficas, e o atributo content é usado para especificar a latitude e longitude.

Como marcar eventos para um único local

Se sua página HTML exibir informações sobre o local e a lista de eventos, você poderá marcar o local como uma organização, seguido de uma série de marcações de eventos para cada evento em vez de repetir o local em cada marcação do evento.

O exemplo a seguir mostra os dados da organização para o Warfield Theatre e os eventos agendados que aparecerão lá.

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Organization"> 
   <span class="fn org">Warfield Theatre</span>,
  <span class="adr">
         <span class="street-address">982 Market St</span>, 
         <span class="locality">São Francisco</span>,
         <span class="region">Califórnia</span>
      </span>
      <span class="geo">
        <span class="latitude">
           <span class="value-title" title="37.774929"></span>
        </span>
      <span class="longitude">
           <span class="value-title" title="-122.419416"></span>
   </span>
      </span>
      <span class="photo"> http://www.example.com/images/image.jpeg</span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event"> 
  <a href="http://www.example.com/events/spinaltap" rel="v:url" 
     property="v:summary">Spinal Tap</a> 
  <img itemprop="photo" src="spinal_tap.jpg" />
  Quando:
  <span property="v:startDate" content="2015-10-15T19:00-08:00">
    Oct 15, 7:00PM</span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Event"> 
  <a href="http://www.example.com/events/u2" rel="v:url" 
     property="v:summary">U2</a> 
  <img itemprop="photo" src="u2.jpg" />

  Quando:
  <span property="v:startDate" content="2015-10-16T19:00-08:00">
    Oct 16, 7:00PM</span>
</div>