Dados estruturados de carrossel (ItemList)

Um carrossel é uma pesquisa aprimorada, semelhante a uma lista, que permite que as pessoas deslizem pelos resultados em dispositivos móveis. Ele exibe vários cartões do mesmo site (também conhecido como carrossel de host). Para usar a pesquisa aprimorada de carrossel de host no seu site, adicione os dados estruturados ItemList combinados a um dos seguintes recursos compatíveis de dados estruturados:

Veja como os eles podem aparecer na Pesquisa Google quando você combina a marcação ItemList e um tipo de conteúdo compatível:

Ilustração de como uma lista de cursos é exibida na Pesquisa Google. Ela exibe três cursos diferentes do mesmo site em um formato de lista que os usuários podem explorar e selecionar um curso específico. Ilustração de como um carrossel de host de filmes pode aparecer na Pesquisa Google. Ela mostra três filmes diferentes do mesmo site em um formato de carrossel que os usuários podem explorar e selecionar um filme específico.

Adicionar dados estruturados

Os dados estruturados são um formato padronizado para fornecer informações sobre uma página e classificar o conteúdo dela. Caso você não saiba muito sobre o assunto, veja como os dados estruturados funcionam.

Esta é uma visão geral de como adicionar dados estruturados ao seu site.

  1. Decida qual página vai conter os dados estruturados de carrossel. Existem duas opções:
    • Página de resumo e várias páginas de detalhes: a página de resumo tem uma breve descrição de cada item na lista, e cada descrição leva a uma página de detalhes separada voltada a um item específico. Por exemplo, uma página de resumo que lista as melhores receitas de cookies, e cada descrição está vinculada à receita completa de cada cookie.
    • Uma lista em uma única página: é uma única página que contém todas as informações da lista, incluindo o texto completo de cada item. Por exemplo, uma lista dos principais filmes de 2020, todos em uma única página.
  2. Adicione as propriedades obrigatórias. Com base no formato que você está usando, saiba onde inserir dados estruturados na página.
  3. Adicione as propriedades obrigatórias e recomendadas para o tipo de conteúdo específico relacionado ao carrossel:
  4. Siga as diretrizes.
  5. Valide o código usando o teste de pesquisa aprimorada.
  6. Implante algumas páginas que incluam os dados estruturados e use a Ferramenta de inspeção de URL para testar como o Google vê a página. Confirme se a página está acessível ao Google e se não está bloqueada por um arquivo robots.txt, pela tag noindex ou por requisitos de login. Se estiver tudo certo, peça ao Google para rastrear novamente seus URLs.
  7. Para manter o Google informado sobre alterações futuras, recomendamos que você envie um sitemap. É possível automatizar isso com a API Search Console Sitemap.

Página de resumo e várias páginas de detalhes

A página de resumo tem uma breve descrição de cada item da lista. Cada descrição aponta para uma página de detalhes separada, inteiramente focada em um item.

Página de resumo

A página de resumo define uma ItemList, em que cada ListItem tem somente três propriedades: @type (definida como "ListItem"), position (a posição na lista) e url (o URL de uma página com detalhes completos sobre esse item).

Veja um exemplo da aparência da página de resumo:


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"https://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"https://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"https://example.com/snickerdoodles.html"
        }
      ]
    }
    </script>
  </head>
  <body>
    <p>
      Here are the best cookie recipes of all time.
    </p>
    <h2>
      Peanut Butter Cookies
    </h2>
    <p>
      This <a href="https://example.com/peanut-butter-cookies.html">Peanut Butter Cookie recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Triple Chocolate Chunk Cookies
    </h2>
    <p>
      This <a href="https://example.com/triple-chocolate-chunk.html">Triple Chocolate Chunk Cookies recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Snickerdoodles
    </h2>
    <p>
      This <a href="https://example.com/snickerdoodles.html">Snickerdoodles recipe</a> is the tastiest one you'll find.
    </p>
  </body>
</html>

Página de detalhes

A página de detalhes define o tipo específico de dados estruturados do carrossel. Por exemplo, se a página de resumo for sobre as melhores receitas de cookies, cada página de detalhes conterá dados estruturados Recipe para uma receita específica.

Veja um exemplo da aparência das páginas de detalhes:

Cookies de pasta de amendoim


<html>
  <head>
    <title>Peanut Butter Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Peanut Butter Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Peanut Butter Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "peanut butter, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of peanut butter",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the peanut butter and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Peanut Butter Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make peanut butter cookies.
    </p>
    <ol>
      <li>Mix together the peanut butter and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

Cookies de três tipos de chocolate


<html>
  <head>
    <title>Triple Chocolate Chunk Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Triple Chocolate Chunk Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Triple Chocolate Chunk Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "chocolate, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of melted chocolate",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the chocolate and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Triple Chocolate Chunk Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make Triple Chocolate Chunk Cookies.
    </p>
    <ol>
      <li>Mix together the chocolate and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

Biscoitos de canela


<html>
  <head>
    <title>Snickerdoodles</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Snickerdoodles",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Snickerdoodles recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "cinnamon sugar, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of cinnamon",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the cinnamon and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Snickerdoodles",
        "description": "This is how you make snickerdoodles.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make snickerdoodles.
    </p>
    <ol>
      <li>Mix together the cinnamon and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

Lista em uma única página

Uma lista em uma única página contém todas as informações do carrossel, incluindo o texto completo de cada item. Por exemplo, uma lista dos principais filmes de 2020, todos em uma única página. Esta página não está vinculada a outras páginas de detalhes.

Veja um exemplo de uma lista em uma única página:


