Зміст

Що таке RICH SNIPPETS?

SEO
date_s 8 Жовтня 2021
eye_s 321
time_s
Олексій Дмитренко
Автор статті:
Олексій Дмитренко
SEO-спеціаліст

Детальний посібник з використання найпопулярніших мікророзміток.

Вступ до розшерених сніппетів:

У чому різниця між функціями SERP, Rich results (багатими результатами), Rich snippets (багатими сніппетами) і Rich cards (багатими картками)?

Функція SERP – це будь-який тип результату пошуку, який не є традиційним синім посиланням.
Багаті результати (Rich results) – це термін, який Google ввів в 2017 році, щоб включити всі типи функцій / поліпшень результатів пошуку, включаючи багаті сніппети і багаті картки.
Багаті сніппети (Rich snippets) – це будь-який тип результатів органічного пошуку з розширеною інформацією, яка відображається поруч з url і мета-тегами title і description.
Багаті картки (Rich cards) – це окремий результат, часто з візуальними доповненнями, який з’являється над іншими органічними результатами.

Як отримати розширені сніппети?

Розширені описи веб-сторінок, які також називають розширеними результатами, засновані на структурованих даних.

Вони є нагородою за те, що допомагають пошуковим системам, таким як Google, зрозуміти призначення ваших веб-сторінок.

Не всі структуровані дані призводять до створення розширених фрагментів, але деякі види – при правильній реалізації – можуть створювати розширені фрагменти.

Рекомендується додавати структуровані дані, також звані мікророзмітки, в форматі JSON-LD.

JSON-LD – один з методів передачі пов’язаних даних з використанням текстового формату JSON, що дозволяє упростити роботу розробників по перетворенню існуючих JSON-даних в JSON-LD.

Google також підтримує формати мікроданних і RDFa.

RDFa – це рекомендація W3C, яка додає набір розширень на рівні атрибутів до HTML, XHTML і різним типам документів на основі XML для вбудовування розширених метаданих в веб-документи.

Як мікророзмітка сторінок сайту допомагає SEO?

У наші дні ми живемо в світі, в якому все більше і більше не клацають.

Ми очікуємо відповідей на наші пошукові запити прямо в результатах пошуку.

Стандартні сині посилання більше не допомагають. Люди шукають результати, які виділяються і полегшують їхнє життя.

На допомогу приходять розширені сніппети.

Розширені сніппети – це життєва сила SEO для пошукових систем.

Вони можуть допомогти вам досягти бажаної «нульовій позиції» і відразу ж відповідають на запити за допомогою тексту, зображень та відео. Розширені сніпети допомагають будь-якому типу бізнесу – будь то сайт електронної комерції, компанія-розробник програмного забезпечення або некомерційна організація – виділяючи результати пошуку із загальної маси.

Подумайте про це – ніхто не хоче переходити по сайту або купувати що-небудь, не знаючи, що це буде коштувати їх часу та грошей.

Розширені описи, такі як рейтинги, огляди, ціна, доступність продуктів і часто задають питання, мають вирішальне значення для перетворення користувачів, що виконують пошук, в клієнтів.

Наявність цих поліпшень призводить до більш високого CTR (кількості кліків), більш низького показника відмов, а також підвищенню впізнаваності і впізнаваності бренду.

Рекомендовані і обов’язкові атрибути даних Google

Хоча Google використовує словник schema.org, він також створив свій власний набір рекомендованих і обов’язкових властивостей.

Кожен об’єкт структурованих даних має унікальний набір рекомендованих і обов’язкових властивостей, все в залежності від типу контенту та інформації, яку він надає.

Якщо об’єкт не містить всіх необхідних властивостей, він не буде мати права на використання розширеного опису веб-сторінок, і в цьому випадку Google повідомить про це веб-майстру в звіті про розширення консолі пошуку Google Search Console.

Важливо відзначити, що будь-які рекомендовані властивості, не включені в розмітку, не впливають негативно на прийнятність розширеного опису веб-сайту.

Проте, рекомендується заповнити якомога більше рекомендованих властивостей, щоб максимально вплинути на продуктивність розширеного фрагмента.

Найпопулярніші розмітки Google Rich Snippets

Мікророзмітка карток товарів Product

