Структурированные данные для инструкций (HowTo
)
Применяя структурированные данные HowTo
, вы сообщаете Google, что на вашем сайте приведены инструкции. Инструкции – это описание последовательности действий при выполнении определенной задачи, которое содержит текст, изображения или видео. Примеры инструкций: "Как завязать галстук", "Как сделать фартук для кухонной мойки" и т. п. Если на странице приведена пошаговая инструкция, значит для контента подойдут структурированные данные типа HowTo
. Разметку HowTo
следует применять, если основной контент страницы – именно инструкции.
Правильно размеченные страницы могут появляться в Google Поиске в виде расширенных результатов и использоваться Google Ассистентом. И то и другое способствует привлечению на сайт заинтересованной аудитории.
Как добавлять структурированные данные
Структурированные данные – стандартизированный формат, который позволяет предоставлять информацию о странице и классифицировать ее контент. О том, как это работает, рассказывается в другой статье.
Ниже в общих чертах описано, как создать, проверить и добавить на сайт структурированные данные. Пошаговые инструкции вы найдете в практической работе, посвященной добавлению структурированных данных на веб-страницу.
- Добавьте обязательные свойства. Узнайте, в каких частях страницы нужно размещать структурированные данные выбранного вами формата.
- Следуйте рекомендациям.
- Протестируйте свой код с помощью инструмента проверки расширенных результатов. Если будут обнаружены критические ошибки, устраните их. Мы также рекомендуем устранить некритические ошибки, отмеченные в инструменте. Это может привести к повышению качества структурированных данных, хотя страницы будут подходить для создания расширенных результатов и без этого.
- Опубликуйте страницу и с помощью инструмента проверки URL выясните, как она выглядит для робота Googlebot. Убедитесь, что доступ Google к странице не заблокирован файлом robots.txt или метатегом
noindex
и авторизация на ней не требуется. Если все в порядке, то запросите повторное сканирование ваших URL. - Отправляйте нам файл Sitemap, чтобы информировать нас об изменениях на сайте. Отправку такого файла можно автоматизировать с помощью Search Console Sitemap API.
Доступность
Расширенные результаты с инструкциями могут показываться на компьютерах и мобильных устройствах во всех странах, где доступен Google Поиск, и на всех языках, которые поддерживает эта поисковая система.
Примеры
Ниже приведены примеры расширенных результатов. Если на ваших страницах есть изображение с конечным результатом и пошаговые иллюстрации, то инструкции будут более наглядными. Старайтесь добавлять как можно больше необходимых и рекомендуемых свойств, чтобы ваши страницы с инструкциями могли показываться в Google Поиске с использованием самых разнообразных функций.
Обычный расширенный результат с инструкциями

Ниже приведен пример текстовой страницы инструкций с использованием 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/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>
Ниже приведен пример текстовой страницы инструкций с использованием микроданных, на которой есть всего одно изображение с конечным результатом. На странице поиска пользователям будет доступен предварительный просмотр некоторых шагов.
<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>
Расширенный результат с инструкциями, содержащими иллюстрации к каждому шагу

