Carrusel

Un carrusel es un resultado enriquecido, similar a una lista que puedes deslizar, que los usuarios pueden consultar desde sus dispositivos móviles. Muestra varias tarjetas de un mismo sitio web, denominado carrusel de host. Para habilitar un carrusel en tu sitio web, combina datos estructurados de carruseles con alguno de los siguientes tipos de contenido compatibles:

A continuación, se muestra el aspecto que pueden tener los carruseles en la Búsqueda de Google si se añaden etiquetas de carrusel junto con un tipo de contenido compatible:

Ejemplos de un carrusel de host de recetas, otro de cursos y un último de películas en la Búsqueda de Google

Añadir datos estructurados

Los datos estructurados son un formato estandarizado con el que se puede proporcionar información sobre una página y clasificar su contenido. Consulta cómo funcionan los datos estructurados si aún no te has familiarizado con ellos.

A continuación, ofrecemos una descripción general de cómo añadir datos estructurados a tu sitio web:

  1. Decide qué página contendrá los datos estructurados del carrusel. Hay dos opciones:
    • Una página de resumen y varias páginas de detalles: la página de resumen tiene una breve descripción de cada elemento de la lista, y cada descripción redirige a una página de detalles dedicada por completo a un elemento. Por ejemplo, una página de resumen en la que figuran las mejores recetas de galletas y donde cada descripción incluye un enlace a la receta completa.
    • Lista única todo en uno: una página que contiene toda la información de la lista, incluido el texto completo de cada elemento. Por ejemplo, una lista con las mejores películas del 2020 en una sola página.
  2. Añade las propiedades obligatorias. Para saber dónde colocar datos estructurados en tus páginas, echa un vistazo a este vídeo, en el que se explica dónde insertar datos estructurados JSON-LD en una página.
  3. Añade las propiedades obligatorias y recomendadas para el tipo de contenido específico del carrusel:
  4. Sigue las directrices.

Una página de resumen y varias páginas de detalles

La página de resumen tiene una breve descripción de cada elemento de la lista, y cada descripción redirige a una página de detalles dedicada por completo a un elemento.

Página de resumen

Define un elemento ItemList, donde cada elemento ListItem solo tiene tres propiedades: @type (que es "ListItem"), position (la posición en la lista) y url (la URL de una página con todos los detalles sobre ese elemento).

Este es un ejemplo de página de resumen:


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"http://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://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 detalles

En las páginas de detalles se define el tipo de datos estructurados específico de un carrusel. Por ejemplo, si la página de resumen trata sobre las mejores recetas de galletas, cada página de detalles contendría datos estructurados de tipo Recipe para una receta específica.

A continuación se muestra un ejemplo de cómo son las páginas de detalles:

Galletas de mantequilla de cacahuete


<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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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>

Galletas de tres chocolates


<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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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>

Galletas de azúcar y 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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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 única todo en uno

Una lista única con todo en una página que aloja toda la información de un carrusel, incluido el texto completo de cada elemento. Por ejemplo, una lista con las mejores películas del 2020 en una sola página. Esta página no incluye enlaces a otras páginas de detalles.

A continuación se muestra un ejemplo de una página todo en uno:


<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."
              },
              "reviewBody": "Heartbreaking, inpsiring, moving. Bradley Cooper is a triple threat."
              },
              "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."
              },
              "reviewBody": "Rami Malek's performance is overrated, at best."
              },
              "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."
              },
              "reviewBody": "I didn't like the lighting and CGI in this movie."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "96",
                "bestRating": "100",
                "ratingCount": "88211"
              }
            }
          }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Directrices

Además de las directrices generales de datos estructurados, se aplican las siguientes directrices a los datos estructurados de carrusel:

  • Todos los elementos de la lista deben ser del mismo tipo. Por ejemplo, si una lista está relacionada con recetas, incluye solo elementos Recipe. No combines varios tipos.
  • Comprueba que los datos estructurados de un carrusel están completos y que contienen todos los elementos que aparecen en la página relacionada.
  • El texto visible para el usuario debe ser similar a la información contenida en los datos estructurados de la página.
  • Los elementos que aparecen en formato de lista se mostrarán en el orden especificado por la propiedad position.