<html>
  <head>
    <title>The Best Movies from the Oscars - 2018</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": "1",
          "item": {
            "@type": "Movie",
            "url": "https://example.com/2019-best-picture-noms#a-star-is-born",
            "name": "A Star Is Born",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-10-05",
            "director": {
                "@type": "Person",
                "name": "Bradley Cooper"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "5"
              },
              "author": {
                "@type": "Person",
                "name": "John D."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "90",
                "bestRating": "100",
                "ratingCount": "19141"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "2",
          "item": {
            "@type": "Movie",
            "name": "Bohemian Rhapsody",
            "url": "https://example.com/2019-best-picture-noms#bohemian-rhapsody",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-11-02",
            "director": {
                "@type": "Person",
                "name": "Bryan Singer"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "3"
              },
              "author": {
                "@type": "Person",
                "name": "Vin S."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "61",
                "bestRating": "100",
                "ratingCount": "21985"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "3",
          "item": {
            "@type": "Movie",
            "name": "Black Panther",
            "url": "https://example.com/2019-best-picture-noms#black-panther",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-02-16",
            "director": {
                "@type": "Person",
                "name": "Ryan Coogler"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "2"
              },
              "author": {
                "@type": "Person",
                "name": "Trevor R."
              }
            },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "96",
                "bestRating": "100",
                "ratingCount": "88211"
              }
            }
          }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Diretrizes

Além das diretrizes gerais de dados estruturados, as seguintes diretrizes se aplicam aos dados estruturados de carrossel:

  • Todos os itens da lista devem ser do mesmo tipo. Por exemplo, se uma lista for sobre receitas, inclua somente itens Recipe. Não misture tipos diferentes.
  • Verifique se os dados estruturados de carrossel estão completos e contêm todos os itens listados na página.
  • O texto visível para o usuário precisa ser semelhante às informações contidas nos dados estruturados da página.
  • Os itens mostrados em formato de lista aparecerão na ordem especificada pela propriedade position.

Validar e implantar dados estruturados

  1. Valide o código usando o teste de pesquisa aprimorada. Para uma página de resumo, há algumas coisas que você precisa verificar:
    • Se itemListElement contém dois ou mais elementos ListItem.
    • Se todos os elementos ListItem são do mesmo tipo (por exemplo, todos são sobre receitas).
    • Valide cada URL mencionado na lista usando o Teste de pesquisa aprimorada. Cada página da lista deve conter dados estruturados válidos, de acordo com a documentação do tipo de conteúdo compatível relacionado à lista: Receita, Curso, Restaurante, Filme.
  2. Implante algumas páginas que incluam seus dados estruturados e use a Ferramenta de inspeção de URL para testar como o Google vê a página. Confirme se a página está acessível ao Google e se não está bloqueada por um arquivo robots.txt, pela tag noindex ou por requisitos de login. Se estiver tudo certo, peça ao Google para rastrear novamente seus URLs.
  3. Para manter o Google informado sobre alterações futuras, recomendamos que você envie um sitemap. É possível automatizar isso com a API Search Console Sitemap.

Definições de tipos de dados estruturados

Para especificar uma lista, defina uma ItemList que contenha pelo menos dois ListItems. É necessário incluir as propriedades obrigatórias para que seu conteúdo esteja qualificado para exibição em uma pesquisa aprimorada.

ItemList

ItemList é o item de contêiner que tem todos os elementos da lista. Se usado em uma página de resumo, todos os URLs na lista precisarão apontar para páginas diferentes no mesmo domínio. Se usados em uma lista em uma única página, todos os URLs precisam apontar para uma âncora na página que hospeda os dados estruturados da lista.

A definição completa de ItemList está disponível em schema.org/ItemList (em inglês).

Veja as propriedades aceitas pelo Google:

Propriedades obrigatórias
itemListElement

ListItem

É uma lista de itens. Todos os itens precisam ser do mesmo tipo. Consulte ListItem para ver detalhes.

ListItem

ListItem contém detalhes sobre um item individual na lista.

  • Se esta for uma página de resumo, inclua somente as propriedades type, position e url no ListItem.
  • Se for uma lista em uma única página, inclua todas as propriedades adicionais do schema.org para o tipo de dados descrito. Os tipos de dados compatíveis são:

A definição completa de ListItem está disponível em schema.org/ListItem (em inglês).

Páginas de resumo

As seguintes propriedades se aplicam a páginas de resumo:

Propriedades obrigatórias
position

Integer

É a posição do item no carrossel. Trata-se de um número baseado em 1.

url

URL

É o URL canônico da página de detalhes do item. Todos os URLs da lista precisam ser exclusivos, mas têm que estar no mesmo domínio (o mesmo domínio ou sub/superdomínio da página atual).

Páginas únicas

As seguintes propriedades se aplicam a todas as páginas únicas:

Propriedades obrigatórias
item

Thing

É um item individual em uma lista. Preencha este objeto com os seguintes valores, além de todas as propriedades do tipo específico de dado estruturado que está sendo descrito:

  • item.name
  • item.url
  • Qualquer outra propriedade necessária para esse tipo de dado, conforme descrito no schema.org, e as regras descritas nos documentos para o tipo de conteúdo: Exemplo: para uma receita, você forneceria as propriedades prepTime e image.
item.name

Text

É o nome da string do item. O item.name é exibido como o título de um item individual no carrossel. A formatação HTML é ignorada.

item.url

URL

É o URL totalmente qualificado e a âncora de página para este item na página. O URL precisa ser a página atual, e você precisa incluir uma âncora HTML (tag <a> ou valor name ou id) na sua página, perto do texto visível para o usuário. Exemplo: https://example.org/recipes/pies#apple_pie.

position

Integer

É a posição do item no carrossel. Trata-se de um número baseado em 1.

Solução de problemas

Se você tiver problemas para implementar ou depurar dados estruturados, veja alguns recursos que podem ajudar.