Ниже приведен пример страницы с инструкциями, на которой есть пошаговые иллюстрации в формате JSON-LD. Пользователям доступен предварительный просмотр в виде карусели с изображениями.
<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>
Ниже приведен пример страницы инструкций с изображениями, размеченной при помощи микроданных. Пользователям будет доступен предварительный просмотр контента с каруселью изображений.
<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>
Расширенный результат с инструкциями, содержащими видео
Ниже приведен пример страницы с инструкциями в формате JSON-LD, на которой есть текст, изображения и видеоклипы. В видеоинструкции разметка шагов выполнена с помощью структурированных данных 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>
Ниже приведен пример страницы с инструкциями, размеченной с применением микроданных, на которой есть текст, изображения и видеоклипы. В видеоинструкции разметка шагов выполнена с помощью структурированных данных 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>
Правила
Если вы хотите, чтобы ваша страница могла появляться в расширенных результатах поиска с инструкциями и для нее можно было создать действие HowTo Google Ассистента, следуйте этим инструкциям:
- Общие рекомендации по использованию структурированных данных
- Главное о Поиске
- Ограничения на контент для Actions on Google
- Требования к инструкциям
Требования к контенту
- Реклама. Не используйте структурированные данные
HowTo
в целях маркетинга. - Недопустимый контент. Для показа в виде расширенных результатов не подходят инструкции, в которых содержатся непристойные, грубые, оскорбительные, дискриминационные высказывания, материалы сексуального характера, сцены насилия, а также призывы к опасным или противоправным действиям.
- Источник. Весь контент, размеченный с помощью элементов типа
HowTo
, должен быть виден пользователям на исходной странице. Убедитесь, что инструкции являются основным контентом исходной страницы. На отдельно взятой странице должен быть только один экземпляр разметкиHowTo
. - Материалы и инструменты. Добавьте структурированные данные обо всех материалах и инструментах, необходимых для выполнения поставленной задачи.
- Шаги. Каждый шаг в инструкции (
HowToStep
) должен включать все содержание исходной страницы. Не размечайте как шаг описание, вводный раздел и другую подобную информацию. - Иллюстрации к шагам. Если инструкции сопровождаются иллюстрациями, то применяйте нужную разметку для изображений, относящихся к каждому шагу
HowToStep
. Размечайте изображение, только если оно относится к конкретному шагу, и не используйте одну и ту же картинку в нескольких шагах одной инструкции. Выбранные иллюстрации должны соответствовать тем, которые размещены на вашей странице. Не используйте вместо них какие-либо другие ради оптимизации расширенного результата. Также не следует указывать изображения, не отражающие суть ваших инструкций. - Конечный вариант изображения. Если конечный результат можно показать на иллюстрации, то разместите ее на странице и укажите в разметке
HowTo
, добавив свойствоimage
. Это может быть то же изображение, которое вы включили в разметку последнего шага. - Контент. На страницах с рецептами используйте не элементы типа
HowTo
, аRecipe structured data
. Также тип данныхHowTo
не подходит для статей и общих советов, которые не относятся к инструкциям.
Типы структурированных данных
Чтобы ваш контент мог показываться в расширенных результатах, необходимо задать все обязательные свойства. Если вам нужно добавить больше информации в структурированные данные, указывайте рекомендуемые свойства.
HowTo
Полное описание типа HowTo
приведено на странице schema.org/HowTo.
Тип HowTo
означает, что страница содержит инструкции. На каждой странице можно использовать только одно определение типа HowTo
.
Google поддерживает следующие свойства:
Обязательные свойства | |
---|---|
name |
Название инструкции. Например, "Как завязать галстук". |
step |
HowToStep или HowToSection
Массив элементов
Массив элементов "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!" } ] } ] |
Рекомендуемые свойства | |
---|---|
estimatedCost |
MonetaryAmount или Text
Расчетная стоимость материалов, необходимых для выполнения инструкций. |
image |
ImageObject или URL
Изображение с результатом выполнения инструкций. Дополнительные рекомендации для изображений:
|
supply |
HowToSupply или Text
Материалы, необходимые для выполнения инструкций или указания. |
tool |
HowToTool или Text
Инструмент, применяемый для выполнения инструкций или указания (не материалы). |
totalTime |
Duration
Общее время, необходимое для выполнения всех инструкций или указаний (включая подготовку материалов) в формате ISO 8601. |
video |
VideoObject
Видео с инструкциями. Ознакомьтесь со списком обязательных и рекомендуемых свойств для видео. Разметьте видео на фрагменты с помощью { "@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
|
Фрагмент из видео. |
video.hasPart.endOffset
|
Время окончания фрагмента, указанное в секундах с начала видео. |
video.hasPart.name
|
Название фрагмента. Например, фрагменту, в котором рассказывается, как завязать галстук, можно дать название "Самый простой узел". |
video.hasPart.startOffset
|
Время начала фрагмента, указанное в секундах с начала видео. |
video.hasPart.url
|
Ссылка на время начала фрагмента. Время начала должно соответствовать значению элемента "startOffset": 30, "endOffset": 45, "url": "https://www.youtube.com/watch?v=4AOI1tZrgMI&t=30" |
HowToSection
Полное описание типа HowToSection
приведено на странице schema.org/HowToSection.
Тип HowToSection
определяет раздел с одной инструкцией и содержит один или несколько шагов. Не используйте HowToSection
для разных способов выполнения одной задачи. Применяйте HowToSection
только для описания одного способа. Чтобы привести несколько инструкций для достижения одной цели, используйте несколько объектов HowTo
. Например, различные способы замены пробитого колеса следует размечать с помощью нескольких объектов HowTo
, а не объектов HowToSection
.
Google поддерживает следующие свойства:
Обязательные свойства | |
---|---|
itemListElement |
HowToStep
Список шагов в разделе. |
name |
Text
Название раздела. |
HowToStep
Полное описание типа HowToStep
приведено на странице schema.org/HowToStep.
Тип HowToStep
определяет простое текстовое описание шага инструкции, которое может содержать изображение.
Google поддерживает следующие свойства:
Обязательные свойства | |
---|---|
itemListElement |
HowToDirection или HowToTip
Список шагов, в том числе указаний и рекомендаций. Можно не использовать при наличии элемента |
text |
Text
Полный текст шага инструкции. Можно не использовать при наличии элемента
|
Рекомендуемые свойства | |
---|---|
image |
ImageObject или URL
Иллюстрация к шагу инструкции. Дополнительные рекомендации для изображений:
|
name |
Text
От одного до нескольких слов, кратко описывающих шаг (например, "Прикрепите проволоку к столбу" или "Выкопайте яму"). Не используйте такие конструкции, как "Шаг 1: [текст]" или "1. [текст]". В названии шага должна быть только описательная часть, без указания на его номер. |
url |
URL
|
video |
VideoObject или Clip
Видео, иллюстрирующее текущий шаг инструкции или фрагмент из видео, иллюстрирующего инструкцию полностью. Если вы используете
Пример с разметкой типа { "@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" } } Пример с разметкой типа { "@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
Полное описание типов HowToSupply
и HowToTool
приведено на страницах schema.org/HowToSupply и schema.org/HowToTool.
Типы HowToSupply
и HowToTool
дополняют разметку HowTo
.
В них используются одинаковые обязательные и рекомендуемые свойства.
Обязательные свойства | |
---|---|
name |
Text
Название материала или инструмента. |
HowToDirection
, HowToTip
Полное описание типов HowToDirection
и HowToTip
приведено на страницах schema.org/HowToDirection и schema.org/HowToTip.
Чтобы добавить описания инструкций или советов, применяйте типы HowToDirection
и HowToTip
.
В них используются одинаковые обязательные и рекомендуемые свойства.
Обязательные свойства | |
---|---|
text |
Text
Текст описания или совета. |
Сбор статистики по расширенным результатам в Search Console
С помощью Search Console вы можете собирать данные об эффективности страниц вашего ресурса в Google Поиске. Вам не обязательно регистрироваться в этом сервисе, чтобы ваши страницы попали в результаты поиска. Однако это позволит узнать, как роботы Google воспринимают сайт, и упростить им его обработку. Рекомендуем проверять информацию в Search Console в следующих случаях:
- После первого размещения структурированных данных
- После выпуска новых шаблонов или обновления кода
- При регулярном анализе трафика
После первого размещения структурированных данных
Когда ваши страницы будут проиндексированы, проверьте их на наличие ошибок с помощью отчета о статусе расширенных результатов. Желательно, чтобы количество объектов с правильной разметкой выросло, а число объектов с ошибками – нет. Если в структурированных данных будут обнаружены ошибки, примите следующие меры:
- Устраните проблемы в объектах.
- Проверьте исправленную страницу, чтобы узнать, обнаруживаются ли ошибки.
- Запросите проверку ресурса, используя отчет о статусе расширенных результатов.
После выпуска новых шаблонов или обновления кода
Если вы внесли значительные изменения на сайт, проверьте, не увеличилось ли число недействительных объектов, связанных со структурированными данными.- Увеличилось число недействительных объектов? Возможно, вы создали шаблон, с которым что-то не так, или имеющийся шаблон используется некорректно.
- Уменьшилось число действительных элементов, но не увеличилось количество недействительных? Возможно, на ваших страницах не размещены структурированные данные. Выяснить, с чем связаны ошибки, можно при помощи инструмента проверки URL.
При регулярном анализе трафика
Анализировать трафик сайта из Google Поиска можно с помощью отчета об эффективности. Из этого отчета вы узнаете, как часто страница появляется в Поиске в виде расширенного результата, с какой регулярностью пользователи нажимают на нее и какова ее средняя позиция в результатах поиска. Эти сведения также можно автоматически получать с помощью Search Console API.Устранение неполадок
Если у вас возникли трудности с добавлением или отладкой структурированных данных, вам помогут ресурсы и сведения, доступные по приведенным ниже ссылкам.
- Если вы используете систему управления контентом (CMS) или поручили настройку сайта другому человеку, обратитесь за помощью к нему или разработчику CMS. Не забудьте переслать ему сообщения о проблеме, полученные вами в Search Console.
- Google не гарантирует показ вашего контента в результатах поиска, которые формируются на основе структурированных данных. Возможные причины, по которым ваши материалы могут не показываться в виде расширенных результатов, перечислены в общих рекомендациях по использованию структурированных данных.
- Ознакомьтесь со списком типичных ошибок в структурированных данных и проверьте, всё ли у вас правильно.
- Если мы вручную приняли меры в отношении страницы, недопустимые структурированные данные на ней будут игнорироваться до тех пор, пока вы не исправите код. При этом сама страница может появляться в результатах поиска и дальше. Чтобы устранить проблемы со структурированными данными, воспользуйтесь отчетом о мерах, принятых вручную.
- Ещё раз изучите рекомендации, чтобы выяснить, соответствует ли им ваш контент. Проблема может быть связана со спамом в контенте или разметке, а не с ошибками в синтаксисе. Тогда ее не получится выявить с помощью инструмента проверки расширенных результатов.
- Узнайте, что может стоять за отсутствием расширенных результатов или уменьшением их общего количества.
- Робот Googlebot сканирует и индексирует страницы не сразу после обновления контента. С момента публикации страницы может пройти несколько дней, пока Google обнаружит и просканирует ее. Мы собрали на отдельной странице ответы на часто задаваемые вопросы о сканировании и индексировании.
- В случае необходимости задавайте вопросы на форуме Центра Google Поиска