Додайте розмітку Product на відповідні сторінки, щоб Google міг надати детальну інформацію про них у своїх результатах, включаючи зображення Google.

Користувачі, які виконують пошук товарів, зможуть взаємодіяти з такою інформацією як:

  • ціна,
  • доступність,
  • відгуки.

Як виглядає мікророзмітки Product у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки Product:

<html>
  <head>
    <title>Executive Anvil</title>
  </head>
  <body>
  <div>
    <div itemtype="https://schema.org/Product" itemscope>
      <meta itemprop="mpn" content="925872" />
      <meta itemprop="name" content="Executive Anvil" />
      <link itemprop="image" href="https://example.com/photos/16×9/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/4×3/photo.jpg" />
      <link itemprop="image" href="https://example.com/photos/1×1/photo.jpg" />
      <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
      <div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
        <link itemprop="url" href="https://example.com/anvil" />
        <meta itemprop="availability" content="https://schema.org/InStock" />
        <meta itemprop="priceCurrency" content="USD" />
        <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
        <meta itemprop="price" content="119.99" />
        <meta itemprop="priceValidUntil" content="2020-11-20" />
      </div>
      <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
        <meta itemprop="reviewCount" content="89" />
        <meta itemprop="ratingValue" content="4.4" />
      </div>
      <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
        <div itemprop="author" itemtype="https://schema.org/Person" itemscope>
          <meta itemprop="name" content="Fred Benson" />
        </div>
        <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
          <meta itemprop="ratingValue" content="4" />
          <meta itemprop="bestRating" content="5" />
        </div>
      </div>
      <meta itemprop="sku" content="0446310786" />
      <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
        <meta itemprop="name" content="ACME" />
      </div>
    </div>
  </div>
  </body>
</html>

Мікророзмітка статей Article

Сторінка статті – це просто сторінка блогу або веб-сайту, що відноситься до певної теми, яку потрібно переглядати або читати як новинну статтю.

Правильно розмічені сторінки статей можуть мати можливість мати розширений фрагмент в пошуку і дію в Google Assistant, що може допомогти вашому сайту охопити потрібних користувачів.

Як виглядає мікророзмітки Article у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки Article:

<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1×1/photo.jpg",
        "https://example.com/photos/4×3/photo.jpg",
        "https://example.com/photos/16×9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "http://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "http://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Мікророзмітка хлібних крихт (Breadcrumb)

Навігаційна ланцюжок на сторінці вказує положення сторінки в ієрархії сайту і може допомогти користувачам зрозуміти і ефективно вивчити сайт.

Користувач може переміщатися вгору по ієрархії сайту, по одному рівню за раз, починаючи з останньої навігаційної ланцюжка в ланцюжку навігації.

Як виглядає мікророзмітки Breadcrumb у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки Breadcrumb:

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

Мікророзмітка пошуку на сайті

Вікно пошуку за додатковими сторінками дозволяє користувачам швидко шукати ваш сайт або додаток на сторінці результатів пошуку Google.

Як виглядає мікророзмітки пошуку по сайту у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки пошуку по сайту:

<html>
  <head>
    <title>The title of the page</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://www.example.com/",
      "potentialAction": [{
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://query.example.com/search?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      },{
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "android-app://com.example/https/query.example.com/search/?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Мікророзмітка Карусель

Карусель надає кілька результатів з розширеними картками в форматі списку в пошуковій видачі.

Єдині типи об’єктів, які будуть створювати карусель, включають:

  • статтю,
  • рецепт,
  • курс,
  • ресторан,
  • фільм.

Щоб отримати право на карусель, всі об’єкти повинні бути однаковими.

Як правило, каруселі з’являються тільки на мобільних пристроях, і їх можна включити в список каруселей серед інших веб-сайтів.

Карусельна розмітка структурованих даних займає більше місця у верхній частині сторінки результатів пошуку, забезпечуючи більшу видимість на багатьох сторінках, оскільки ви можете прокручувати список, покращуючи CTR.

Як виглядає карусель у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки каруселі:

<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"http://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://example.com/snickerdoodles.html"
        }
      ]
    }
    </script>
  </head>
  <body>
    <p>
      Here are the best cookie recipes of all time.
    </p>
    <h2>
      Peanut Butter Cookies
    </h2>
    <p>
      This <a href="https://example.com/peanut-butter-cookies.html">Peanut Butter Cookie recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Triple Chocolate Chunk Cookies
    </h2>
    <p>
      This <a href="https://example.com/triple-chocolate-chunk.html">Triple Chocolate Chunk Cookies recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Snickerdoodles
    </h2>
    <p>
      This <a href="https://example.com/snickerdoodles.html">Snickerdoodles recipe</a> is the tastiest one you'll find.
    </p>
  </body>
