Esegui il markup delle tue pagine di istruzioni con i dati strutturati

Utilizza i dati strutturati HowTo per informare esplicitamente Google che il tuo contenuto contiene istruzioni. Le istruzioni illustrano agli utenti una serie di passaggi per completare un'attività e possono includere video, immagini e testo. Ad esempio, "Come annodare la cravatta" o "Come piastrellare il paraspruzzi della cucina". Se ogni passaggio delle istruzioni deve essere letto in sequenza, i tuoi contenuti potrebbero trarre vantaggio dai dati strutturati HowTo. I dati strutturati HowTo sono appropriati quando le istruzioni costituiscono i contenuti principali della pagina.

Le pagine di istruzioni con markup corretto potrebbero essere idonee ad avere un risultato multimediale nei risultati di ricerca e un'azione per l'Assistente Google, funzionalità che possono aiutare il tuo sito a raggiungere gli utenti giusti.

Come aggiungere dati strutturati

I dati strutturati sono un formato standardizzato per fornire informazioni su una pagina e classificarne i contenuti. Se non li hai mai utilizzati, leggi ulteriori informazioni su come funzionano i dati strutturati.

Ecco una panoramica su come creare, testare e rilasciare i dati strutturati. Per una guida passo passo su come aggiungere dati strutturati a una pagina web, consulta il codelab sui dati strutturati.

  1. Aggiungi le proprietà richieste. Per informazioni su dove inserire i dati strutturati nella pagina, guarda il video JSON-LD structured data: Where to insert on the page.
  2. Segui le linee guida.
  3. Convalida il codice utilizzando il test dei risultati multimediali.
  4. Esegui il deployment di alcune pagine che includono dati strutturati e utilizza lo strumento Controllo URL per verificare come Google vede la pagina. Assicurati che la pagina sia accessibile per Google e che non venga bloccata da file robots.txt, tag noindex o requisiti di accesso. Se la pagina non sembra presentare problemi, puoi chiedere a Google di ripetere la scansione degli URL.
  5. Per tenere Google informata delle future modifiche, ti consigliamo di inviare una Sitemap. Puoi automatizzare questa operazione con l'API Search Console Sitemap.

Disponibilità della funzionalità

I risultati multimediali di istruzioni sono attualmente disponibili in tutte le lingue e i paesi in cui è disponibile la Ricerca Google. La funzionalità è disponibile soltanto sui dispositivi mobili, non su quelli desktop.

Esempi

Ecco alcuni esempi di come i tuoi contenuti possono essere visualizzati nei risultati multimediali di istruzioni. Una variante più visiva può essere visualizzata se le istruzioni contengono un'immagine della procedura completa e un'immagine per ciascun passaggio. Assicurati di aggiungere il maggior numero possibile di proprietà obbligatorie e consigliate, in modo che le istruzioni possano essere rappresentate in modo efficace nella Ricerca Google.

Risultato multimediale di istruzioni standard

Immagine di un risultato multimediale con istruzioni standard
JSON-LD

Ecco un esempio di pagina di istruzioni basata su testo che utilizza JSON-LD. L'esempio è solo un'immagine che rappresenta lo stato finale delle istruzioni. In questo risultato, gli utenti possono vedere un'anteprima dei contenuti per alcuni passaggi.

