Oznaczanie stron z instrukcjami uporządkowanymi danymi

Użyj uporządkowanych danych HowTo, by wyraźnie poinformować Google, że Twoje treści są instrukcjami. Instrukcje przedstawiają listę czynności, które należy wykonać, by zrealizować dane zadanie. Mogą zawierać wideo, obrazy i tekst. Na przykład „Jak zawiązać krawat?” lub „Jak ułożyć panel kuchenny?”. Jeśli instrukcję należy wykonywać krok po kroku, warto skorzystać z uporządkowanych danych HowTo. Uporządkowane dane HowTo są najlepszym wyborem, jeśli treść strony składa się głównie z instrukcji.

Prawidłowo oznaczone strony z instrukcjami mogą pojawiać się w wynikach wyszukiwania z elementami rozszerzonymi i w Akcji Asystenta Google, dzięki czemu Twoja witryna może dotrzeć do odpowiednich użytkowników.

Dodawanie uporządkowanych danych

Uporządkowane dane to standardowy format udostępniania informacji o stronie i klasyfikowania jej zawartości. Jeśli dopiero zaczynasz, dowiedz się, jak działają uporządkowane dane.

Oto omówienie tworzenia, testowania i udostępniania uporządkowanych danych. Szczegółowe instrukcje dodawania uporządkowanych danych do strony internetowej znajdziesz w ćwiczeniach z programowania poświęconych uporządkowanym danym.

  1. Dodaj wymagane właściwości. Informacje o tym, w którym miejscu na stronie umieścić uporządkowane dane, znajdziesz w artykule Uporządkowane dane JSON-LD: w którym miejscu na stronie je umieścić.
  2. Przestrzegaj wskazówek.
  3. Zweryfikuj kod za pomocą testu wyników z elementami rozszerzonymi.
  4. Możesz wdrożyć kilka stron z uporządkowanymi danymi i dzięki narzędziu do sprawdzania adresów URL zobaczyć, jak Google je odczytuje. Upewnij się, że Twoja strona jest dostępna dla Google i nie jest blokowana przez plik robots.txt lub tag noindex ani nie wymaga logowania. Jeśli strona wygląda dobrze, możesz poprosić Google o ponowne zindeksowanie adresów URL.
  5. Aby na bieżąco informować Google o przyszłych zmianach, prześlij mapę witryny. Możesz zautomatyzować ten proces za pomocą interfejsu Search Console Sitemap API.

Dostępność funkcji

Obecnie wyniki z elementami rozszerzonymi typu How-to są dostępne we wszystkich językach i krajach, w których działa wyszukiwarka Google. Z tej funkcji można korzystać tylko na urządzeniach mobilnych, a nie na komputerach.

Przykłady

Oto kilka przykładów ilustrujących, w jaki sposób Twoje treści mogą być widoczne w wynikach z elementami rozszerzonymi typu How-to. Wariant bardziej wizualny może być wyświetlany, jeśli instrukcje zawierają obraz przedstawiający efekt końcowy, a każdy krok jest dodatkowo zilustrowany obrazem. Aby Twoje instrukcje były jak najlepiej przedstawione w wyszukiwarce Google, dodaj jak najwięcej właściwości wymaganych i zalecanych.

Standardowy wynik z elementami rozszerzonymi typu How-to

Obraz standardowego wyniku z elementami rozszerzonymi typu How-to
JSON-LD

Oto przykład strony z instrukcjami w wersji tekstowej zapisanej w postaci kodu JSON-LD. W podanym przykładzie jest tylko jeden obraz, który przedstawia efekt końcowy instrukcji. W tym wyniku użytkownicy mogą zobaczyć podgląd treści niektórych kroków.

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

Oto przykład strony z instrukcjami w wersji tekstowej zapisanej w postaci mikrodanych. W podanym przykładzie jest tylko jeden obraz, który przedstawia efekt końcowy instrukcji. W tym wyniku użytkownicy mogą zobaczyć podgląd treści niektórych kroków.

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

Wynik z elementami rozszerzonymi typu How-to z obrazami w każdym kroku

Obraz wizualnego wyniku z elementami rozszerzonymi typu How-to
JSON-LD