</html>

Мікророзмітка курсів

Розмітьте списки курсів за допомогою структурованих даних, щоб майбутні студенти могли знайти вас через Google Пошук.

Ви можете надати детальну інформацію, включаючи назву курсу, хто його пропонує і короткий опис.

Як виглядає мікророзмітки курсів у видачі Google:

Приклад розмітки курсів в коді сайту:

<html>
  <head>
    <title>Introduction to Computer Science and Programming</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Course",
      "name": "Introduction to Computer Science and Programming",
      "description": "Introductory CS course laying out the basics.",
      "provider": {
        "@type": "Organization",
        "name": "University of Technology – Eureka",
        "sameAs": "http://www.ut-eureka.edu"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Мікророзмітка заходів

За допомогою даної розмітки ви зможете вивести прямо в видачу майбутні заходи, дату, час, місце проведення та ціну.

Як виглядає мікророзмітки пошуку по сайту у видачі Google:

Приклад розмітки заходів в коді сайту:

<html>
  <head>
    <title>The Adventures of Kira and Morrison</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Event",
      "name": "The Adventures of Kira and Morrison",
      "startDate": "2025-07-21T19:00-05:00",
      "endDate": "2025-07-21T23:00-05:00",
      "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
      "eventStatus": "https://schema.org/EventScheduled",
      "location": {
        "@type": "Place",
        "name": "Snickerpark Stadium",
        "address": {
          "@type": "PostalAddress",
          "streetAddress": "100 West Snickerpark Dr",
          "addressLocality": "Snickertown",
          "postalCode": "19019",
          "addressRegion": "PA",
          "addressCountry": "US"
        }
      },
      "image": [
        "https://example.com/photos/1×1/photo.jpg",
        "https://example.com/photos/4×3/photo.jpg",
        "https://example.com/photos/16×9/photo.jpg"
       ],
      "description": "The Adventures of Kira and Morrison is coming to Snickertown in a can't miss performance.",
      "offers": {
        "@type": "Offer",
        "url": "https://www.example.com/event_offer/12345_201803180430",
        "price": "30",
        "priceCurrency": "USD",
        "availability": "https://schema.org/InStock",
        "validFrom": "2024-05-21T12:00"
      },
      "performer": {
        "@type": "PerformingGroup",
        "name": "Kira and Morrison"
      },
      "organizer": {
        "@type": "Organization",
        "name": "Kira and Morrison Music",
        "url": "https://kiraandmorrisonmusic.com"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Мікророзмітка FAQ (Часті питання)

Сторінка часто ставляться (FAQ) містить список питань і відповідей, які стосуються певної теми.

Правильно розмічені сторінки поширених запитань можуть мати розширений фрагмент в пошуку і в Google Assistant, що може допомогти вашому сайту охопити більше цільових користувачів.

Дану мікророзмітки можна використовувати для багатьох сторінок сайту.

Приклад використання мікророзмітки FAQ для комерційної сторінки інтернет-магазину:

Приклад використання мікророзмітки FAQ для сторінки послуги:

Приклад використання мікророзмітки FAQ для інформаційної сторінки блогу:

Приклад розмітки FAQ в коді сайту:

Мікророзмітка How-to

Мікророзмітки How-to знайомить користувачів з рядом кроків для успішного виконання завдання і може включати відео, зображення і текст.

Наприклад, “Як зав’язати краватку”.

Якщо кожен крок в інструкції потрібно читати послідовно, це добра ознака того, що структуровані дані HowTo можуть принести користь вашому контенту.

Структуровані дані HowTo підходять, коли в центрі уваги сторінки знаходяться інструкції.

Правильно розмічені сторінки із відомостями можуть мати можливість мати розширений фрагмент в пошуку і в Google Assistant.

Як виглядає мікророзмітки How-to у видачі Google:

Приклад розмітки How-To в коді сайту:

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

Мікророзмітка Local Business (Локальний бізнес)

Коли користувачі шукають компанії в пошуку Google або на картах, в результатах пошуку може відображатися добре помітна картка мережі знань з докладною інформацією про компанії, яка відповідає запиту.

Коли користувачі запитують тип бізнесу (наприклад, «кращі ресторани Нью-Йорка»), вони можуть побачити карусель підприємств, пов’язаних із запитом.

За допомогою структурованих даних Local Business ви можете повідомити Google про свій робочий час, різних відділах компанії, оглядах вашої компанії та багато іншого.

Якщо ви хочете допомогти користувачам зробити бронювання або розмістити замовлення прямо в результатах пошуку, ви можете використовувати Maps Booking API, щоб включити бронювання, платежі та інші дії.

Як виглядає мікророзмітки Local Business у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки локального бізнесу:

<html>
  <head>
    <title>Dave's Steak House</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Restaurant",
      "image": [
        "https://example.com/photos/1×1/photo.jpg",
        "https://example.com/photos/4×3/photo.jpg",
        "https://example.com/photos/16×9/photo.jpg"
       ],
      "name": "Dave's Steak House",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "148 W 51st St",
        "addressLocality": "New York",
        "addressRegion": "NY",
        "postalCode": "10019",
        "addressCountry": "US"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Lillian Ruiz"
        }
      },
      "geo": {
        "@type": "GeoCoordinates",
        "latitude": 40.761293,
        "longitude": -73.982294
      },
      "url": "http://www.example.com/restaurant-locations/manhattan",
      "telephone": "+12122459600",
      "servesCuisine": "American",
      "priceRange": "$$$",
      "openingHoursSpecification": [
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Monday",
            "Tuesday"
          ],
          "opens": "11:30",
          "closes": "22:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": [
            "Wednesday",
            "Thursday",
            "Friday"
          ],
          "opens": "11:30",
          "closes": "23:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Saturday",
          "opens": "16:00",
          "closes": "23:00"
        },
        {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Sunday",
          "opens": "16:00",
          "closes": "22:00"
        }
      ],
      "menu": "http://www.example.com/menu",
      "acceptsReservations": "True"
    }
    </script>
  </head>
  <body>
  </body>