<html>
  <head>
    <title>How to tile a kitchen backsplash</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "HowTo",
      "name": "How to tile a kitchen backsplash",
      "description": "Any kitchen can be much more vibrant with a great tile backsplash. This guide will help you install one with beautiful results, like our example kitchen seen here.",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/photos/1x1/photo.jpg",
        "height": "406",
        "width": "305"
      },
      "estimatedCost": {
        "@type": "MonetaryAmount",
        "currency": "USD",
        "value": "100"
      },
      "supply": [
        {
          "@type": "HowToSupply",
          "name": "tiles"
        }, {
          "@type": "HowToSupply",
          "name": "thin-set mortar"
        }, {
          "@type": "HowToSupply",
          "name": "tile grout"
        }, {
          "@type": "HowToSupply",
          "name": "grout sealer"
        }
      ],
      "tool": [
        {
          "@type": "HowToTool",
          "name": "notched trowel"
        }, {
          "@type": "HowToTool",
          "name": "bucket"
        },{
          "@type": "HowToTool",
          "name": "large sponge"
        }
      ],
      "step": [
        {
          "@type": "HowToStep",
          "url": "https://example.com/kitchen#step1",
          "name": "Prepare the surfaces",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled."
          }, {
            "@type": "HowToDirection",
            "text": "Then clean the surface thoroughly to remove any grease or other debris and tape off the area."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step1.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Plan your layout",
          "url": "https://example.com/kitchen#step2",
          "itemListElement": [{
            "@type": "HowToTip",
            "text": "The creases created up until this point will be guiding lines for creating the four walls of your planter box."
          }, {
            "@type": "HowToDirection",
            "text": "Lift one side at a 90-degree angle, and fold it in place so that the point on the paper matches the other two points already in the center."
          }, {
            "@type": "HowToDirection",
            "text": "Repeat on the other side."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step2.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Prepare your and apply mortar (or choose adhesive tile)",
          "url": "https://example.com/kitchen#step3",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Follow the instructions on your thin-set mortar to determine the right amount of water to fill in your bucket. Once done, add the powder gradually and make sure it is thoroughly mixed."
          }, {
            "@type": "HowToDirection",
            "text": "Once mixed, let it stand for a few minutes before mixing it again. This time do not add more water. Double check your thin-set mortar instructions to make sure the consistency is right."
          }, {
            "@type": "HowToDirection",
            "text": "Spread the mortar on a small section of the wall with a trowel."
          }, {
            "@type": "HowToTip",
            "text": "Thinset and other adhesives set quickly so make sure to work in a small area."
          }, {
            "@type": "HowToDirection",
            "text": "Once it’s applied, comb over it with a notched trowel."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step3.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Add your tile to the wall",
          "url": "https://example.com/kitchen#step4",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Place the tile sheets along the wall, making sure to add spacers so the tiles remain lined up."
          }, {
            "@type": "HowToDirection",
            "text": "Press the first piece of tile into the wall with a little twist, leaving a small (usually one-eight inch) gap at the countertop to account for expansion. use a rubber float to press the tile and ensure it sets in the adhesive."
          }, {
            "@type": "HowToDirection",
            "text": "Repeat the mortar and tiling until your wall is completely tiled, Working in small sections."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step4.jpg",
            "height": "406",
            "width": "305"
          }
        }, {
          "@type": "HowToStep",
          "name": "Apply the grout",
          "url": "https://example.com/kitchen#step5",
          "itemListElement": [{
            "@type": "HowToDirection",
            "text": "Allow the thin-set mortar to set. This usually takes about 12 hours. Don’t mix the grout before the mortar is set, because you don’t want the grout to dry out!"
          }, {
            "@type": "HowToDirection",
            "text": "To apply, cover the area thoroughly with grout and make sure you fill all the joints by spreading it across the tiles vertically, horizontally, and diagonally. Then fill any remaining voids with grout."
          }, {
            "@type": "HowToDirection",
            "text": "Then, with a moist sponge, sponge away the excess grout and then wipe clean with a towel. For easier maintenance in the future, think about applying a grout sealer."
          }],
          "image": {
            "@type": "ImageObject",
            "url": "https://example.com/photos/1x1/photo-step5.jpg",
            "height": "406",
            "width": "305"
          }
        }
      ],
      "totalTime": "P2D"
    }
    </script>
  </head>
  <body>
  </body>
</html>
Microdati

Di seguito è riportato un esempio di una pagina di istruzioni basata su testo che utilizza i microdati. L'esempio è solo un'immagine che rappresenta lo stato finale delle istruzioni. In questo risultato, gli utenti possono vedere un'anteprima dei contenuti per alcuni passaggi.

<html>
<head>
<title>How to tile a kitchen backsplash</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/HowTo">
  <strong><span itemprop="name">How to tile a kitchen backsplash</span></strong>
  <div>About <span itemprop="estimatedCost" itemscope itemtype="http://schema.org/MonetaryAmount">
    <meta itemprop="currency" content="USD"/>
    <meta itemprop="value" content="100"/>
    $100
  </span>
  </div>
  <div>About <span itemprop="totalTime" content="P2D">2 days</span></div>
  <div itemprop="description">Any kitchen can be much more vibrant with a great
    tile backsplash. This guide will help you install one with beautiful
    results, like our example kitchen seen here.
  </div>
  <div>Necessary Items:</div>
  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=1">
      <span itemprop="name">tiles</span>
    </a>
    <img alt="image of a tiles" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=2">
      <span itemprop="name">thin-set mortar</span>
    </a>
    <img alt="image of thin-set mortar" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=3">
      <span itemprop="name">tile grout</span>
    </a>
    <img alt="image of a tile grout" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="supply" itemscope itemtype="http://schema.org/HowToSupply">
    <a itemprop="url" href="https://example.com/supplies?id=4">
      <span itemprop="name">grout sealer</span>
    </a>
    <img alt="image of grout sealer" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/supplies?id=5">
      <span itemprop="name">notched trowel</span>
    </a>
    <img alt="image of a notched trowel" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/tools?id=6">
      <span itemprop="name">bucket</span>
    </a>
    <img alt="image of a bucket" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div itemprop="tool" itemscope itemtype="http://schema.org/HowToTool">
    <a itemprop="url" href="https://example.com/tools?id=7">
      <span itemprop="name">large sponge</span>
    </a>
    <img alt="image of a large sponge" itemprop="image"
         src="https://example.com/photos/1x1/photo.jpg"/>
  </div>
  <div id="step1" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step1" />
    <div itemprop="name">Preparation</div>
    <img itemprop="image" alt="image showing preparation"
         src="https://example.com/photos/1x1/photo-step1.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Turn off the power to the kitchen and then remove
        everything that is on the wall, such as outlet covers, switchplates, and any other item in
        the area that is to be tiled. Then clean the surface thoroughly to remove any grease or
        other debris and tape off the area.
      </div>
    </div>
  </div>
  <div id="step2" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step2" />
    <div itemprop="name">Plan your Layout</div>
    <img itemprop="image" alt="image showing layout planning"
           src="https://example.com/photos/1x1/photo-step2.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Lay out your tile horizontally below the wall where you’re going to
        place it. This makes it easy to ensure that your pattern will fit in the space provided.
        Also it helps you double check that you have enough tile and know exactly where each piece
        will go.
      </div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Spread the mortar on a small section of the wall with a trowel. Thinset
        and other adhesives set quickly so make sure to work in a small area. Once it’s applied,
        comb over it with a notched trowel.
      </div>
    </div>
  </div>
  <div id="step3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step3" />
    <div itemprop="name">Add your tile to the wall</div>
    <img itemprop="image" alt="image grout application"
         src="https://example.com/photos/1x1/photo-step3.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Place the tile sheets along the wall, making sure to add spacers so the
        tiles remain lined up. Press the first piece of tile into the wall with a little twist,
        leaving a small (usually one-eight inch) gap at the countertop to account for expansion.
        use a rubber float to press the tile and ensure it sets in the adhesive. Repeat the mortar
        and tiling until your wall is completely tiled, working in small sections.
      </div>
    </div>
  </div>
  <div id="step4" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <link itemprop="url" href="https://example.com/example#step4" />
    <div itemprop="name">Apply the grout</div>
    <img itemprop="image" alt="image grout application"
         src="https://example.com/photos/1x1/photo-step4.jpg"/>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Allow the thin-set mortar to set. This usually takes about 12 hours.
        Don’t mix the grout before the mortar is set, because you don’t want the grout to dry out!
        To apply, cover the area thoroughly with grout and make sure you fill all the joints by
        spreading it across the tiles vertically, horizontally, and diagonally. Then fill any
        remaining voids with grout.
      </div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Then, with a moist sponge, sponge away the excess grout and then wipe
        clean with a towel. For easier maintenance in the future, think about applying a grout
        sealer.
      </div>
    </div>
  </div>
</div>
</body>
</html>

Risultato multimediale di istruzioni con immagini per ogni passaggio

Immagine di un risultato multimediale con istruzioni visive
JSON-LD

Di seguito è riportato un esempio di una pagina di istruzioni con immagini per ogni passaggio, che utilizza JSON-LD. Quando c'è un'immagine per ogni passaggio, gli utenti possono vedere un'anteprima con un carosello di immagini.

<html>
  <head>
    <title>How to tie a tie</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "HowTo",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
      },
      "name": "How to tie a tie",
      "description": "The four-in-hand knot is a great look for any occasion. From formal suits to casual jacket and tie affairs, it’s a simple way to quickly look great. Once you have mastered the knot you can tie it in just a minute, so it’s also great when you’re in a pinch too. ",
      "totalTime": "PT2M",
      "video": {
        "@type": "VideoObject",
        "name": "Tie a Tie",
        "description": "How to tie a four-in-hand knot.",
        "thumbnailUrl": "https://example.com/photos/photo.jpg",
        "contentUrl": "http://www.example.com/videos/123_600x400.mp4",
        "embedUrl": "http://www.example.com/videoplayer?id=123",
        "uploadDate": "2019-01-05T08:00:00+08:00",
        "duration": "P1MT10S"
      },
      "supply": [
        {
          "@type": "HowToSupply",
          "name": "A tie"
        }, {
          "@type": "HowToSupply",
          "name": "A collared shirt"
        }
      ],
      "tool": [
        {
          "@type": "HowToTool",
          "name": "A mirror"
        }
      ],
      "step":[
        {
          "@type": "HowToStep",
          "name": "Preparations",
          "text": "Button your shirt how you’d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.",
          "image": "https://example.com/1x1/step1.jpg",
          "url": "https://example.com/tie#step1"
        }, {
          "@type": "HowToStep",
          "name": "Crossing once",
          "text": "Cross the long end over the short end. This will form the basis for your knot.",
          "image": "https://example.com/1x1/step2.jpg",
          "url": "https://example.com/tie#step2"
        }, {
          "@type": "HowToStep",
          "name": "Second crossing",
          "text": "Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.",
          "image": "https://example.com/1x1/step3.jpg",
          "url": "https://example.com/tie#step3"
        }, {
          "@type": "HowToStep",
          "name": "Loop in",
          "text": "Now pull the long end through the loop near your neck, forming another loop near your neck.",
          "image": "https://example.com/1x1/step4.jpg",
          "url": "https://example.com/tie#step4"
        }, {
          "@type": "HowToStep",
          "name": "Pull and tighten",
          "text": "Pull the long end through that new loop and tighten to fit!",
          "image": "https://example.com/1x1/step5.jpg",
          "url": "https://example.com/tie#step5"
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>
Microdati

Di seguito è riportato un esempio di una pagina di istruzioni, con immagini per ogni passaggio, che utilizza i microdati. Quando c'è un'immagine per ogni passaggio, gli utenti possono vedere un'anteprima con un carosello di immagini.

<html>
<head>
<title>How to tie a tie</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/HowTo">
  <strong><span itemprop="name">How to tie a tie</span></strong>
  <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
  <div itemprop="description">The four-in-hand knot is a great look for any occasion. From formal suits to casual jacket and tie affairs, it’s a simple way to quickly look great. Once you have mastered the knot you can tie it in just a minute, so it’s also great when you’re in a pinch too. </div>
  <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
    <meta itemprop="name" content="Tie a Tie" />
    <meta itemprop="description" content="How to tie a four-in-hand knot." />
    <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
    <link itemprop="contentUrl" content="http://www.example.com/videos/123_600x400.mp4" />
    <link itemprop="embedUrl" content="http://www.example.com/videoplayer?id=123" />
    <meta itemprop="duration" content="P1MT10S" />
    <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
    <video>...</video>
  </div>
  <div>Necessary Items:</div>
  <div itemprop="supply" itemtype="http://schema.org/HowToSupply">A tie</div>
  <div itemprop="supply" itemtype="http://schema.org/HowToSupply">A collared Shirt</div>
  <div itemprop="tool" itemtype="http://schema.org/HowToTool">A mirror</div>
  <div>
    <div id="step1" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
      <div itemprop="name">Preparations</div>
      <div itemprop="text">Button your shirt how you’d like to wear it, then drape the tie around your neck. Make the thick end about 1/3rd longer than the short end. For formal button down shirts, it usually works best with the small end of the tie between 4th and 5th button.</div>
      <div itemprop="image">https://example.com/1x1/photo1.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step1" />
    </div>

    <div id="step2" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
      <div itemprop="name">Crossing once</div>
      <div itemprop="text">Cross the long end over the short end. This will form the basis for your knot.</div>
      <div itemprop="image">https://example.com/1x1/photo2.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step2" />
    </div>

    <div id="step3" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
      <div itemprop="name">Second crossing</div>
      <div itemprop="text">Bring the long end back under the short end, then throw it back over the top of the short end in the other direction.</div>
      <div itemprop="image">https://example.com/1x1/photo3.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step3" />
    </div>

    <div id="step4" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
      <div itemprop="name">Loop in</div>
      <div itemprop="text">Now pull the long end through the loop near your neck, forming another loop near your neck.</div>
      <div itemprop="image">https://example.com/1x1/photo4.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step4" />
    </div>

    <div id="step5" itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
      <div itemprop="name">Pull and tighten</div>
      <div itemprop="text">Pull the long end through that new loop and tighten to fit!</div>
      <div itemprop="image">https://example.com/1x1/photo5.jpg</div>
      <meta itemprop="url" content="https://example.com/tie#step5" />
    </div>
  </div>
</div>
</body>
</html>

Risultato multimediale di istruzioni con video

JSON-LD

Di seguito è riportato un esempio di una pagina di istruzioni, che contiene una combinazione di testo, immagini e video clip, che utilizza JSON-LD.

<html>
  <head>
    <title>How to create a Trivia action</title>
    <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "HowTo",
      "image": {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg"
      },
      "name": "How to create a Trivia action",
      "description": "Learn how to create a Trivia action for Assistant within minutes.",
      "totalTime": "PT2M",
      "video": {
        "@type": "VideoObject",
        "name": "Build a Trivia Game for the Google Assistant with No Code",
        "description": "Learn how to create a Trivia action for Assistant within minutes.",
        "thumbnailUrl": "https://example.com/photos/photo.jpg",
        "contentUrl": "https://www.youtube.com/watch?v=4AOI1tZrgMI",
        "embedUrl": "https://www.youtube.com/embed/4AOI1tZrgMI",
        "uploadDate": "2019-01-05T08:00:00+08:00",
        "duration": "P1MT10S",
        "hasPart": [
          {
            "@type": "Clip",
            "@id": "Clip1",
            "name": "Open Actions on Google Console",
            "startOffset": 29,
            "endOffset": 36,
            "url": "http://www.example.com/example&amp;t=29"
          },
          {
            "@type": "Clip",
            "@id": "Clip2",
            "name": "Select Trivia Template",
            "startOffset": 36,
            "endOffset": 45,
            "url": "http://www.example.com/example&amp;t=36"
          },
          {
            "@type": "Clip",
            "@id": "Clip3",
            "name": "Choose a Personality",
            "startOffset": 45,
            "endOffset": 65,
            "url": "http://www.example.com/example&amp;t=45"
          },
          {
            "@type": "Clip",
            "@id": "Clip4",
            "name": "Feed your content",
            "startOffset": 65,
            "endOffset": 154,
            "url": "http://www.example.com/example&amp;t=65"
          },
          {
            "@type": "Clip",
            "@id": "Clip5",
            "name": "Create the action",
            "startOffset": 154,
            "endOffset": 172,
            "url": "http://www.example.com/example&amp;t=154"
          },
          {
            "@type": "Clip",
            "@id": "Clip6",
            "name": "Test your action",
            "startOffset": 172,
            "endOffset": 212,
            "url": "http://www.example.com/example&amp;t=172"
          },
          {
            "@type": "Clip",
            "@id": "Clip7",
            "name": "Submit your action",
            "startOffset": 212,
            "endOffset": 285,
            "url": "http://www.example.com/example&amp;t=212"
          }
        ]
      },
      "step": [
        {
          "@type": "HowToStep",
          "name": "Open Actions on Google Console",
          "text": "Navigate to https://console.actions.google.com to get started.",
          "image": "https://example.com/1x1/step1.jpg",
          "url": "https://example.com/tie#step1",
          "video": {
            "@id": "Clip1"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Select Trivia Template",
          "text": "Create a new project and select Templates | You have a choice to select between Trivia, Flashcard or Personality Quiz.",
          "image": "https://example.com/1x1/step2.jpg",
          "url": "https://example.com/tie#step2",
          "video": {
            "@id": "Clip2"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Choose a Personality",
          "text": "Select one of the three personalities- Mr, Montgomery, Regal Queen, or the Trivia Bot.",
          "image": "https://example.com/1x1/step3.jpg",
          "url": "https://example.com/tie#step3",
          "video": {
            "@id": "Clip3"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Feed your content",
          "itemListElement": [
            {
              "@type": "HowToDirection",
              "text": "Make a copy of our pre-filled sheet and replace with your content."
            },
            {
              "@type": "HowToDirection",
              "text": "Ensure you make the sheet publicly accessible. Copy the URL of the sheet and paste it into the Console."
            }
          ],
          "image": "https://example.com/1x1/step4.jpg",
          "url": "https://example.com/tie#step4",
          "video": {
            "@id": "Clip4"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Create the action",
          "text": "Create the action. Once content is successfully uploaded, it will take couple of minutes to create the action.",
          "image": "https://example.com/1x1/step5.jpg",
          "url": "https://example.com/tie#step5",
          "video": {
            "@id": "Clip5"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Test your action",
          "text": "Navigate to the Simulator to test your action and simulate various surfaces, locations and locales.",
          "image": "https://example.com/1x1/step6.jpg",
          "url": "https://example.com/tie#step6",
          "video": {
            "@id": "Clip6"
          }
        },
        {
          "@type": "HowToStep",
          "name": "Submit your action",
          "text": "Once you complete directory information and invocation names, submit your action for all Assistant users to see and use your action.",
          "image": "https://example.com/1x1/step7.jpg",
          "url": "https://example.com/tie#step7",
          "video": {
            "@id": "Clip7"
          }
        }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>
Microdati

Di seguito è riportato un esempio di una pagina di istruzioni, che contiene una combinazione di testo, immagini e video clip, che utilizza i microdati.

<html>
<head>
<title>How to create a Trivia action</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/HowTo">
  <strong><span itemprop="name">How to create a Trivia action</span></strong>
  <div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
  <div itemprop="description"> Learn how to create a Trivia action for Assistant within minutes. </div>
  <div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
    <meta itemprop="name" content="Tie a Tie" />
    <meta itemprop="description" content="How to tie a four-in-hand knot." />
    <link itemprop="thumbnailUrl" content="https://example.com/photos/photo.jpg" />
    <link itemprop="contentUrl" content="http://www.example.com/videos/123_600x400.mp4" />
    <link itemprop="embedUrl" content="http://www.example.com/videoplayer?id=123" />
    <meta itemprop="duration" content="P1MT10S" />
    <meta itemprop="uploadDate" content="2019-01-05T08:00:00+08:00" />
    <div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip1">
        <div itemprop="name">Open Actions on Google Console</div>
        <div itemprop="startOffset">29</div>
        <div itemprop="endOffset">36</div>
        <div itemprop="url">http://www.example.com/example&amp;t=29</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip2">
        <div itemprop="name">Select Trivia Template</div>
        <div itemprop="startOffset">36</div>
        <div itemprop="endOffset">45</div>
        <div itemprop="url">http://www.example.com/example&amp;t=36</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip3">
        <div itemprop="name">Choose a Personality</div>
        <div itemprop="startOffset">45</div>
        <div itemprop="endOffset">65</div>
        <div itemprop="url">http://www.example.com/example&amp;t=45</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip4">
        <div itemprop="name">Feed your content</div>
        <div itemprop="startOffset">65</div>
        <div itemprop="endOffset">154</div>
        <div itemprop="url">http://www.example.com/example&amp;t=65</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip5">
        <div itemprop="name">Create the action</div>
        <div itemprop="startOffset">154</div>
        <div itemprop="endOffset">172</div>
        <div itemprop="url">http://www.example.com/example&amp;t=154</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip6">
        <div itemprop="name">Test your action</div>
        <div itemprop="startOffset">172</div>
        <div itemprop="endOffset">212</div>
        <div itemprop="url">http://www.example.com/example&amp;t=172</div>
      </div>
      <div itemprop="hasPart" itemscope itemtype="http://schema.org/Clip" itemid="Clip7">
        <div itemprop="name">Submit your action</div>
        <div itemprop="startOffset">212</div>
        <div itemprop="endOffset">285</div>
        <div itemprop="url">http://www.example.com/example&amp;t=212</div>
      </div>
    </div>
    <video>...</video>
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Open Actions on Google Console</div>
    <div itemprop="text">Navigate to https://console.actions.google.com to get started.</div>
    <div itemprop="image">https://example.com/1x1/photo1.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step1" />
    <link itemprop="video" href="Clip1" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Select Trivia Template</div>
    <div itemprop="text">Create a new project and select Templates | You have a choice to select between Trivia, Flashcard or Personality Quiz.</div>
    <div itemprop="image">https://example.com/1x1/photo2.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step2" />
    <link itemprop="video" href="Clip2" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Choose a Personality</div>
    <div itemprop="text">Select one of the three personalities- Mr, Montgomery, Regal Queen, or the Trivia Bot.</div>
    <div itemprop="image">https://example.com/1x1/photo3.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step3" />
    <link itemprop="video" href="Clip3" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Feed your content</div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Make a copy of our pre-filled sheet and replace with your content.</div>
    </div>
    <div itemprop="itemListElement" itemscope itemtype="http://schema.org/HowToDirection">
      <div itemprop="text">Ensure you make the sheet publicly accessible. Copy the URL of the sheet and paste it into the Console.</div>
    </div>
    <div itemprop="image">https://example.com/1x1/photo4.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step4" />
    <link itemprop="video" href="Clip4" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Create the action</div>
    <div itemprop="text">Create the action. Once content is successfully uploaded, it will take couple of minutes to create the action.</div>
    <div itemprop="image">https://example.com/1x1/photo5.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step5" />
    <link itemprop="video" href="Clip5" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Test your action</div>
    <div itemprop="text">PNavigate to the Simulator to test your action and simulate various surfaces, locations and locales.</div>
    <div itemprop="image">https://example.com/1x1/photo6.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step6" />
    <link itemprop="video" href="Clip6" />
  </div>
  <div itemprop="step" itemscope itemtype="http://schema.org/HowToStep">
    <div itemprop="name">Submit your action</div>
    <div itemprop="text">Once you complete directory information and invocation names, submit your action for all Assistant users to see and use your action.</div>
    <div itemprop="image">https://example.com/1x1/photo7.jpg</div>
    <meta itemprop="url" content="https://example.com/tie#step7" />
    <link itemprop="video" href="Clip7" />
  </div>
</div>
</body>
</html>

Linee guida

Affinché la tua pagina sia idonea per i risultati multimediali e un'azione How-to per l'Assistente Google, devi seguire queste linee guida:

Linee guida relative ai contenuti

  • Pubblicità: non utilizzare dati strutturati HowTo per scopi pubblicitari.
  • Contenuti non idonei: i risultati multimediali di istruzioni non possono essere visualizzati se il contenuto è osceno, profano, sessualmente esplicito, violento graficamente, promuove attività pericolose o illegali, usa un linguaggio molesto o incita all'odio.
  • Origine: tutti i contenuti HowTo devono essere visibili all'utente nella pagina di origine. Le istruzioni devono essere i contenuti principali della pagina di origine. Non includere più di un elemento HowTo per pagina.
  • Materiali e strumenti: aggiungi dati strutturati a tutti i materiali e gli strumenti necessari per completare l'attività.
  • Passaggi: ogni elemento HowToStep deve includere tutti i contenuti del passaggio di origine. Non eseguire il markup come passaggio dei dati che non lo sono, ad esempio una sezione di riepilogo o di introduzione.
  • Immagini dei passaggi: se la rappresentazione ottimale dei passaggi è visiva, assicurati che le immagini in questi passaggi siano sottoposte a markup per ogni elemento HowToStep. Esegui solo il markup delle immagini dei passaggi di istruzioni specifiche di ogni passaggio e non usare la stessa immagine in più passaggi della stessa procedura. Usa le immagini corrispondenti ai contenuti della pagina. Non usare immagini che non rispecchiano i contenuti di istruzioni oppure usa immagini diverse per ottimizzare il risultato multimediale.
  • Immagine finale: se il risultato finale può essere accuratamente descritto da un'immagine, assicurati che questa immagine sia presente nella pagina e che il markup HowTo la includa usando la proprietà image. Questa immagine potrebbe essere uguale a quella sottoposta al markup per l'ultimo passaggio.
  • Contenuti: non utilizzare il markup HowTo per le ricette. Per le ricette dovresti utilizzare invece Recipe structured data. Gli articoli e i consigli generici che non rappresentano un insieme specifico di istruzioni non sono appropriati per il markup HowTo.

Definizioni dei tipi di dati strutturati

Affinché i tuoi contenuti siano idonei per essere visualizzati come risultato multimediale, devi includere le proprietà obbligatorie. Puoi anche includere le proprietà consigliate per aggiungere ulteriori informazioni ai dati strutturati, fornendo così un'esperienza utente migliore.

HowTo

La definizione completa di HowTo è disponibile all'indirizzo schema.org/HowTo.

Il tipo di HowTo indica che la pagina contiene istruzioni. Ci deve essere una definizione di tipo HowTo per pagina.

Proprietà obbligatorie
name

Text

Il titolo delle istruzioni, ad esempio, "Come annodare la cravatta".

step HowToStep o HowToSection

Un array di elementi HowToStep che comprendono le istruzioni complete della procedura. Ogni elemento step deve corrispondere a un singolo passaggio nelle istruzioni. Non eseguire il markup di dati diversi dai passaggi, ad esempio una sezione di riepilogo o di introduzione, usando questa proprietà. Ad esempio:

  • Puoi specificare il testo completo di ogni passaggio impostando la proprietà text per ogni elemento HowToStep. Gli elementi image, titoli del passaggio sotto forma di name e url, sono facoltativi ma consigliati, perché le proprietà facoltative possono contribuire alla presentazione multimediale del risultato di ricerca
  • Per passaggi complessi, puoi fornire un passaggio name ed elencare i singoli sottopassaggi con HowToDirection o HowToTip.

Un array di elementi HowToSection che comprendono l'elenco delle domande e relative risposte a cui si riferisce questo HowTo. Ad esempio:

Proprietà consigliate
description

Text

Una descrizione delle istruzioni.

estimatedCost MonetaryAmount o Text

Il costo stimato dei materiali consumati durante l'esecuzione delle istruzioni.

image ImageObject o URL

Immagine delle istruzioni completate. Ulteriori linee guida per le immagini:

  • Gli URL immagine devono poter essere sottoposti a scansione e indicizzati.
  • Le immagini devono rappresentare i contenuti sottoposti a markup.
  • Le immagini devono essere in formato .JPG, .PNG o .GIF.
supply HowToSupply o Text

Un materiale consumato quando si eseguono istruzioni o un'indicazione.

tool HowToTool o Text

Un oggetto utilizzato (ma non consumato) quando si eseguono le istruzioni o un'indicazione.

totalTime Duration

Il tempo totale necessario per eseguire tutte le istruzioni o le indicazioni (incluso il tempo per preparare i materiali), con durata in formato ISO 8601.

video VideoObject

Un video delle istruzioni. Consulta l'elenco delle proprietà video obbligatorie e consigliate. Contrassegna i passaggi del video con hasPart.

video.hasPart

Clip

Un video clip che fa parte dell'intero video.

video.hasPart.endOffset

Number

L'ora di fine del clip espressa come numero di secondi dall'inizio del video.

video.hasPart.name

Text

Il nome del clip. Ad esempio, "Pull and tighten" può essere il nome di un clip che mostra come infilare e annodare una cravatta.

hasPart.startOffset

Number

L'ora di inizio del clip espressa come numero di secondi dall'inizio del video.

video.hasPart.url

URL

Un link per l'ora di inizio del clip. L'ora di inizio deve corrispondere al valore impostato in video.hasPart.startOffset. Ad esempio:

"startOffset": 30,
"endOffset": 45,
"url": "http://www.example.com/example&t=30"

HowToSection

La definizione completa di HowToSection è disponibile all'indirizzo schema.org/HowToSection.

Il tipo di HowToSection definisce una sezione di una singola istruzione e contiene uno o più passaggi. Non utilizzare HowToSection per definire soluzioni diverse per completare un'attività; invece, utilizza HowToSection come parte di una singola soluzione. Per elencare più modi per completare un'attività, utilizza più oggetti HowTo. Ad esempio, più modi di cambiare una gomma a terra sono elencati come oggetti multipli HowTo, non come oggetti HowToSection.

Proprietà obbligatorie
itemListElement HowToStep

Un elenco dettagliato dei passaggi per la sezione.

name Text

Il nome della sezione.

HowToStep

La definizione completa di HowToStep è disponibile all'indirizzo schema.org/HowToStep.

Il tipo di HowToStep definisce il semplice passaggio testuale in una procedura e può includere un'immagine.

Proprietà obbligatorie
itemListElement HowToDirection o HowToTip

Un elenco dettagliato dei sottopassaggi, tra cui le indicazioni o i suggerimenti.

Facoltativo se utilizzi text.

text Text

Il testo completo delle istruzioni di questo passaggio.

Facoltativo se utilizzi itemListElement. Linee guida aggiuntive:

  • Includi solo il testo delle istruzioni e non includere altro, come "Indicazioni stradali", "Guarda il video" o "Passaggio 1". Specifica queste frasi al di fuori della proprietà del markup.
Proprietà consigliate
image ImageObject o URL

Un'immagine per il passaggio. Ulteriori linee guida per le immagini:

  • Gli URL immagine devono poter essere sottoposti a scansione e indicizzati.
  • Le immagini devono rappresentare i contenuti sottoposti a markup.
  • Le immagini devono essere in formato .JPG, .PNG o .GIF.
name Text

La parola o la breve frase che riassume il passo (ad esempio, "Attacca i cavi al palo" o "Scava"). Non usare testo non descrittivo (ad esempio "Passaggio 1: [testo]") o un formato diverso per il numero dei passaggi (ad esempio "1. [testo]").

url URL

Un URL che collega direttamente al passaggio (se disponibile). Ad esempio, un frammento del link di ancoraggio.

video VideoObject o Clip

Un video per questo passaggio o un clip del video.

Per VideoObject, segui l'elenco di proprietà video obbligatorie e consigliate.

HowToSupply, HowToTool

Le definizioni complete di HowToSupply e HowToTool sono disponibili agli indirizzi schema.org/HowToSupply e schema.org/HowToTool.

HowToSupply e HowToTool vengono utilizzati per completare HowTo. Hanno le stesse proprietà obbligatorie e consigliate.

Proprietà obbligatorie
name Text

Il nome del materiale o dello strumento

Proprietà consigliate
image ImageObject o URL

Un'immagine del materiale o dello strumento. Ulteriori linee guida per le immagini:

  • Gli URL immagine devono poter essere sottoposti a scansione e indicizzati.
  • Le immagini devono rappresentare i contenuti sottoposti a markup.
  • Le immagini devono essere in formato .jpg, .png o .gif.

HowToDirection, HowToTip

Le definizioni complete di HowToDirection e HowToTip sono disponibili agli indirizzi schema.org/HowToDirection e schema.org/HowToTip.

Utilizza HowToDirection e HowToTip per descrivere indicazioni o suggerimenti. Hanno le stesse proprietà obbligatorie e consigliate.

Proprietà obbligatorie
text Text

Il testo dell'indicazione o del suggerimento.

Monitorare i risultati multimediali con Search Console

Search Console è uno strumento che consente di monitorare il rendimento delle tue pagine in Ricerca Google. Registrarsi in Search Console non è obbligatorio per essere inclusi nei risultati di Ricerca Google, ma può aiutarti a capire e migliorare il modo in cui Google vede il tuo sito. Ti consigliamo di controllare Search Console nei seguenti casi:

  1. Dopo aver effettuato il deployment dei dati strutturati per la prima volta
  2. Dopo aver rilasciato nuovi modelli o aggiornato il codice
  3. Analisi periodica del traffico

Dopo aver effettuato il deployment dei dati strutturati per la prima volta

Dopo che Google ha indicizzato le tue pagine, cerca i problemi utilizzando il rapporto sullo stato dei risultati multimediali pertinente. Idealmente, dovresti notare un aumento delle pagine e nessun aumento di errori o avvisi. Se riscontri problemi nei dati strutturati:

  1. Correggi gli errori.
  2. Controlla un URL pubblicato per verificare se il problema persiste.
  3. Richiedi la convalida utilizzando il rapporto sullo stato.

Dopo aver rilasciato nuovi modelli o aggiornato il codice

Quando apporti modifiche significative al tuo sito web, monitora l'aumento degli errori e degli avvisi relativi ai dati strutturati.
  • Se vedi un aumento di errori, forse hai implementato un nuovo modello non funzionante oppure il tuo sito interagisce con il modello esistente in modo nuovo ma non corretto.
  • Se noti una diminuzione degli elementi validi (non associata a un aumento degli errori), forse non stai più incorporando dati strutturati nelle tue pagine. Utilizza lo strumento Controllo URL per scoprire la causa del problema.

Analisi periodica del traffico

Analizza il traffico di Ricerca Google utilizzando il rapporto sul rendimento. I dati mostrano la frequenza con cui la pagina viene visualizzata nei risultati multimediali in Ricerca, la frequenza con cui gli utenti fanno clic su di essa e qual è la posizione media che visualizzi nei risultati di ricerca. Puoi anche estrarre automaticamente questi risultati con l'API Search Console.

Risolvere i problemi

Se hai difficoltà con l'implementazione dei dati strutturati, ecco alcune risorse che potrebbero esserti utili.