Oto przykład zapisanej w postaci kodu JSON-LD strony z instrukcjami, w których każdy krok zilustrowano obrazem. W tym wyniku użytkownicy mogą zobaczyć podgląd z karuzelą obrazów.

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

Oto przykład zapisanej w postaci mikrodanych strony z instrukcjami, w których każdy krok zilustrowano obrazem. W tym wyniku użytkownicy mogą zobaczyć podgląd z karuzelą obrazów.

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

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

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

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

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

Wynik z elementami rozszerzonymi typu How-to z wideo

JSON-LD

Oto przykład zapisanej w postaci kodu JSON-LD strony z instrukcjami, które są połączeniem tekstu, obrazów i klipów wideo.

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

Oto przykład zapisanej w postaci mikrodanych strony z instrukcjami, które są połączeniem tekstu, obrazów i klipów wideo.

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

Wytyczne

Aby Twoja strona mogła pojawiać się w wynikach z elementami rozszerzonymi typu How-to i działaniach Asystenta Google dotyczących instrukcji, musisz uwzględnić te wytyczne:

Wskazówki dotyczące treści

  • Reklamy: nie wykorzystuj uporządkowanych danych HowTo do celów reklamowych.
  • Nieodpowiednie treści: wyniki z elementami rozszerzonymi typu How-to mogą nie być wyświetlane, jeśli zawierają treści o charakterze jednoznacznie seksualnym, treści wulgarne, obsceniczne, przedstawiające przemoc, propagujące niebezpieczne lub niezgodne z prawem zachowania, treści szerzące nienawiść lub mające na celu nękanie innych.
  • Źródło: wszystkie treści HowTo muszą być widoczne dla użytkowników na stronie źródłowej. Instrukcje powinny być głównym tematem strony źródłowej. Na jednej stronie używaj najwyżej jednego typu HowTo.
  • Materiały i narzędzia: dodaj uporządkowane dane do wszystkich materiałów i narzędzi niezbędnych do wykonania zadania.
  • Kroki: każdy element HowToStep musi obejmować całą zawartość kroku źródłowego. Nie oznaczaj jako kroków materiałów, które nimi nie są, np. wprowadzenia czy podsumowania.
  • Obrazy towarzyszące krokom: jeśli kroki najlepiej przedstawić wizualnie, upewnij się, że w przypadku każdego elementu HowToStep obrazy w danym kroku są objęte znacznikami. Dodaj znaczniki wyłącznie do tych obrazów, które są powiązane z danym krokiem, i nie używaj tego samego obrazu w wielu krokach jednej instrukcji. Używaj tych samych obrazów, które odpowiadają treściom na Twojej stronie. Nie używaj obrazów, które nie odzwierciedlają instrukcji, ani innych obrazów w celu zoptymalizowania wyników z elementami rozszerzonymi.
  • Obraz końcowy: jeśli efekt końcowy można zilustrować obrazem, zadbaj o to, by odpowiedni obraz znajdował się na stronie, a znacznik HowTo go zawierał, używając właściwości image. Może to być ten sam obraz, który został wybrany dla ostatniego kroku.
  • Treść: nie używaj znacznika HowTo w przepisach. Należy w nich używać znacznika Recipe structured data. W artykułach i ogólnych poradach, które nie stanowią konkretnego zestawu instrukcji, nie ma zastosowania dla znaczników HowTo.

Definicje typów uporządkowanych danych

Aby treści mogły wyświetlać się w wynikach z elementami rozszerzonymi, musisz w nich zastosować wymagane właściwości. Możesz też dodać do nich właściwości zalecane, by wzbogacić informacje podane w uporządkowanych danych i zwiększyć w ten sposób komfort użytkowników.

HowTo

Pełną definicję znaczników HowTo znajdziesz na schema.org/HowTo.

Typ HowTo wskazuje, że strona zawiera instrukcje. Każda strona musi zawierać jedną definicję typu HowTo.

Właściwości wymagane
name

Text

Tytuł instrukcji, np. „Jak zawiązać krawat”.

step HowToStep lub HowToSection

