Tra i dati strutturati da poter utilizzare per il proprio sito annoveriamo anche i cosiddetti HowTo. Questi sono dati strutturati molto particolari che hanno il preciso obiettivo di indicare a Google che il contenuto di una specifica pagina contiene istruzioni per gli utenti.
Questo tipo di markup è utilissimo per far capire a Google che, il contenuto che siamo andati a realizzare, è una vera e propria guida per gli utenti che può riguardare diversi settori e che contiene precisi passaggi da eseguire.
Un esempio potrebbe essere: “Come tagliare il prato”, “Come pulire il forno” e in generale qualsiasi contenuto che mostri come fare una determinata cosa.
Naturalmente le istruzioni possono essere di diversa natura e includere testo, immagini o video esplicativi che mostrino come eseguire i vari passaggi.
A tal proposito i dati strutturati HowTo possono essere un ottimo elemento che permetta ai tuoi contenuti di essere più chiari, sia per Google che per gli utenti. Infatti, anche questi sono indicati tra le best pratice di Google e permettono al motore di ricerca di fornire informazioni aggiuntive all’utente finale
In questo articolo vedremo nel dettaglio cosa sono questi dati strutturati, in che modo possono essere utili e come utilizzarli.
Indice
Esempi di visualizzazione How To
Per comprendere al meglio l’utilità dei dati strutturati di tipo HowTo, è utile andare a vedere alcuni esempi.
Risultato avanzato di istruzioni standard
Di seguito un esempio di pagina di istruzioni basata su testo che utilizza JSON-LD
| <html>
<head> <title>How to tile a kitchen backsplash</title> <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “HowTo”, “name”: “How to tile a kitchen backsplash”, “image”: { “@type”: “ImageObject”, “url”: “https://example.com/photos/1×1/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/1×1/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/1×1/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/1×1/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/1×1/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/1×1/photo-step5.jpg”, “height”: “406”, “width”: “305” } } ], “totalTime”: “P2D” } </script> </head> <body> </body> </html> |
Risultato avanzato di istruzioni con immagini per ogni passaggio
| <html>
<head> <title>How to tie a tie</title> <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “HowTo”, “image”: { “@type”: “ImageObject”, “url”: “https://example.com/1×1/photo.jpg” }, “name”: “How to tie a tie”, “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/1×1/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/1×1/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/1×1/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/1×1/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/1×1/step5.jpg”, “url”: “https://example.com/tie#step5” } ] } </script> </head> <body> </body> </html> |
Risultato avanzato di istruzioni con video
| <html>
<head> <title>How to create a Trivia action</title> <script type=”application/ld+json”> { “@context”: “https://schema.org”, “@type”: “HowTo”, “image”: { “@type”: “ImageObject”, “url”: “https://example.com/1×1/photo.jpg” }, “name”: “How to create a Trivia action”, “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&t=29” }, { “@type”: “Clip”, “@id”: “Clip2”, “name”: “Select Trivia Template”, “startOffset”: 36, “endOffset”: 45, “url”: “http://www.example.com/example&t=36” }, { “@type”: “Clip”, “@id”: “Clip3”, “name”: “Choose a Personality”, “startOffset”: 45, “endOffset”: 65, “url”: “http://www.example.com/example&t=45” }, { “@type”: “Clip”, “@id”: “Clip4”, “name”: “Feed your content”, “startOffset”: 65, “endOffset”: 154, “url”: “http://www.example.com/example&t=65” }, { “@type”: “Clip”, “@id”: “Clip5”, “name”: “Create the action”, “startOffset”: 154, “endOffset”: 172, “url”: “http://www.example.com/example&t=154” }, { “@type”: “Clip”, “@id”: “Clip6”, “name”: “Test your action”, “startOffset”: 172, “endOffset”: 212, “url”: “http://www.example.com/example&t=172” }, { “@type”: “Clip”, “@id”: “Clip7”, “name”: “Submit your action”, “startOffset”: 212, “endOffset”: 285, “url”: “http://www.example.com/example&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/1×1/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/1×1/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/1×1/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/1×1/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/1×1/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/1×1/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/1×1/step7.jpg”, “url”: “https://example.com/tie#step7”, “video”: { “@id”: “Clip7” } } ] } </script> </head> <body> </body> </html> |
Linee guida
Affinché la pagina di istruzioni su cui hai deciso di inserire il markup How To sia valida è fondamentale seguire alcune linee guida:
- Pubblicità: non utilizzare mai il markup HowTo per contenuti pubblicitari.
- Contenuti non idonei: evita sempre contenuti osceni, volgari, violenti, sessualmente espliciti o che promuovono attività pericolose o illegali. In questi casi infatti i risultati avanzati di istruzioni non possono essere visualizzati.
- Origine: i contenuti How To devono essere sempre visibili all’utente nella pagina di origine. Assicurati quindi che le istruzioni siano il contenuto principale della pagina.
- Materiali e strumenti: nelle istruzioni devono essere sempre indicati tutti i materiali e gli strumenti necessari per portare a termine i vari passaggi.
- Passaggi: ogni elemento HowToStep deve contenere tutti i passaggi. Ricorda di non eseguire il markup per contenuti che non sono istruzioni come l’introduzione o la conclusione.
- Immagini dei passaggi: se utilizzi delle immagini per i vari passaggi, e hai una migliore resa visiva per il tipo di istruzione, ricorda di eseguire il markup HowToStep per ogni singola immagine. Non utilizzare mai la stessa immagine per diversi passaggi e non utilizzare immagini che non rappresentino effettivamente e in maniera chiara quello specifico passaggio.
- Immagine finale: se il risultato finale che si otterrà può essere ben rappresentato da un’immagine, assicurati che quest’ultima sia presente nella pagina e che il markup HowTo la includa con la proprietà image.
- Contenuti: il markup HowTo non è idoneo per tutti i tipi di contenuti e, in particolare, non utilizzarlo per articoli e consigli generici che non rappresentino un insieme di istruzioni specifiche.
Tipi di dati strutturati e proprietà
In questa sezione andremo a vedere le varie tipologie di proprietà obbligatorie, quindi assolutamente necessarie per inserire i dati strutturati e consigliate, ovvero quell’insieme di proprietà che rappresentano un plus per Google e per gli utenti.
HowTo
Come abbiamo detto, il markup HowTo indica che la pagina in questione contiene delle istruzioni.
Di seguito le proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| name | Text
Indica il titolo delle istruzioni. Es. “Come falciare il prato”. |
| step | HowToStep o HowToSection
Indica i vari passaggi che comprendono le istruzioni complete della procedura. Ogni elemento step deve corrispondere a un singolo passaggio specifico. Importante: non utilizzare questo markup per indicare contenuti che non siano passaggi come l’introduzione o la conclusione. |
Qui invece le proprietà consigliate:
| Proprietà consigliate | |
|---|---|
| estimatedCost | MonetaryAmount o Text
Indica il costo stimato dei materiali di consumo necessari per l’esecuzione finale. |
| image | ImageObject o URL
Indica l’immagine che rappresenta il risultato finale. |
| supply | HowToSupply o Text
Indica un materiale di consumo utilizzato per eseguire le istruzioni. |
| tool | HowToTool o Text
Indica un oggetto, che è diverso dal materiale di consumo, utilizzato per eseguire le istruzioni. |
| totalTime | Duration
Indica il tempo totale necessario per eseguire tutte le istruzioni, compresa la preparazione dei materiali. |
| video | VideoObject
Indica un video delle istruzioni |
| video.hasPart | Clip
Indica un video clip facente parte dell’intero video. |
| video.hasPart.endOffset | Number
Indica l’ora di fine del video clip espressa come numero di secondi dall’inizio del video. |
| video.hasPart.name | Text
Indica il nome del singolo video clip. |
| video.hasPart.startOffset | Number
Indica l’ora di inizio del video clip espressa come numero di secondi dall’inizio del video. |
| video.hasPart.url | URL
Indica un url per l’ora di inizio del video clip. |
HowToSection
Il markup HowToSection indica una porzione di una singola istruzione e che può contenere uno o più passaggi.
In questo caso prevede esclusivamente delle proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| itemListElement | HowToStep
Indica un elenco dettagliato dei vari passaggi della specifica sezione. |
| name | Text
Indica il nome della sezione. |
HowToStep
Il markup HowToStep indica i passaggi di una procedura e può essere indicato sia in formato testo che immagine.
Di seguito le proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| itemListElement | HowToDirection o HowToTip
Indica un elenco dettagliato di tutti i sottopassaggi. |
| text | Text
Indica il testo completo di uno specifico sottopassaggio. |
Qui invece sono riportate le proprietà consigliate:
| Proprietà consigliate | |
|---|---|
| image | ImageObject o URL
Indica l’immagine di un passaggio. |
| name | Text
Indica la parola, o la breve frase, che riassume uno specifico passaggio. Un esempio potrebbe essere “Lega i cavi al palo” |
| url | URL
Un link che collega direttamente a uno specifico passaggio. |
| video | VideoObject o Clip
Un video che descriva un passaggio o un video clip dello stesso. |
HowToSupply, HowToTool
Riguardo HowToSupply e HowToTool sono due markup che completano HowTo. Entrambi presentano le stesse proprietà obbligatorie e consigliate.
Qui le proprietà obbligatorie:
| Proprietà obbligatorie | |
|---|---|
| name | Text
Indica il nome esatto del materiale di consumo o dello strumento utilizzato. |
Di seguito le proprietà consigliate:
| Proprietà consigliate | |
|---|---|
| image | ImageObject o URL
Indica un’immagine che rappresenti il materiale di consumo o lo strumento utilizzato. |
HowToDirection, HowToTip
Infine, come ultimi markup abbiamo HowToDirection e HowToTip. Questi sono utilizzati per descrivere indicazioni o suggerimenti.
Entrambi hanno una sola proprietà obbligatoria:
| Proprietà obbligatorie | |
|---|---|
| text | Text
Indica il testo dell’indicazione o del suggerimento. |
Hai bisogno di inserire il markup HowTo sul tuo sito? Chiedi a Unidevs!
Come abbiamo visto il markup HowTo può essere davvero utilissimo in quanto permette a Google di comprendere che una specifica pagina contiene istruzioni, tutorial e guide.
In questo modo il motore di ricerca può creare dei risultati avanzati che mostrino maggiori informazioni agli utenti.
Di sicuro questo rappresenta un modo per attirare un maggior numero di utenti, e clienti, sul proprio sito.
Hai bisogno di inserire il markup HowTo sul tuo sito?
Chiedi a Unidevs! Ti faremo risparmiare tempo, denaro e soprattutto errori!
Inserire questo tipo di informazioni è un’operazione non semplicissima che può risultare complessa per chi non ha le giuste competenze.
Nel giro di pochissimo tempo analizzeremo il tuo sito e inseriremo tutte le informazioni di cui Google ha bisogno.