</html>

Вкажіть зображення, яке Google Search буде використовувати для логотипу вашої організації в результатах пошуку і в мережі знань.

Мікророзмітка логотипу

Це гарантує, що по можливості зображення з’явиться в результатах пошуку про компанію.

Подібна розмітка є сильним сигналом для алгоритмів пошуку Google.

Як виглядає мікророзмітки логотипу у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки логотипу:

Мікророзмітка Q&A (Питання і відповіді)

Сторінки питань і відповідей – це веб-сторінки, що містять дані у форматі питань та відповідей, тобто одне питання, за яким слідують відповіді.

Їх не слід плутати з часто вживаними питаннями, які представляють собою інший тип розмітки.

Як виглядає мікророзмітки Q&A у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки Q&A:

<html>
<body itemscope itemtype="https://schema.org/QAPage">
<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
   <h2 itemprop="name">How many ounces are there in a pound?</h2>
   <div itemprop="upvoteCount">52</div>
   <div itemprop="text">I have taken up a new interest in baking and keep running across directions in ounces and pounds. I have to translate between them and was wondering how many ounces are in a pound?</div>
   <div>asked <time itemprop="dateCreated" datetime="2010-11-04T20:07Z">Nov 11
'10 at 20:07</time></div>
<div itemprop="author" itemscope itemtype="https://schema.org/Person"><span
itemprop="name">New Baking User</span></div>
<div>
    <div><span itemprop="answerCount">3</span> answers</div>
    <div><span itemprop="upvoteCount">26</span> votes</div>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">1337</div>
       <div itemprop="text">
       1 pound (lb) is equal to 16 ounces (oz).
       </div>
      <a itemprop="url" href="https://example.com/question1#acceptedAnswer">Answer Link</a>
      <div>answered <time itemprop="dateCreated" datetime="2010-12-01T22:01Z">Dec 1 '10 at 22:01</time></div>
      <div itemprop="author" itemscope itemtype="https://schema.org/Person"><span itemprop="name">SomeUser</span></div>
      </div>
    <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">42</div>
       <div itemprop="text">
       Are you looking for ounces or fluid ounces? If you are looking for fluid ounces there are 15.34 fluid ounces in a pound of water.
       </div>
       <a itemprop="url" href="https://example.com/question1#suggestedAnswer1">Answer Link</a>
       <div>answered <time itemprop="dateCreated"datetime="2010-12-06T21:11Z">Dec 6 '10 at 21:11</time></div>
       <div itemprop="author" itemscope itemtype="https://schema.org/Person"><span
