Rich snippets: receitas

Novidade! O schema.org permite que você marque uma variedade muito maior de tipos de itens em suas páginas, usando um vocabulário que o Google, a Microsoft e o Yahoo! podem entender. Saiba mais. O Google ainda oferece suporte a sua marcação de rich snippets existente.

Quando as informações de receita são marcadas nas páginas da web, o Google pode usar essas informações para exibição de rich snippets nos resultados de receita e para inclusão no Google com a Visualização de receitas. No momento, a Visualização de receitas está disponível apenas nos EUA e no Japão. Entretanto, estamos trabalhando para disponibilizá-la em todos os lugares.


snippet de uma receita marcado com o formato hRecipe

Diretrizes de uso

A função de um rich snippet de receita é fornecer aos usuários informações adicionais sobre uma receita culinária específica, como as avaliações com estrela dos avaliadores (de 1 a 5 estrelas), tempo de cozimento/preparo e informações de calorias.

As seguintes diretrizes se aplicam a snippets de receita:

  • Ao usar a marcação de receita, o tópico principal da página deve ser sobre uma receita específica. Não há suporte para o uso da marcação de receita em uma página com várias receitas.
  • Se a marcação de receita contém uma única avaliação, o nome do avaliador deve ser um nome válido (pessoa ou organização). Por exemplo, "50% de desconto e ingredientes" não é um nome válido para um avaliador.

Propriedades

O Google reconhece as seguintes propriedades de microdados, RDFa e microformatos (hRecipe). Quando o nome dos microformatos for diferente do nome dos microdados/RDFa, o nome do hRecipe aparecerá entre parênteses. As propriedades em negrito são obrigatórias. Além disso, os rich snippets são exibidos atualmente apenas para receitas que fornecem pelo menos dois dos seguintes itens:
  • photo
  • prepTime, cookTime, totalTime, or ingredients
  • calories
  • review (aninhado)
Propriedade descrição:
name (fn) O nome do prato.
recipeType (tag) O tipo de prato: por exemplo, entrada, prato principal, sobremesa...
photo Imagem do prato que será preparado.
published A data na qual a receita foi publicada no formato de data ISO.
summary Um pequeno resumo descrevendo o prato.
review Uma resenha do prato. Pode incluir informações de resenhas aninhadas.
prepTime O tempo necessário para preparar a receita do prato em formato de duração ISO 8601. Você pode usar min e max como elementos secundários para especificar um intervalo de tempo.
cookTime O tempo que leva para realmente cozinhar o prato em formato de duração ISO 8601. Você pode usar min e max como elementos secundários para especificar um intervalo de tempo.
totalTime (duração) O tempo total necessário para preparar e cozinhar o prato em formato de duração ISO 8601. Você pode usar min e max como elementos secundários para especificar um intervalo de tempo.
nutrition Informações nutricionais sobre a receita. Pode conter os seguintes elementos filhos: servingSize, calories, fat, saturatedFat, unsaturatedFat, carbohydrates, sugar, fiber, protein, cholesterol. Esses elementos não são explicitamente parte do microformato hRecipe, mas o Google os reconhecerá.
instructions As etapas para preparar o prato. Pode conter o elemento filho instruction, que pode ser usado para anotar cada etapa.
yield A quantidade do prato produzida pela receita (por exemplo, quantas pessoas ela serve, número de porções etc.).
ingredient Um ingrediente usado na receita. Pode conter os itens filhos name (nome do ingrediente) e amount. Use esse parâmetro para identificar ingredientes individuais.
author O criador da receita. Pode incluir informações de pessoas aninhadas.

Como marcar o conteúdo