Tablica elementów HowToStep, które zawierają pełne instrukcje. Każdy element step powinien odpowiadać pojedynczemu krokowi w instrukcji. Używając tej właściwości, nie oznaczaj jako kroków materiałów, które nimi nie są, np. wprowadzenia czy podsumowania. Na przykład:

  • Możesz określić pełną treść każdego kroku, ustawiając właściwość text dla każdego elementu HowToStep. Właściwości image, nazwa kroku podana jako nameurl są opcjonalne, ale zalecane, ponieważ mogą uatrakcyjnić wygląd wyniku wyszukiwania.
  • W przypadku złożonych kroków można podać nazwę kroku (name) i listę poszczególnych podetapów za pomocą właściwości HowToDirection lub HowToTip.

Tablica elementów HowToSection, które zawierają pełne instrukcje HowTo, np.:

Właściwości zalecane
description

Text

Opis instrukcji.

estimatedCost MonetaryAmount lub Text

Szacowany koszt materiałów zużywanych podczas wykonywania instrukcji.

image ImageObject lub URL

Obraz zamierzonego efektu końcowego. Dodatkowe wytyczne dotyczące obrazów:

supply HowToSupply lub Text

Materiały zużywane podczas wykonywania instrukcji lub wskazówek.

tool HowToTool lub Text

Przedmiot używany (ale nie zużywany) podczas wykonywania instrukcji lub wskazówek.

totalTime Duration

Całkowity czas potrzebny do wykonania wszystkich instrukcji lub wskazówek (w tym czas przygotowania materiałów), podany w formacie ISO 8601.

video VideoObject

Film instruktażowy. Zapoznaj się z listą wymaganych i zalecanych właściwości Video. Obejmij kroki filmu znacznikiem hasPart.

video.hasPart

Clip

Klip wideo, który jest częścią całego filmu.

video.hasPart.endOffset

Number

Czas zakończeniu klipu wyrażony w postaci liczby sekund, które upłynęły od rozpoczęcia filmu.

video.hasPart.name

Text

Nazwa klipu. Na przykład „Pociągnij i zaciśnij” może być nazwą klipu, który pokazuje, jak zawiązać krawat.

hasPart.startOffset

Number

Czas rozpoczęcia klipu wyrażony w postaci liczby sekund, które upłynęły od początku filmu.

video.hasPart.url

URL

Link do czasu rozpoczęcia klipu. Czas rozpoczęcia musi odpowiadać wartości określonej we właściwości video.hasPart.startOffset, np.:

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

HowToSection

Pełną definicję znaczników HowToSection znajdziesz na schema.org/HowToSection.

Typ HowToSection określa sekcję pojedynczej instrukcji i zawiera co najmniej jeden krok. Nie określaj różnych sposobów wykonania danego zadania za pomocą typu HowToSection. Typ HowToSection powinien być raczej częścią jednego sposobu. Aby wymienić wiele możliwości wykonania danego zadania, użyj wielu obiektów HowTo, np. wiele sposobów, by zmienić przebitą oponę jest wymienionych jako wiele obiektów HowTo, a nie obiektów HowToSection.

Właściwości wymagane
itemListElement HowToStep

Lista szczegółowych kroków danej sekcji.

name Text

Nazwa sekcji.

HowToStep

Pełną definicję znaczników HowToStep znajdziesz na schema.org/HowToStep.

Typ HowToStep określa prosty krok w wersji tekstowej i może zawierać obraz.

Właściwości wymagane
itemListElement HowToDirection lub HowToTip

Lista szczegółowych podetapów, w tym wskazówek.

Opcjonalne, jeśli używana jest właściwość text.

text Text

Pełna treść instrukcji zawartej w danym kroku.

Opcjonalne, jeśli używana jest właściwość itemListElement. Dodatkowe wskazówki:

  • Podawaj tylko treść instrukcji bez dodatkowego tekstu takiego jak „Wskazówki”, „Obejrzyj film” czy „Krok 1”. Takie wyrażenia należy dodawać poza treściami zawierającymi znaczniki.
Właściwości zalecane
image ImageObject lub URL

Obraz ilustrujący dany krok. Dodatkowe wytyczne dotyczące obrazów:

name Text