itemprop="name">AnotherUser</span></div>
     </div>
     <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="upvoteCount">0</div>
       <div itemprop="text">
       I can't remember exactly, but I think 18 ounces in a lb. You might want to double check that.
       </div>
       <a itemprop="url" href="https://example.com/question1#suggestedAnswer2">Answer Link</a>
       <div>answered <time itemprop="dateCreated"datetime="2010-12-06T21:11Z">Dec 6 '10 at 21:11</time></div>
       <div itemprop="author" itemscope itemtype="https://schema.org/Person"><span
itemprop="name">ConfusedUser</span></div>
    </div>
</div>
</div>
</body>
</html>

Мікророзмітка для рецептів приготування страв

Допоможіть користувачам знайти зміст вашого рецепта, розповівши Google про ваш рецепті за допомогою структурованих даних.

Коли ви надаєте таку інформацію, як оцінки рецензентів, час приготування, Google може краще зрозуміти ваш рецепт і представити його користувачам цікавим способом.

Рецепти можуть з’являтися в результатах пошуку Google і картинках Google.

Як виглядає мікророзмітки рецепта у видачі Google:

Приклад розмітки мікророзмітки рецепта в коді сайту:

<html>
  <head>
    <title>Party Coffee Cake</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Party Coffee Cake",
      "image": [
        "https://example.com/photos/1×1/photo.jpg",
        "https://example.com/photos/4×3/photo.jpg",
        "https://example.com/photos/16×9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Mary Stone"
      },
      "datePublished": "2018-03-10",
      "description": "This coffee cake is awesome and perfect for parties.",
      "prepTime": "PT20M",
      "cookTime": "PT30M",
      "totalTime": "PT50M",
      "keywords": "cake for a party, coffee",
      "recipeYield": "10",
      "recipeCategory": "Dessert",
      "recipeCuisine": "American",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "270 calories"
      },
      "recipeIngredient": [
        "2 cups of flour",
        "3/4 cup white sugar",
        "2 teaspoons baking powder",
        "1/2 teaspoon salt",
        "1/2 cup butter",
        "2 eggs",
        "3/4 cup milk"
        ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "name": "Preheat",
          "text": "Preheat the oven to 350 degrees F. Grease and flour a 9×9 inch pan.",
          "url": "https://example.com/party-coffee-cake#step1",
          "image": "https://example.com/photos/party-coffee-cake/step1.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Mix dry ingredients",
          "text": "In a large bowl, combine flour, sugar, baking powder, and salt.",
          "url": "https://example.com/party-coffee-cake#step2",
          "image": "https://example.com/photos/party-coffee-cake/step2.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Add wet ingredients",
          "text": "Mix in the butter, eggs, and milk.",
          "url": "https://example.com/party-coffee-cake#step3",
          "image": "https://example.com/photos/party-coffee-cake/step3.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Spread into pan",
          "text": "Spread into the prepared pan.",
          "url": "https://example.com/party-coffee-cake#step4",
          "image": "https://example.com/photos/party-coffee-cake/step4.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Bake",
          "text": "Bake for 30 to 35 minutes, or until firm.",
          "url": "https://example.com/party-coffee-cake#step5",
          "image": "https://example.com/photos/party-coffee-cake/step5.jpg"
        },
        {
          "@type": "HowToStep",
          "name": "Enjoy",
          "text": "Allow to cool and enjoy.",
          "url": "https://example.com/party-coffee-cake#step6",
          "image": "https://example.com/photos/party-coffee-cake/step6.jpg"
        }
      ],
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "video": {
        "@type": "VideoObject",
        "name": "How to make a Party Coffee Cake",
        "description": "This is how you make a Party Coffee Cake.",
        "thumbnailUrl": [
          "https://example.com/photos/1×1/photo.jpg",
          "https://example.com/photos/4×3/photo.jpg",
          "https://example.com/photos/16×9/photo.jpg"
         ],
        "contentUrl": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Мікророзмітка відео

Пошук Гугл – це відправна точка для пошуку і перегляду відео.

Хоча Google намагається автоматично зрозуміти деталі вашого відео, ви можете надати інформацію, таку як опис, URL-адресу сторінки, дату завантаження і тривалість.

Відео можуть з’являтися в результатах пошуку Google, результати пошуку відео, Картинках Google і Google Discover.

Як виглядає мікророзмітки відео у видачі Google:

Приклад мікророзмітки відео в коді сайту:

<html itemscope itemprop="VideoObject" itemtype="https://schema.org/VideoObject">
<head>
  <title itemprop="name">Introducing the self-driving bicycle in the Netherlands</title>
</head>
<body>
  <meta itemprop="uploadDate" content="2016-03-31T08:00:00+08:00" />
  <meta itemprop="duration" content="PT1M54S" />
  <p itemprop="description">This spring, Google is introducing the self-driving bicycle in Amsterdam, the world's premier cycling city. The Dutch cycle more than any other nation in the world, almost 900 kilometres per year per person, amounting to over 15 billion kilometres annually. The self-driving bicycle enables safe navigation through the city for Amsterdam residents, and furthers Google's ambition to improve urban mobility with technology. Google Netherlands takes enormous pride in the fact that a Dutch team worked on this innovation that will have great impact in their home country.</p>
  <div itemprop="interactionStatistic" itemtype="https://schema.org/InteractionCounter" itemscope>
    <meta itemprop="userInteractionCount" content="5647018" />
    <meta itemprop="interactionType" itemtype="https://schema.org/WatchAction" />
  </div>
  <link itemprop="embedUrl" href="https://www.example.com/embed/123" />
  <meta itemprop="contentUrl" content="https://www.example.com/video/123/file.mp4" />
  <meta itemprop="regionsAllowed" content="US,NL" />
  <meta itemprop="thumbnailUrl" content="https://example.com/photos/1×1/photo.jpg" />
</body>
</html>

Мікророзмітка для повідомлень, що стосуються COVID-19 (BETA)

Актуальна мікророзмітки в наш час. Підійде для бізнесу який може змінити свій графік через погіршення ситуації з Ковід 19. В даний момент дана мікророзмітки в тестіруеруется, але якщо у вас саме такий бізнес, то ви можете сміливо її використовувати.

Як виглядає мікророзмітки COVID-19 у видачі Google:

Приклад розмітки коду для коректної роботи мікророзмітки COVID-19:

<html itemscope itemprop="SpecialAnnouncement" itemtype="https://schema.org/SpecialAnnouncement">
<head>
  <title itemprop="name">Shelter-in-place for 3 California counties</title>
</head>
<body>
  <p itemprop="datePosted" content="2020-03-17T08:00">March 17, 2020</p>
  <meta itemprop="expires" content="2020-03-30T08:00" />
  <p itemprop="text">As of 11:59 pm on March 17, 2020, all individuals in the 3 counties must strictly follow the provisions in this new Order. This new Order will be in effect through March 30, 2020.</p>
  <p itemprop="quarantineGuidelines" content="https://example.org/california/shelter-in-place/"><a href="https://example.org/california/shelter-in-place/">Learn more</a>.</p>
  <meta itemprop="diseasePreventionInfo" content="https://example.org/california/prevention-tips/" />
  <meta itemprop="category" content="https://www.wikidata.org/wiki/Q81068910" />
  <div itemprop="spatialCoverage" itemtype="https://schema.org/AdministrativeArea" itemscope>
    <meta itemprop="name" content="San Francisco County, CA" />
    </div>
  <div itemprop="spatialCoverage" itemtype="https://schema.org/AdministrativeArea" itemscope>
    <meta itemprop="name" content="Marin County, CA" />
  </div>
  <div itemprop="spatialCoverage" itemtype="https://schema.org/AdministrativeArea" itemscope>
    <meta itemprop="name" content="Santa Clara County, CA" />
  </div>
</body>
</html>