O seguinte código HTML descreve uma receita de torta de maçã:
<div>
  <h1>Torta de maçã da vovó</h1>
   
  <img src="apple-pie.jpg" />
  De Carol Smith 
   
  Publicada em: 5 de novembro de 2009
   
  Esta é a receita de torta de maçã da minha avó.  Gosto de acrescentar um pouco de noz-moscada.
  4.0 estrelas com base em 35 resenhas
   
  Tempo de preparo: 30 min
   
  Tempo para cozinhar: 1 hora
   
  Tempo total: 1h30
   
  Rendimento: 1 torta de 23 cm (8 porções)
  
  Tamanho da porção: 1 fatia média
  
  Calorias por porção: 250
   
  Gordura por porção: 12g

   
  Ingredientes:   
    
    Maçãs em fatias finas: 6 xícaras
   
    Açúcar: 3/4 de xícara 
  ... 
		
  Coordenadas: 
    1. Corte e descasque as maçãs 
    2. Misture o açúcar e a canela. Use o açúcar que sobrar para decorar as maçãs. 
  ...
</div>

As seções, a seguir, descrevem como marcar este conteúdo usando microdados, microformatos ou RDFa.

Para verificar se sua marcação está correta e visualizar como seu conteúdo pode aparecer nos resultados de pesquisa, use a ferramenta de teste de dados estruturados.
Microdados

Este é o mesmo código HTML marcado com microdados.

<div itemscope itemtype="http://data-vocabulary.org/Recipe" >
   
  <h1 itemprop="name">Torta de maçã da vovó</h1>
   
  <img itemprop="photo" src="apple-pie.jpg" /> 
   
  De <span itemprop="author">Carol Smith</span> 
   
  Publicado em: <time datetime="2009-11-05" itemprop="published">
    
    05 de novembro de 2009</time>
  
  <span itemprop="summary">Esta é a receita de torta de maçã da minha avó.  Gosto de acrescentar um
    pouco de noz-moscada.</span>
  <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
      
    <span itemprop="rating">4.0</span> estrelas com base em
      
    <span itemprop="count">35</span> resenhas </span>
  
  Tempo de preparo: <time datetime="PT30M" itemprop="prepTime">30 min</time>
  
  Tempo de cozimento: <time datetime="PT1H" itemprop="cookTime">1 hour</time>
  
  Tempo total: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min</time>
  
  Rendimento: <span itemprop="yield">1 torta de 23 cm (8 porções)</span>
   
  <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition">
      
    Tamanho da porção: <span itemprop="servingSize">1 fatia média</span>
      
    Calorias por porção: <span itemprop="calories">250</span> 
   
    Gordura por porção: <span itemprop="fat">12g</span>

 
  </span>


  Ingredientes:   
   
    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      Em fatias finas<span itemprop="name">maçãs</span>:     
      
      <span itemprop="amount">6 xícaras</span>
   
    </span>


    <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient">
      
      <span itemprop="name">Açúcar</span>:     
      
      <span itemprop="amount">3/4 de xícara</span>  
   
    </span>


  ...
		  
  Coordenadas:
    <div itemprop="instructions">
   
      1. Corte e descasque as maçãs
      2. Misture o açúcar e a canela. Use o açúcar que sobrar para decorar as maçãs.
      ...
    </div>
</div>

Veja como esse exemplo funciona:

  • Na primeira linha, indica que o HTML incluído no
    representa uma receita. itemscope indica que o conteúdo do
    descreve um item e itemtype="http://www.data-vocabulary.org/Recipe" indica que o item é uma receita.
  • O exemplo descreve as propriedades da receita, como o autor, ingredientes e tempo de preparo. Para nomear as propriedades da receita, cada elemento que contém uma dessas propriedades (como <div> ou <span>) recebe um atributo itemprop indicando uma propriedade. Por exemplo, <span itemprop="author">.
  • Uma propriedade pode consistir de outro item (em outras palavras, um item pode incluir outros itens). Por exemplo, a receita acima inclui um item de resenha agregada (itemtype="http://www.data-vocabulary.org/Review-aggregate"), com as propriedades rating e count, e um item de ingredientes da receita (ingredient), que por sua vez tem as propriedades amount e name.
  • Exceto em circunstâncias especiais, o Google não exibirá conteúdo que não seja visível para o usuário. No entanto, em algumas situações, pode ser útil fornecer aos mecanismos de pesquisa informações mais detalhadas, mesmo se você não quiser que essas informações sejam vistas pelas pessoas que visitam sua página. Este exemplo usa o atributo datetime para indicar que o analisador de rich snippets deve usar o valor no atributo para encontrar o tempo de preparo, tempo para cozinhar e tempo total necessários para preparar o prato, mas ainda exibe as durações na página de uma forma legível. Por exemplo: <time datetime="PT1H" itemprop="cookTime">1 hour</time>.