Słowo lub krótkie wyrażenie podsumowujące krok (np. „Podłącz przewody do słupa” lub „Kop”). Nie używaj nieopisowego tekstu, np. „Krok 1: [tekst]”, ani innych form z numerem kroku, np. „1. [tekst]”.

url URL

Adres URL prowadzący bezpośrednio do kroku (jeśli jest dostępny), np. fragment linku kotwiczącego.

video VideoObject lub Clip

Wideo lub klip wideo przedstawiające dany krok.

W przypadku VideoObject postępuj zgodnie z listą wymaganych i zalecanych właściwości Video.

HowToSupplyHowToTool

Pełne definicje typów HowToSupplyHowToTool znajdziesz na schema.org/HowToSupply oraz schema.org/HowToTool.

Typy HowToSupplyHowToTool określają, co jest potrzebne do wykonania instrukcji wskazanej w typie HowTo. Mają te same właściwości wymagane i zalecane.

Właściwości wymagane
name Text

Nazwa materiału lub narzędzia.

Właściwości zalecane
image ImageObject lub URL

Obraz materiału lub narzędzia. Dodatkowe wytyczne dotyczące obrazów:

HowToDirectionHowToTip

Pełne definicje typów HowToDirectionHowToTip znajdziesz na schema.org/HowToDirection oraz schema.org/HowToTip.

Użyj typów HowToDirectionHowToTip, by opisać wskazówki. Mają te same właściwości wymagane i zalecane.

Właściwości wymagane
text Text

Treść wskazówki.

Monitorowanie wyników z elementami rozszerzonymi w Search Console

Search Console to narzędzie, które pomaga monitorować skuteczność stron w wyszukiwarce Google. Aby Twoja witryna mogła pojawiać się w wynikach wyszukiwania Google, nie musisz rejestrować jej w Search Console. Jeśli jednak to zrobisz, lepiej zrozumiesz, jak robot Google widzi Twoją witrynę i jak możesz mu ułatwić jej skanowanie. Zalecamy sprawdzenie danych w Search Console w tych przypadkach:

  1. po pierwszym wdrożeniu uporządkowanych danych,
  2. po opublikowaniu nowych szablonów lub zaktualizowaniu kodu,
  3. podczas okresowego analizowania ruchu.

Po pierwszym wdrożeniu uporządkowanych danych

Gdy Google zindeksuje Twoje strony, poszukaj problemów w odpowiednim raporcie o stanie wyników z elementami rozszerzonymi. W idealnej sytuacji powinno się pojawić więcej prawidłowych stron, a liczba błędów i ostrzeżeń nie powinna się zwiększyć. Jeśli zauważysz problemy w uporządkowanych danych:

  1. Popraw błędy.
  2. Sprawdź opublikowany adres URL, by zobaczyć, czy problem nadal występuje.
  3. Poproś o weryfikację, korzystając z raportu o stanie.

Po opublikowaniu nowych szablonów lub zaktualizowaniu kodu

Po wprowadzeniu istotnych zmian w witrynie monitoruj liczbę błędów i ostrzeżeń dotyczących uporządkowanych danych.
  • Możesz zauważyć większą liczbę błędów, jeśli wprowadzisz nowy szablon, który nie działa, lub jeśli Twoja witryna wykorzystuje istniejący szablon w nowy i nieprawidłowy sposób.
  • Jeśli okaże się, że jest mniej prawidłowych elementów (ale liczba błędów się nie zwiększyła), być może na swoich stronach nie umieszczasz już uporządkowanych danych. Użyj narzędzia do sprawdzania adresów URL, by dowiedzieć się, co jest przyczyną problemu.

Okresowe analizowanie ruchu

Analizuj ruch w wyszukiwarce Google za pomocą raportu skuteczności. Zawarte w nim dane pokazują, jak często Twoja strona wyświetla się w wyszukiwarce jako wynik z elementami rozszerzonymi, jak często użytkownicy ją klikają i jaka jest jej średnia pozycja w wynikach wyszukiwania. Możesz też pobrać te wyniki automatycznie za pomocą interfejsu Search Console API.

Rozwiązywanie problemów

Jeśli masz problem z zastosowaniem uporządkowanych danych, skorzystaj z tych rozwiązań: