Dados estruturados de instruções (HowTo)
Use dados estruturados HowTo para informar explicitamente ao Google que seu conteúdo apresenta instruções. As
instruções orientam os usuários em várias etapas para concluir uma tarefa. Elas podem exibir vídeos,
imagens e texto. Por exemplo: “Como fazer um nó de gravata” ou “Como instalar azulejos de cozinha”. Se as etapas
das instruções precisarem ser lidas em sequência,
talvez os dados estruturados HowTo sejam ideais para o conteúdo. Os dados estruturados HowTo são apropriados quando as instruções são o foco principal da página.
As páginas de instruções marcadas de maneira adequada podem ser qualificadas para a pesquisa aprimorada do Google e uma Ação no Google Assistente. Isso ajuda os usuários certos a encontrar seu site.
Como 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 criar, testar e lançar dados estruturados. Para ver um guia passo a passo sobre como adicioná-los a uma página da Web, confira nosso codelab.
- Adicione as propriedades obrigatórias. Com base no formato que você está usando, saiba onde inserir dados estruturados na página.
- Siga as diretrizes.
- Valide o código com o Teste de pesquisa aprimorada e corrija os erros críticos. Corrija também os problemas não críticos que possam ser sinalizados na ferramenta, porque eles podem melhorar a qualidade dos dados estruturados, mas isso não é necessário para se qualificar para pesquisas aprimoradas.
- 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. Verifique se a página está
acessível ao Google e se não está bloqueada por um arquivo robots.txt, pela tag
noindexou por requisitos de login. Se estiver tudo certo, peça ao Google para rastrear novamente seus URLs. - Para informar o Google sobre mudanças futuras, recomendamos que você envie um sitemap. É possível automatizar isso com a API Search Console Sitemap.
Disponibilidade do recurso
No momento, a pesquisa aprimorada de instruções está disponível em todos os países e idiomas em que é possível acessar a Pesquisa Google. O recurso está disponível em dispositivos móveis e computadores.
Exemplos
Veja alguns exemplos de como seu conteúdo poderá aparecer na pesquisa aprimorada de instruções. Talvez uma variante mais visual seja exibida, caso suas instruções tenham imagens do processo completo e de cada etapa. Inclua o máximo possível de propriedades obrigatórias e recomendadas. Desse modo, suas instruções poderão ser representadas de maneira mais eficaz na Pesquisa Google.
Pesquisa aprimorada de instruções padrão
Veja um exemplo de uma página de instruções com texto que usa JSON-LD. Esse exemplo tem somente uma imagem que representa o estado final das instruções. Nesse resultado, será exibida uma visualização do conteúdo de algumas etapas.
<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/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>
Veja um exemplo de uma página de instruções baseada em texto usando microdados. Esse exemplo tem somente uma imagem que representa o estado final das instruções. Nesse resultado, será exibida uma visualização do conteúdo de algumas etapas.
<html>
<head>
<title>How to tile a kitchen backsplash</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
<b><span itemprop="name">How to tile a kitchen backsplash</span></b>
<div>About <span itemprop="estimatedCost" itemscope itemtype="https://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>Necessary Items:</div>
<div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
<a itemprop="url" href="https://example.com/supplies?id=1">
<span itemprop="name">tiles</span>
</a>
<img alt="Blue kitchen tiles with scalloped edges" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
<a itemprop="url" href="https://example.com/supplies?id=2">
<span itemprop="name">thin-set mortar</span>
</a>
<img alt="Thin-set mortar" itemprop="image"
src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
<a itemprop="url" href="https://example.com/supplies?id=3">
<span itemprop="name">tile grout</span>
</a>
<img alt="White tile grout" itemprop="image"
src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="supply" itemscope itemtype="https://schema.org/HowToSupply">
<a itemprop="url" href="https://example.com/supplies?id=4">
<span itemprop="name">grout sealer</span>
</a>
<img alt="Grout sealer" itemprop="image"
src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
<a itemprop="url" href="https://example.com/supplies?id=5">
<span itemprop="name">notched trowel</span>
</a>
<img alt="Notched trowel with a red handle" itemprop="image"
src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
<a itemprop="url" href="https://example.com/tools?id=6">
<span itemprop="name">bucket</span>
</a>
<img alt="Medium-sized blue bucket" itemprop="image" src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="tool" itemscope itemtype="https://schema.org/HowToTool">
<a itemprop="url" href="https://example.com/tools?id=7">
<span itemprop="name">large sponge</span>
</a>
<img alt="Large yellow sponge" itemprop="image"
src="https://example.com/photos/1x1/photo.jpg"/>
</div>
<div itemprop="step" itemscope itemtype="https://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="https://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 itemprop="step" itemscope itemtype="https://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="https://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="https://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 itemprop="step" itemscope itemtype="https://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="https://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 itemprop="step" itemscope itemtype="https://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="https://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="https://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>
Pesquisa aprimorada de instruções com imagens de cada etapa
Veja um exemplo de página de instruções com imagens de cada etapa usando JSON-LD. Quando há uma imagem para cada etapa, é exibida uma visualização com carrossel de imagens.
<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/1x1/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": "https://www.example.com/videos/123_600x400.mp4",
"embedUrl": "https://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>
Veja um exemplo de uma página de instruções com imagens de cada etapa usando microdados. Quando há uma imagem para cada etapa, é exibida uma visualização com carrossel de imagens.
<html>
<head>
<title>How to tie a tie</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
<b><span itemprop="name">How to tie a tie</span></b>
<div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
<div itemprop="video" itemscope itemtype="https://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="https://www.example.com/videos/123_600x400.mp4" />
<link itemprop="embedUrl" content="https://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="https://schema.org/HowToSupply">A tie</div>
<div itemprop="supply" itemtype="https://schema.org/HowToSupply">A collared Shirt</div>
<div itemprop="tool" itemtype="https://schema.org/HowToTool">A mirror</div>
<div>
<div itemprop="step" itemscope itemtype="https://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 itemprop="step" itemscope itemtype="https://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 itemprop="step" itemscope itemtype="https://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 itemprop="step" itemscope itemtype="https://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 itemprop="step" itemscope itemtype="https://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>
Pesquisa aprimorada de instruções com vídeo
Confira um exemplo de página de instruções com uma mistura de texto, imagens e vídeos usando JSON-LD. O exemplo tem um vídeo de instruções, com as etapas nesse mesmo vídeo marcadas com dados estruturados Clip.
<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/1x1/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": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=29"
},
{
"@type": "Clip",
"@id": "Clip2",
"name": "Select Trivia Template",
"startOffset": 36,
"endOffset": 45,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=36"
},
{
"@type": "Clip",
"@id": "Clip3",
"name": "Choose a Personality",
"startOffset": 45,
"endOffset": 65,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=45"
},
{
"@type": "Clip",
"@id": "Clip4",
"name": "Feed your content",
"startOffset": 65,
"endOffset": 154,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=65"
},
{
"@type": "Clip",
"@id": "Clip5",
"name": "Create the action",
"startOffset": 154,
"endOffset": 172,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=154"
},
{
"@type": "Clip",
"@id": "Clip6",
"name": "Test your action",
"startOffset": 172,
"endOffset": 212,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=172"
},
{
"@type": "Clip",
"@id": "Clip7",
"name": "Submit your action",
"startOffset": 212,
"endOffset": 285,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&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>
Confira um exemplo de página de instruções com uma mistura de texto, imagens e vídeos usando microdados. O exemplo tem um vídeo de instruções, com as etapas nesse mesmo vídeo marcadas com dados estruturados Clip.
<html>
<head>
<title>How to create a Trivia action</title>
</head>
<body>
<div itemscope itemtype="https://schema.org/HowTo">
<b><span itemprop="name">How to create a Trivia action</span></b>
<div>About <span itemprop="totalTime" content="PT2M">2 minutes</span></div>
<div itemprop="video" itemscope itemtype="https://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="https://www.example.com/videos/123_600x400.mp4" />
<link itemprop="embedUrl" content="https://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="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=29</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=36</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=45</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=65</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=154</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=172</div>
</div>
<div itemprop="hasPart" itemscope itemtype="https://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">https://www.youtube.com/watch?v=4AOI1tZrgMI&t=212</div>
</div>
</div>
<video>...</video>
</div>
<div itemprop="step" itemscope itemtype="https://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="https://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="https://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="https://schema.org/HowToStep">
<div itemprop="name">Feed your content</div>
<div itemprop="itemListElement" itemscope itemtype="https://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="https://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="https://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="https://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="https://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>
Diretrizes
Se você quiser qualificar sua página para a pesquisa aprimorada de instruções e para a ação de instruções do Google Assistente, siga estas diretrizes:
- Diretrizes gerais de dados estruturados
- Fundamentos da Pesquisa
- Política de restrições de conteúdo para o recurso Actions on Google
- Diretrizes para conteúdo do tipo "como fazer"
Diretrizes de conteúdo
- Publicidade: não use os dados estruturados
HowTopara publicidade. - Conteúdo não qualificado: a pesquisa aprimorada de instruções não será exibida se o conteúdo for obsceno, profano, sexualmente explícito, graficamente violento, promover atividades perigosas ou ilegais ou apresentar discurso de ódio ou assédio.
- Origem: todo o conteúdo de
HowToprecisa estar visível para o usuário na página de origem. Confira se as instruções são o foco principal da página de origem. Não inclua mais de umHowToem uma página. - Materiais e ferramentas: adicione dados estruturados a todos os materiais e ferramentas necessários para concluir a tarefa.
- Etapas: cada
HowToStepprecisa incluir todo o conteúdo da etapa de origem. Não marque dados que não sejam relacionados a uma etapa, como resumos ou seções de introdução. - Imagens da etapa: se as etapas forem representadas melhor visualmente, será preciso marcar as imagens para cada
HowToStep. Marque somente as imagens específicas para cada etapa, e não use a mesma imagem em várias etapas das instruções. Use imagens que correspondam ao conteúdo da sua página. Evite usar imagens que não reflitam o conteúdo das instruções ou use imagens diferentes para otimizar a pesquisa aprimorada. - Imagem final: se o resultado final puder ser descrito com precisão por uma imagem, ela precisará estar na página, e a marcação
HowTodeverá incluí-la usando a propriedadeimage. Essa imagem pode ser igual à marcada para a última etapa. - Conteúdo: não use a marcação
HowTopara receitas. Em vez disso, useRecipe structured data. Artigos e conteúdos de aconselhamento em geral que não tenham instruções específicas não são apropriados para a marcaçãoHowTo.
Definições de tipos de dados estruturados
É necessário incluir as propriedades obrigatórias para que seu conteúdo seja qualificado para exibição na pesquisa aprimorada. Também é possível incluir as propriedades recomendadas para adicionar mais informações aos seus dados estruturados, o que pode proporcionar uma melhor experiência do usuário.
HowTo
A definição completa de HowTo está disponível em schema.org/HowTo (em inglês).
O tipo HowTo indica que a página tem instruções. Cada página precisa incluir uma definição do tipo HowTo.
Veja as propriedades aceitas pelo Google:
| Propriedades obrigatórias | |
|---|---|
name |
É o título das instruções. Por exemplo: "Como fazer um nó de gravata". |
step |
HowToStep ou HowToSection
É uma matriz de elementos
É uma matriz de elementos
"step":[
{
"@type": "HowToSection",
"name": "Choose a Tie",
"itemListElement": [
{
"@type": "HowToStep",
"name": "Choose a color",
"text": "Pick a tie that matches your shirt color. Contrasting colors can be fun!"
},
{
"@type": "HowToStep",
"name": "Choose a pattern",
"text": "A tie with a pattern can add flare to your outfit. Make sure the pattern is not
too noisy against your shirt"
}
]
},
{
"@type": "HowToSection",
"name": "Put on the Tie",
"itemListElement": [
{
"@type": "HowToStep",
"name": "Arrange the Tie",
"text": "Stand in front of the mirror with the tie around your neck."
},
{
"@type": "HowToStep",
"name": "Tie the Tie",
"text": "Use your hands to tie the tie into a neat knot around your neck. Looking sharp!"
}
]
}
]
|
| Propriedades recomendadas | |
|---|---|
estimatedCost |
MonetaryAmount ou Text
É o custo estimado dos materiais consumidos ao seguir as instruções. |
image |
ImageObject ou URL
É a imagem das instruções completas. Veja outras diretrizes relacionadas:
|
supply |
HowToSupply ou Text
Indica um material usado nas instruções ou em uma orientação. |
tool |
HowToTool ou Text
É um objeto usado (mas não consumido) nas instruções ou em uma orientação. |
totalTime |
Duration
É o tempo necessário para seguir todas as instruções ou orientações, incluindo o período de preparação de materiais, no formato ISO 8601. |
video |
VideoObject
É um vídeo de instruções. Siga a lista de propriedades de vídeo obrigatórias e recomendadas. Marque as etapas em um vídeo com
{
"@context": "https://schema.org",
"@type": "HowTo",
"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": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=29"
},
{
"@type": "Clip",
"@id": "Clip2",
"name": "Select Trivia Template",
"startOffset": 36,
"endOffset": 45,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=36"
}
]
}
}
|
video.hasPart
|
É um clipe que faz parte de todo o vídeo. |
video.hasPart.endOffset
|
É o horário de término do clipe exibido como o número em segundos em relação ao início do vídeo. |
video.hasPart.name
|
É o nome do clipe. Por exemplo, "Puxar e ajustar" pode ser o nome do clipe que mostra como puxar e ajustar uma gravata. |
video.hasPart.startOffset
|
É o horário de início do clipe exibido como o número em segundos no início do vídeo. |
video.hasPart.url
|
É um link para o horário de início do clipe. O horário de início precisa corresponder ao valor configurado em "startOffset": 30, "endOffset": 45, "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=30" |
HowToSection
A definição completa de HowToSection está disponível em schema.org/HowToSection (em inglês).
O tipo HowToSection define uma seção de instruções e tem uma ou várias etapas. Não use HowToSection ao definir soluções diferentes para concluir uma tarefa. Use HowToSection como parte de uma única solução. Para listar maneiras diferentes de concluir uma tarefa, use vários objetos HowTo. Por exemplo, é possível listar diferentes maneiras de trocar um pneu furado como vários objetos HowTo, sem usar HowToSection.
Veja as propriedades aceitas pelo Google:
| Propriedades obrigatórias | |
|---|---|
itemListElement |
HowToStep
É uma lista de etapas detalhadas da seção. |
name |
Text
É o nome da seção. |
HowToStep
A definição completa de HowToStep está disponível em schema.org/HowToStep (em inglês).
O tipo HowToStep define a etapa textual simples das instruções e pode incluir uma imagem.
Veja as propriedades aceitas pelo Google:
| Propriedades obrigatórias | |
|---|---|
itemListElement |
HowToDirection ou HowToTip
É uma lista de subetapas detalhadas, incluindo orientações ou dicas. Essa propriedade é opcional quando |
text |
Text
É o texto de instruções completo desta etapa. Essa propriedade é opcional quando
|
| Propriedades recomendadas | |
|---|---|
image |
ImageObject ou URL
É a imagem da etapa. Outras diretrizes para imagens:
|
name |
Text
É uma palavra ou frase curta que resume a etapa (por exemplo, "Prender fios no poste" ou "Cavar"). Evite usar texto não descritivo (por exemplo, "Etapa 1: [texto]") ou outra forma de numeração (por exemplo, "1. [texto]"). |
url |
URL
É o |
video |
VideoObject ou Clip
É um vídeo para essa etapa das instruções ou um clipe de um vídeo que mostra todo o processo. Para
Veja um exemplo com
{
"@type": "HowToStep",
"video": {
"name": "Drape the tie",
"description": "Drape the tie.",
"thumbnailUrl": "https://example.com/photos/photo.jpg",
"contentUrl": "https://www.example.com/videos/123_600x400.mp4",
"embedUrl": "https://www.example.com/videoplayer?id=123",
"uploadDate": "2019-01-05T08:00:00+08:00",
"duration": "PT12S"
}
}
Veja um exemplo com
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "Build a Trivia Game for the Google Assistant with No Code",
"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": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=29"
},
{
"@type": "Clip",
"@id": "Clip2",
"name": "Select Trivia Template",
"startOffset": 36,
"endOffset": 45,
"url": "https://www.youtube.com/watch?v=4AOI1tZrgMI?t=36"
}
]
},
"step": [
{
"@type": "HowToStep",
"name": "Open Actions on Google Console",
"video": { "@id": "Clip1" }
},
{
"@type": "HowToStep",
"name": "Select Trivia Template",
"video": { "@id": "Clip2" }
}
]
}
|
HowToSupply, HowToTool
As definições completas de HowToSupply e HowToTool estão disponíveis em schema.org/HowToSupply e schema.org/HowToTool (páginas em inglês).
HowToSupply e HowToTool são usados para completar HowTo.
Eles têm as mesmas propriedades obrigatórias e recomendadas.
| Propriedades obrigatórias | |
|---|---|
name |
Text
É o nome do material ou ferramenta. |
HowToDirection, HowToTip
As definições completas de HowToDirection e HowToTip estão disponíveis em schema.org/HowToDirection e schema.org/HowToTip (páginas em inglês).
Use HowToDirection e HowToTip para descrever orientações ou dicas.
Eles têm as mesmas propriedades obrigatórias e recomendadas.
| Propriedades obrigatórias | |
|---|---|
text |
Text
É o texto da orientação ou dica. |
Monitorar pesquisas aprimoradas com o Search Console
O Search Console é uma ferramenta que ajuda você a monitorar o desempenho das suas páginas na Pesquisa Google. Não é preciso se inscrever na plataforma para ser incluído nos resultados da Pesquisa Google, mas isso pode ajudar você a entender e melhorar como vemos seu site. Recomendamos verificar o Search Console nos seguintes casos:
- Depois de implantar os dados estruturados pela primeira vez
- Depois de lançar novos modelos ou atualizar o código
- Análise periódica do tráfego
Depois de implantar os dados estruturados pela primeira vez
Depois que o Google indexar as páginas, procure problemas com o relatório de status da pesquisa aprimorada relevante. Em condições ideais, vai haver um aumento de itens válidos e nenhum aumento de itens inválidos. Se você encontrar problemas nos dados estruturados, faça o seguinte:
- Corrija os itens inválidos.
- Inspecione um URL ativo para verificar se o problema persiste.
- Solicite a validação com o relatório de status.
Depois de lançar novos modelos ou atualizar o código
Ao fazer mudanças significativas no site, monitore aumentos nos itens inválidos de dados estruturados.- Caso você perceba um aumento nos itens inválidos, talvez tenha lançado um novo modelo que não funcione ou o site esteja interagindo com o modelo existente de uma maneira nova e incorreta.
- Caso você veja uma diminuição nos itens válidos (não correspondidos por um aumento nos itens inválidos), talvez não esteja mais incorporando os dados estruturados às páginas. Use a Ferramenta de inspeção de URL para saber o que está causando o problema.
Análise periódica do tráfego
Analise o tráfego da Pesquisa Google com o Relatório de desempenho. Os dados vão mostrar com que frequência sua página aparece como aprimorada na Pesquisa, com que frequência os usuários clicam nela e qual é a posição média dela nos resultados. Também é possível extrair automaticamente esses resultados com a API Search Console.Solução de problemas
Se você tiver problemas para implementar ou depurar dados estruturados, veja alguns recursos que podem ajudar.
- Se você usa um sistema de gerenciamento de conteúdo (CMS) ou se alguém está cuidando do seu site, peça ajuda para o prestador de serviço. Não se esqueça de encaminhar todas as mensagens do Search Console com os detalhes do problema.
- O Google não garante que os recursos que consomem dados estruturados vão ser exibidos nos resultados da pesquisa. Para ver uma lista de motivos comuns por que o Google pode não exibir seu conteúdo na pesquisa aprimorada, consulte as diretrizes gerais de dados estruturados.
- Pode haver um erro nos dados estruturados. Consulte a lista de erros de dados estruturados.
- Se você recebeu uma ação manual de dados estruturados relacionada à sua página, esses dados serão ignorados, embora a página ainda possa aparecer nos resultados da Pesquisa Google. Para corrigir problemas de dados estruturados, use o Relatório de ações manuais.
- Consulte as diretrizes novamente para identificar se o conteúdo não está em conformidade com elas. O problema pode ser causado por conteúdo com spam ou uso de marcação com spam. No entanto, talvez o problema não seja de sintaxe e, por isso, o teste de pesquisa aprimorada não poderá identificá-lo.
- Solução de problemas relacionados à ausência e à queda no total de pesquisas aprimoradas
- Aguarde algum tempo antes de voltar a rastrear e reindexar. Pode levar vários dias depois da publicação de uma página para que o Google a localize e rastreie. Para perguntas gerais sobre rastreamento e indexação, consulte as Perguntas frequentes sobre rastreamento e indexação da Pesquisa Google.
- Poste uma pergunta no fórum da Central da Pesquisa Google