Validar e implementar datos estructurados

  1. Valida tu código con la prueba de resultados enriquecidos. En el caso de las páginas de resumen, debes verificar lo siguiente:
    • Comprueba que el valor itemListElement contenga dos o más elementos ListItem.
    • Asegúrate de que todos los elementos ListItem sean del mismo tipo (por ejemplo, que todos estén relacionados con recetas).
    • Valida cada URL mencionada en la lista mediante la prueba de resultados enriquecidos. Cada página de la lista debe contener datos estructurados válidos según la documentación correspondiente a alguno de estos tipos de contenido compatibles: receta, curso, restaurante y película.
  2. Crea varias páginas que incluyan tus datos estructurados y comprueba cómo las ve Google con la herramienta de inspección de URLs. Asegúrate de que Google pueda acceder a tu página y de que no esté bloqueada por un archivo robots.txt, la etiqueta noindex ni por requisitos de inicio de sesión. Si la página se ve bien, puedes solicitar que Google vuelva a rastrear tus URL.
  3. Para que Google siempre tenga la versión actualizada de tus páginas, te recomendamos que envíes un sitemap. Puedes automatizar este envío con la API Sitemap de Search Console.

Definiciones de tipos de datos estructurados

Para especificar una lista, define un valor ItemList que contenga al menos dos ListItems. Debes incluir las propiedades obligatorias para que tu contenido pueda mostrarse como un resultado enriquecido.

ItemList

ItemList es el elemento que contiene todos los elementos de la lista. Si se usa en una página de resumen, todas las URL de la lista deben dirigir a diferentes páginas del mismo dominio. Si se usa en una lista todo en uno, las URL deben dirigir a un ancla en la página que aloja los datos estructurados de la lista.

Puedes consultar la definición completa de ItemList en schema.org/ItemList.

Propiedades obligatorias
itemListElement

ListItem

Es una lista de elementos. Todos los elementos deben ser del mismo tipo. Consulta más información sobre ListItem.

ListItem

ListItem contiene detalles sobre un elemento concreto en la lista.

  • Si se trata de una página de resumen, incluye solo las propiedades type, position y url en ListItem.
  • Si se trata de una lista todo en uno, incluye todas las propiedades adicionales de schema.org del tipo de datos que describe. Los tipos de datos compatibles son los siguientes:

Puedes consultar la definición completa de ListItem en schema.org/ListItem.

Páginas de resumen

Las siguientes propiedades se aplican a las páginas de resumen:

Propiedades obligatorias
position

Integer

Indica la posición del elemento en el carrusel. Se trata de un número que tomará como referencia el 1.

url

URL

Indica la URL canónica de la página de detalles de un elemento. Todas las URL que aparecen en la lista deben ser únicas, pero tienen que pertenecer al mismo dominio o al mismo subdominio o superdominio que la página actual.

Páginas todo en uno

Las siguientes propiedades se aplican a páginas todo en uno:

Propiedades obligatorias
item

Thing

Indica un elemento concreto de una lista. Rellena este objeto con los siguientes valores, además de con todas las propiedades del tipo de datos estructurados específico que se esté describiendo:

  • item.name
  • item.url
  • Indica cualquier otra propiedad obligatoria para este tipo de datos, tal como se especifica en schema.org y en las reglas descritas en esos documentos para tu tipo de contenido: Ejemplo: si se tratara de una receta, añadirías las propiedades prepTime y image.
item.name

Text

Indica el nombre de la cadena del elemento. item.name aparece como título de un elemento concreto del carrusel. Se ignora el formato HTML.

item.url

URL

Indica la URL completa y el ancla de este elemento de la página. La URL debe ser la de la página actual y se debe incluir un ancla HTML (con etiqueta <a> o name o con valor id) en tu página cerca del texto visible para el usuario. Ejemplo: https://example.org/recipes/pies#apple_pie.

position

Integer

Indica la posición del elemento en el carrusel. Se trata de un número que tomará como referencia el 1.

Solucionar problemas

Si tienes problemas para implementar datos estructurados en tu contenido, a continuación se incluyen recursos que pueden resultarte útiles.