Microformatos

Veja o mesmo código HTML marcado com microformatos: Observação: algumas das propriedades mostradas acima, embora sejam reconhecidas pelo Google, não fazem parte da especificação preliminar do hRecipe publicada em microformats.org.)

<div class="hrecipe">
   
   <span class="item">
      
      <h1 class="fn">Torta de maçã da vovó</h1>
   
   </span>


   <img src="tortamaçã.jpg" class="photo" />
   
   De <span class="author">Carol Smith</span>
   
   Publicada em: <span class="published"> 5 de novembro de 2009<span class="value-title" title="2009-11-05"></span></span>
   
   <span class="summary">Esta é a receita de torta de maçã da minha avó.  Gosto de acrescentar um pouco de noz-moscada.</span>
   <span class="review hreview-aggregate">
      
      <span class="rating"> 
      
         <span class="average">4.0</span> estrelas com base em
         
         <span class="count">35</span> resenhas
      
      </span>

 
   </span>


   Tempo de preparo: <span class="prepTime">30 min <span class="value-title" title="PT30M"></span></span>
   
   Tempo de cozimento: <span class="cooktime">1 hora<span class="value-title" title="PT1H"></span></span>   
      
   Tempo total: <span class="duration">1 hora e 30 min <span class="value-title" title="PT1H30M"></span></span>
   
   Rendimento: <span class="yield">1 torta de 23 cm (8 porções)</span>
   
   <span class="nutrition">
      
      Tamanho da porção: <span class="servingsize">1 fatia média</span>
      
      Calorias por porção: <span class="calories">250</span>
      
      Gordura por porção: <span class="fat">12g</span>
   
   </span>

   
   
   Ingredientes:   
   
   <span class="ingredient">
      
      Em fatias finas<span class="name">maçãs</span>:
      
      <span class="amount">6 xícaras</span> 
    
   </span>


   <span class="ingredient">
      
      <span class="name">Açúcar</span>:
      
      <span class="amount">3/4 de xícara</span> 
    
   </span>

   

   Coordenadas:
   <span class="instructions">
   
   1. Corte e descasque as maçãs
   2. Misture o açúcar e a canela. Use o açúcar que sobrar para decorar as maçãs.
   ...   
   </span>


</div>

Veja como esse exemplo funciona:

  • Na primeira linha, class="hrecipe" indica que o HTML entre div representa uma receita, nesse caso, uma torta de maçã.
  • As informações estruturadas são transmitidas pelo atributo class (como class="fn" e class="author") e pelos valores (como "açúcar" e "1h30"). Você pode alterar as tags como span e div de modo que se encaixem em suas necessidades de formatação.
  • Para exibir as informações das resenhas, as informações de resenhas agregadas (hreview-aggregate) são aninhadas dentro de hrecipe. Mais informações sobre itens aninhados.
  • A avaliação (class="rating") representa um valor de uma marcação de avaliação na qual a avaliação é escrita na forma "4.0 estrelas" na página da Web da receita. Mais informações sobre como marcar as avaliações em resenhas.
  • Exceto em circunstâncias especiais, o Google não exibirá conteúdo que não seja visível para o usuário. No entanto, em algumas situações, pode ser útil fornecer aos mecanismos de pesquisa informações mais detalhadas, mesmo se você não quiser que essas informações sejam vistas pelas pessoas que visitam sua página. O HTML acima contém um exemplo de padrão de classe de valor de microformatos, usado para indicar o tempo total de preparo para mecanismos de pesquisa no formato de duração ISO 8601, enquanto exibe ao mesmo tempo a informação em estilo legível ("1 hora 30 min") na página em si. Ele usa o atributo title para indicar que o analisador de rich snippets deve usar o valor no atributo para encontrar o tempo total necessário para preparar o prato, mas ainda exibe as durações na página de uma forma legível. Por exemplo: <span class="value-title" title="PT1H30M">.
RDFa

Este é o mesmo HTML marcado com microformatos.


<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe">
   
   <h1 property="v:name">Torta de maçã da vovó</h1>
   
   <span rel="v:photo"/>
     
     <img src="tortamaçã.jpg"/>
   
   </span>


   By <span property="v:author">Carol Smith</span>
   
   Publicada em: <span property="v:published" content="2009-11-05">5 de novembro de 2009</span>
   
   <span property="v:summary">Esta é a receita de torta de maçã da minha avó.  Gosto de acrescentar um pouco de noz-moscada.</span>
   <span rel="v:Review">
      
      <span typeof="v:Review-aggregate">
         
         <span rel="v:rating"> 
      
            <span typeof="v:Rating">
         
               <span property="v:average">4.0</span> estrelas com base em 
                
               <span property="v:count">35</span> resenhas
            
            </span>


         </span>


      </span>


   </span>


   Tempo de preparo: <span property="v:prepTime" content="PT30M">30 min</span>
   
   Tempo para cozinhar: <span property="v:cookTime" content="PT1H">1 hora</span>
   
   Tempo total: <span property="v:totalTime" content="PT1H30M">1 hora 30 min</span>
   
   Rendimento: <span property="v:yield">1 torta de 23 cm (8 porções)</span>
   
   <span rel="v:nutrition">
      
      <span typeof="v:Nutrition"> 
         
        Tamanho da porção: <span property="v:servingSize">1 fatia média</span>
        
        Calorias por porção: <span property="v:calories">250</span>
   
        Gordura por porção: <span property="v:fat">12g</span> 
   
    
      </span>


   </span>


   Ingredientes:   
      
   <span rel="v:ingredient">
      
      <span typeof="v:Ingredient"> 
          
         Em fatias finas<span property="v:name">maçãs</span>:   
            
         <span property="v:amount">6 xícaras</span> 
      
     </span>

   
   </span>


   <span rel="v:ingredient">
      
      <span typeof="v:Ingredient"> 
          
         <span property="v:name">Açúcar</span>:   
            
         <span property="v:amount">3/4 de xícara</span>  
        
      </span>

   
   </span>

  
   ...
 
   Coordenadas:
   <div property="v:instructions">
   
   1. Corte e descasque as maçãs
   2. Misture o açúcar e a canela. Use o açúcar que sobrar para decorar as maçãs.
   ...   
   </div>
</div>

Veja como este 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, receitas, 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:Recipe" indica que o conteúdo marcado descreve uma receita.
  • Cada propriedade da receita (como nome, resumo e quantidade de gordura) é nomeada usando property. O nome da propriedade é prefixado com v: (<span property="v:fat">).
  • Exceto em circunstâncias especiais, o Google não exibirá conteúdo que não seja visível para o usuário. No entanto, em algumas situações, pode ser útil fornecer aos mecanismos de pesquisa informações mais detalhadas, mesmo se você não quiser que essas informações sejam vistas pelas pessoas que visitam sua página. Este exemplo usa o atributo content para indicar que o analisador de rich snippets deve usar o valor no atributo para encontrar o tempo de preparo, tempo para cozinhar e tempo total necessários para preparar o prato, mas ainda exibe as durações na página de uma forma legível. Por exemplo: <span content="PT30M" property="v:prepTime">30 min</span>.