Як Впровадження Структурованих Даних (Schema Markup) Впливає на SEO: Покроковий Посібник

Що Таке Розмітка Schema та Чому Вона Важлива для SEO?

Google SEO UA

Покращуйте свої результати пошуку за допомогою розмітки Schema. Дізнайтеся, що це таке і як використовувати її для виділення ваших вебсторінок. Schema.org - це колекція словників (схем), що використовуються для застосування розмітки структурованих даних на вебсторінках та вмісті. Правильне застосування схеми може покращити SEO-результати завдяки розширеним фрагментам.

Структурована розмітка даних перекладається такими платформами, як Google та Microsoft, для надання розширених результатів (або розширених фрагментів) на сторінках результатів пошуку або в електронних листах. Наприклад, ви можете розмічати свої сторінки з товарами в інтернет-магазині схемою варіантів, щоб допомогти Google зрозуміти варіації товарів.

Schema.org - це незалежний проєкт, який допоміг встановити послідовність структурованих даних в Інтернеті. Він розпочав співпрацю з пошуковими системами, такими як Google, Yahoo, Bing та Yandex, ще у 2011 році.

Словник Schema можна застосовувати до сторінок за допомогою кодувань, таких як RDFa, Microdata та JSON-LD. Google віддає перевагу схемі JSON-LD, оскільки її найпростіше застосовувати та підтримувати.

Чи Покращує Розмітка Schema Ваші Позиції у Пошуку?

Schema не є фактором ранжування.

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

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

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

Згідно з Schema.org:

“Більшість вебмайстрів знайомі з HTML-тегами на своїх сторінках. Зазвичай HTML-теги вказують браузеру, як відображати інформацію, включену в тег. Наприклад, <h1>Аватар</h1> вказує браузеру відобразити текстовий рядок “Аватар” у форматі заголовка 1.

Однак HTML-тег не надає жодної інформації про те, що означає цей текстовий рядок — “Аватар” може стосуватися дуже успішного 3D фільму, або ж це може бути тип профільної картинки — і це може ускладнити пошуковим системам інтелектуально відображати відповідний контент користувачу.”

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

Ви навіть можете зв'язати свої сутності безпосередньо з такими сайтами, як Wikipedia або Google Knowledge Graph, щоб побудувати чіткі зв’язки. Використання схеми таким чином може мати позитивні результати для SEO, згідно з Мартою ван Беркел, генеральним директором Schema App:

"У Schema App ми тестували, як зв'язування сутностей може вплинути на SEO. Ми виявили, що уточнення сутностей, таких як місця, покращує результати сторінок за запитами [поруч зі мною] та іншими пошуковими запитами, що базуються на місцезнаходженні.

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

Ось приклад зв'язування сутностей. Якщо ваша сторінка говорить про “Париж”, це може бути заплутаним для пошукових систем, оскільки у світі існує кілька міст з назвою Париж.

Якщо ви говорите про місто Париж в Онтаріо, Канада, ви можете використовувати властивість sameAs, щоб зв'язати сутність Париж на вашому сайті з відомою сутністю Париж, Онтаріо на Wikipedia, Wikidata та Google Knowledge Graph.”

Допомагаючи пошуковим системам розуміти контент, ви допомагаєте їм економити ресурси (що особливо важливо для великих вебсайтів з мільйонами сторінок) та збільшуєте шанси на правильну інтерпретацію і високе ранжування вашого контенту. Хоча це не є прямим фактором ранжування, Schema підтримує ваші зусилля в SEO, надаючи пошуковим системам найкращі можливості для правильного розуміння вашого контенту та даючи користувачам найкращий шанс його знайти.

Для чого використовується Schema Markup?

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

Ви можете мати тип об'єкта, що має визначення на schema.org , але не підтримується пошуковими системами.

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

Типи кодування Schema: JSON-LD, Microdata та RDFa

Існують три основні формати для кодування schema розмітки:

JSON-LD.
Microdata.
RDFa.

Google рекомендує JSON-LD як найкращий формат для структурованих даних. Хоча Microdata також підтримується, JSON-LD вважається кращим.

Іноді, через технічні обмеження вебсайту (наприклад, використання застарілих систем управління контентом), неможливо впровадити JSON-LD. У таких випадках єдиним варіантом залишається розмітка HTML за допомогою Microdata або RDFa.

Тепер можна комбінувати формати JSON-LD та Microdata, співставляючи атрибут @id у JSON-LD з атрибутом itemid у Microdata. Цей підхід допомагає зменшити розмір HTML ваших сторінок.

Наприклад, у розділі FAQ з великим обсягом тексту можна використовувати Microdata для контенту та JSON-LD для структурованих даних без дублювання тексту, таким чином уникаючи збільшення розміру сторінки. Ми розглянемо це детальніше нижче в статті, коли будемо обговорювати кожен тип окремо.

1. Формат Schema JSON-LD

JSON-LD кодує дані за допомогою JSON, що дозволяє легко інтегрувати структуровані дані у веб-сторінки. JSON-LD дозволяє поєднувати різні типи схем за допомогою графа з @ids, що покращує інтеграцію даних та зменшує надлишковість.

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

<div>
<h1>TechHaven</h1>
<h2>The best routers you’ll find online!</h2>
<p>Address:</p>
<p>459 Humpback Road</p>
<p>Rialto, Ca</p>
<p>Tel: 909 574 3903</p>
<p><a href="http://www.techhaven.com/menu">Click here to view our best routers!</a></p>
<p>We’re open: </p>
<p>Mon-Sat 8am - 10:30pm</p>
<p>Sun: 2pm - 8pm</p>
</div>

Коли ви заглибитесь у код, вам потрібно знайти частину вашої веб-сторінки, яка описує, що пропонує ваш бізнес. У цьому прикладі ці дані можна знайти між двома тегами <div>.

Наступний текст у форматі JSON-LD буде розмічати інформацію в межах цього HTML-фрагменту на вашій веб-сторінці, який варто включити в розділ <head> вашої веб-сторінки.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Store",
  "name": "TechHaven",
  "description": "The best routers you’ll find online!",
  "address": {
      "@type": "PostalAddress",
      "streetAddress": "459 Humpback Road",
      "addressLocality": "Rialto",
      "addressRegion": "CA",
      "postalCode": "92376",
      "addressCountry": "USA"
   },
  "telephone": "+19095743903",
  "url": "http://www.techhaven.com/menu",
  "openingHoursSpecification": 
    [
       {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": 
             [
             "Monday",
             "Tuesday",
             "Wednesday",
             "Thursday",
             "Friday",
             "Saturday"
             ],
          "opens": "08:00",
          "closes": "22:30"
       },
       {
          "@type": "OpeningHoursSpecification",
          "dayOfWeek": "Sunday",
          "opens": "14:00",
          "closes": "20:00"
       }
    ]
}
</script>

Цей відрізок коду визначає ваш бізнес як магазин за допомогою атрибута "@type": "Store".

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

Структуруючи дані вашої веб-сторінки таким чином, ви надаєте критичну інформацію безпосередньо пошуковим системам, що може покращити їх індексацію та відображення вашого сайту у результатах пошуку. Точно так само, як додавання тегів у початковий HTML, вставлення цього скрипту JSON-LD повідомляє пошуковим системам конкретні аспекти вашого бізнесу.

Давайте розглянемо ще один приклад схеми веб-сторінки, підключеної до схеми Організації та Автора за допомогою @id. JSON-LD - це формат, який рекомендує Google та інші пошукові системи, оскільки він дуже гнучкий, і це чудовий приклад.

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "2000-01-01",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-555-1212",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/founder/jane-smith/#founder"
      },
    "sameAs": [
         "https://www.facebook.com/example",
         "https://www.twitter.com/example",
        "https://www.linkedin.com/company/example"
      ]
 },
 {
     "@id": "https://www.example.com/sample-page/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page for Example Company.",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     }
 },
{
     "@id": "https://www.example.com/sample-page/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "This is an example news article.",
     "articleBody": "This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.",
     "author": {
        "@id": "https://www.example.com/authors/john-doe/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/sample-page/#webpage"
    },
    "mainEntityOfPage": {
      "@id": "https://www.example.com/sample-page/#webpage"
    }
  },
{
    "@id": "https://www.example.com/founder/jane-smith/#founder",
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://www.example.com/founder/jane-smith",
    "sameAs": [
       "https://www.twitter.com/janesmith",
       "https://www.linkedin.com/in/janesmith"
    ]
 },
{
    "@id": "https://www.example.com/authors/john-doe/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe",
    "sameAs": [
        "https://www.twitter.com/johndoe",
        "https://www.linkedin.com/in/johndoe"
     ]
  }
 ]
}
</script>

У цьому прикладі:

Веб-сайт посилається на організацію як видавця з @id.
Організація описана з докладним описом властивостей.
WebPage посилається на WebSite за допомогою isPartOf.
NewsArticle посилається на WebPage за допомогою isPartOf, а також назад на WebPage за допомогою mainEntityOfPage, і включає властивість автора через @id.

Ви можете побачити, як графічні вузли пов'язані між собою, використовуючи атрибут "@id". Таким чином, ми повідомляємо Google, що це веб-сторінка, опублікована видавцем, описаним у схемі.

Використання хешів (#) для ідентифікаторів є необов'язковим. Ви повинні лише переконатися, що різні типи схем не мають випадково однакового ID. Додавання власних хешів (#) може бути корисним, оскільки це надає додатковий рівень захисту від їх повторення.

Ви, можливо, замислюєтеся, чому ми використовуємо "@id" для з'єднання графічних вузлів. Чи не можемо ми просто розмістити окремо схеми організації, автора та веб-сторінки на одній сторінці, і це буде зрозуміло, що вони пов'язані?

Річ у тому, що Google та інші пошукові системи не можуть надійно інтерпретувати ці зв'язки, якщо вони не будуть явно зв'язані за допомогою @id.

Додавання до графіка додаткових типів схем таке ж просте, як конструювання конструктора Lego. Скажімо, ми хочемо додати зображення до схеми:

{
   "@type": "ImageObject",
   "@id": "https://www.example.com/#post-image",
   "url": "https://www.example.com/example.png",
   "contentUrl": "https://www.example.com/example.png",
   "width": 2160,
   "height": 1215,
   "thumbnail": [
     {
        "@type": "ImageObject",
        "url": "https://example.com/4x3/photo.jpg",
        "width": 1620,
        "height": 1215
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/16x9/photo.jpg",
        "width": 1440,
        "height": 810
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg",
        "width": 1000,
        "height": 1000
      }
    ]
}

Як ви вже знаєте зі схеми NewsArticle, вам потрібно додати її до вищезазначеного графа схеми як батьківський вузол і зв'язати через @id.

Коли ви це зробите, він буде мати таку структуру:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "2000-01-01",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-555-1212",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/#founder"
      },
    "sameAs": [
         "https://www.facebook.com/example",
         "https://www.twitter.com/example",
        "https://www.linkedin.com/company/example"
      ]
 },
 {
     "@id": "https://www.example.com/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page for Example Company.",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     },"
    /*primary image node is linked via id*/
     primaryImageOfPage": {
         "@id": "https://www.example.com/#post-image"
     },
 },
{
     "@id": "https://www.example.com/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "This is an example news article.",
     "articleBody": "This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.",
     "author": {
        "@id": "https://www.example.com/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/#webpage"
    },
    "mainEntityOfPage": {
      "@id": "https://www.example.com/#webpage"
    },
     /*image node is linked via id*/
    "image": {
      "@id": "https://www.example.com/#post-image"
   },
  },
{
    "@id": "https://www.example.com/#founder",
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://www.example.com/founder/jane-smith",
    "sameAs": [
       "https://www.twitter.com/janesmith",
       "https://www.linkedin.com/in/janesmith"
    ]
 },
{
    "@id": "https://www.example.com/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe",
    "sameAs": [
        "https://www.twitter.com/johndoe",
        "https://www.linkedin.com/in/johndoe"
     ]
  }
 ]
},
/*image node added here*/
{
   "@type": "ImageObject",
   "@id": "https://www.example.com/#post-image",
   "url": "https://www.example.com/example.png",
   "contentUrl": "https://www.example.com/example.png",
   "width": 2160,
   "height": 1215,
   "thumbnail": [
     {
        "@type": "ImageObject",
        "url": "https://example.com/4x3/photo.jpg",
        "width": 1620,
        "height": 1215
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/16x9/photo.jpg",
        "width": 1440,
        "height": 810
      },
      {
        "@type": "ImageObject",
        "url": "https://example.com/1x1/photo.jpg",
        "width": 1000,
        "height": 1000
      }
    ]
}
</script>

Досить просто, чи не так? Тепер, коли ви розумієте основний принцип, ви можете створити свою власну схему на основі контенту, який у вас є на вашому веб-сайті.

І оскільки ми живемо в епоху штучного інтелекту, ви також можете скористатися ChatGPT або іншими чат-ботами, щоб допомогти вам побудувати будь-яку схему, яку ви бажаєте.

2. Формат Schema Microdata

Microdata - це набір тегів, які спрямовані на спрощення анотування елементів HTML машиночитаємими тегами.

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

Подивіться на цей зразок HTML-коду, який відповідає вищезазначеній JSON-схемі з NewsArticle:

<main>
 <section>
   <h2>Our Company</h2>
   <p>Example Company, also known as Example Co., is a leading innovator in the tech industry.</p>
   <p>Founded in 2000, we have grown to a team of 200 dedicated employees.</p>
   <p>Our slogan is: "Innovation at its best".</p>
   <p>Contact us at +1-800-555-1212 for customer service.</p>
</section>
<section>
  <h2>Our Founder</h2>
  <p>Our founder, Jane Smith, is a pioneer in the tech industry.</p>
  <p>Connect with Jane on <a href="https://www.twitter.com/janesmith">Twitter</a> and <a href="https://www.linkedin.com/in/janesmith">LinkedIn</a>.</p>
  </section>
<section>
  <h2>About Us</h2>
  <p>This is the About Us page for Example Company.</p>
</section>
<section>
  <h2>Example News Headline</h2>
  <p>This is an example news article.</p>
  <p>This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.</p>
  <p>Author: John Doe. Connect with John on <a href="https://www.twitter.com/johndoe">Twitter</a> and <a href="https://www.linkedin.com/in/johndoe">LinkedIn</a>.</p>
  <img src="https://www.example.com/example.png" alt="Example image" width="2160" height="1215">
</section>
</main>

Якщо ми перетворимо вищезазначену JSON-LD схему у формат Microdata, вона буде виглядати так:

<main>
<section itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization">
  <h2>Our Company</h2>
  <p>
      <span itemprop="name">Example Company</span>, also known as 
      <span itemprop="alternateName">Example Co.</span>, is a leading innovator in the tech industry.
  </p>
  <p>Founded in 
     <span itemprop="foundingDate">2000-01-01</span>, we have grown to a team of 
     <span itemprop="numberOfEmployees">200</span> dedicated employees.
  </p>
  <p>Our slogan is: <span itemprop="slogan">Innovation at its best</span>.</p>
  <p>
     Contact us at 
     <span itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint">
        <span itemprop="telephone">+1-800-555-1212</span> for 
        <span itemprop="contactType">Customer Service</span>.
     </span>
  </p>
  <a itemprop="url" href="https://www.example.com">https://www.example.com</a>
  <img itemprop="logo" src="https://www.example.com/logo.png" alt="Example Company Logo">
  <p>Connect with us on:
    <a itemprop="sameAs" href="https://www.facebook.com/example">Facebook</a>,
    <a itemprop="sameAs" href="https://www.twitter.com/example">Twitter</a>,
    <a itemprop="sameAs" href="https://www.linkedin.com/company/example">LinkedIn</a>
  </p>
  <div itemprop="founder" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#founder">
    <h2>Our Founder</h2>
    <p>Our founder, <span itemprop="name">Jane Smith</span>, is a pioneer in the tech industry.</p>
    <p>Connect with Jane on <a itemprop="sameAs" href="https://www.twitter.com/janesmith">Twitter</a> and <a itemprop="sameAs" href="https://www.linkedin.com/in/janesmith">LinkedIn</a>.</p>
  </div>
</section>
<section itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage">
  <h2 itemprop="name">About Us</h2>
  <p itemprop="description">
     This is the About Us page for Example Company.
  </p>
  <a itemprop="url" href="https://www.example.com/about">https://www.example.com/about</a>
  <div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebSite" itemid="https://www.example.com/#website"></div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#author"></div>
  <div itemprop="primaryImageOfPage" itemscope itemtype="https://schema.org/ImageObject" itemid="https://www.example.com/#post-image"></div>
</section>
<section itemscope itemtype="https://schema.org/NewsArticle" itemid="https://www.example.com/#newsarticle">
  <h2 itemprop="headline">
     Example News Headline
  </h2>
  <p itemprop="description">
    This is an example news article.
  </p>
  <p itemprop="articleBody">
    This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.
  </p>
  <p>
     Author: 
     <span itemprop="author" itemscope itemtype="https://schema.org/Person" itemid="https://www.example.com/#author">
        <span itemprop="name">John Doe</span>
        <a itemprop="url" href="https://www.example.com/authors/john-doe">Profile</a>
        <a itemprop="sameAs" href="https://www.twitter.com/johndoe">Twitter</a>
        <a itemprop="sameAs" href="https://www.linkedin.com/in/johndoe">LinkedIn</a>
     </span>
  </p>
  <img itemprop="image" src="https://www.example.com/example.png" alt="Example image" width="2160" height="1215">
  <meta itemprop="datePublished" content="2024-05-10T10:00:40+00:00">
  <meta itemprop="dateModified" content="2024-05-10T11:00:40+00:00">
  <meta itemprop="wordCount" content="180">
  <div itemprop="isPartOf" itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage"></div>
  <div itemprop="mainEntityOfPage" itemscope itemtype="https://schema.org/WebPage" itemid="https://www.example.com/#webpage"></div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
  <div itemprop="copyrightHolder" itemscope itemtype="https://schema.org/Organization" itemid="https://www.example.com/#organization"></div>
</section>
</main>

Цей приклад показує, наскільки складним він стає порівняно з JSON-LD, оскільки розмітка розподілена по HTML. Давайте розберемося, що саме міститься в цій розмітці.

Ви бачите теги <div>, такі як:

<div itemscope>

Додавши цей тег, ми вказуємо, що HTML-код, розташований між блоками <div>, ідентифікує конкретний елемент.

Далі нам потрібно визначити, що це за елемент, використовуючи атрибут "itemtype" для визначення типу елемента (особа).

<div itemtype="https://schema.org/Person">

Тип елементу має форму URL-адреси (наприклад, https://schema.org/Person ). Для прикладу, якщо у вас є товар, ви можете використовувати http://schema.org/Product .

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

Це може здатися складним, але на Schema.org надаються приклади того, як використовувати різні типи елементів, щоб ви могли побачити, яку функцію має код.

Не хвилюйтеся, ви не залишитеся самі на самоті, намагаючись зрозуміти це самостійно!

Якщо ви все ще відчуваєте певний ступінь непевності щодо коду, Google's Structured Data Markup Helper робить маркування веб-сторінок надзвичайно простим.

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

3. Формат RDFa Schema

RDFa - це скорочення від Resource Description Framework in Attributes. В основному, RDFa - це розширення для HTML5, призначене для допомоги користувачам у позначенні структурованих даних.

RDFa не дуже відрізняється від Microdata. Теги RDFa включають попередній HTML-код в тілі вашої веб-сторінки. Для знайомства, ми розглянемо той самий код, що і вище.

HTML для тієї ж самої новинної статті в форматі JSON-LD виглядатиме так:

<main vocab="https://schema.org/" typeof="WebSite" resource="https://www.example.com/#website">
 <section typeof="Organization" resource="https://www.example.com/#organization">
  <h2>Our Company</h2>
  <p>
     <span property="name">Example Company</span>, also known as 
     <span property="alternateName">Example Co.</span>, is a leading innovator in the tech industry.
  </p>
  <p>Founded in 
     <span property="foundingDate">2000-01-01</span>, we have grown to a team of 
     <span property="numberOfEmployees">200</span> dedicated employees.
  </p>
  <p>Our slogan is: <span property="slogan">Innovation at its best</span>.</p>
  <p>
    Contact us at 
    <span property="contactPoint" typeof="ContactPoint">
       <span property="telephone">+1-800-555-1212</span> for 
       <span property="contactType">Customer Service</span>.
    </span>
  </p>
  <a property="url" href="https://www.example.com">https://www.example.com</a>
  <img property="logo" src="https://www.example.com/logo.png" alt="Example Company Logo">
  <p>Connect with us on:
    <a property="sameAs" href="https://www.facebook.com/example">Facebook</a>,
    <a property="sameAs" href="https://www.twitter.com/example">Twitter</a>,
    <a property="sameAs" href="https://www.linkedin.com/company/example">LinkedIn</a>
  </p>
  <div property="founder" typeof="Person" resource="https://www.example.com/#founder">
   <h2>Our Founder</h2>
   <p>Our founder, <span property="name">Jane Smith</span>, is a pioneer in the tech industry.</p>
   <p>Connect with Jane on <a property="sameAs" href="https://www.twitter.com/janesmith">Twitter</a> and <a property="sameAs" href="https://www.linkedin.com/in/janesmith">LinkedIn</a>.</p>
 </div>
</section>
<section typeof="WebPage" resource="https://www.example.com/#webpage">
  <h2 property="name">About Us</h2>
  <p property="description">This is the About Us page for Example Company.</p>
  <a property="url" href="https://www.example.com/about">https://www.example.com/about</a>
  <div property="isPartOf" typeof="WebSite" resource="https://www.example.com/#website"></div>
  <div property="publisher" typeof="Organization" resource="https://www.example.com/#organization"></div>
  <div property="author" typeof="Person" resource="https://www.example.com/#author"></div>
  <div property="primaryImageOfPage" typeof="ImageObject" resource="https://www.example.com/#post-image"></div>
</section>
<section typeof="NewsArticle" resource="https://www.example.com/#newsarticle">
  <h2 property="headline">Example News Headline</h2>
  <p property="description">This is an example news article.</p>
  <p property="articleBody">
    This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.
  </p>
  <p>
     Author: 
     <span property="author" typeof="Person" resource="https://www.example.com/#author">
       <span property="name">John Doe</span>
       <a property="url" href="https://www.example.com/authors/john-doe">Profile</a>
       <a property="sameAs" href="https://www.twitter.com/johndoe">Twitter</a>
       <a property="sameAs" href="https://www.linkedin.com/in/johndoe">LinkedIn</a>
    </span>
  </p>
  <img property="image" src="https://www.example.com/example.png" alt="Example image" width="2160" height="1215">
  <meta property="datePublished" content="2024-05-10T10:00:40+00:00">
  <meta property="dateModified" content="2024-05-10T11:00:40+00:00">
  <meta property="wordCount" content="180">
  <div property="isPartOf" typeof="WebPage" resource="https://www.example.com/#webpage"></div>
  <div property="mainEntityOfPage" typeof="WebPage" resource="https://www.example.com/#webpage"></div>
  <div property="publisher" typeof="Organization" resource="https://www.example.com/#organization"></div>
  <div property="copyrightHolder" typeof="Organization" resource="https://www.example.com/#organization"></div>
</section>
</main>

Відмінно від Microdata, яке використовує URL для ідентифікації типів, RDFa використовує одне або кілька слів для класифікації типів.

Якщо ви бажаєте ще додатково ідентифікувати властивість, використовуйте атрибут 'typeof'.

Давайте порівняємо JSON-LD, Microdata та RDFa поруч. Атрибут @type у JSON-LD відповідає атрибуту itemtype у форматі Microdata та атрибуту typeof у RDFa. Крім того, властивість propertyName атрибута JSON-LD буде еквівалентом атрибутів itemprop та property.

Attribute Name JSON-LD Microdata RDFa Type @type itemtype typeof ID @id itemid resource Property propertyName itemprop property Name name itemprop=”name” property=”name” Description description itemprop=”description” property=”description”.

Attribute Name	JSON-LD	Microdata	RDFa
Type	@type	itemtype	typeof
ID	@id	itemid	resource
Property	propertyName	itemprop	property
Name	name	itemprop=”name”	property=”name”
Description	description	itemprop=”description”	property=”description”

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

На допомогу, кожна сторінка на Schema.org містить приклади правильного застосування тегів. Звичайно, ви також можете скористатися інструментом перевірки структурованих даних від Google.

4. Змішування різних форматів структурованих даних з JSON-LD

Якщо ви використовуєте JSON-LD схему, але певні частини сторінок не сумісні з нею, ви можете змішувати формати схем, зв'язуючи їх через @id.

Наприклад, якщо у вас на сайті є живий блог і JSON-LD схема, включення всіх елементів живого блогу в JSON схему означало б дублювання того ж контенту на сторінці, що може збільшити розмір HTML і вплинути на метрики швидкості сторінки, такі як First Contentful Paint і Largest Contentful Paint.

Цю проблему можна вирішити або динамічним генеруванням JSON-LD за допомогою JavaScript під час завантаження сторінки, або розміткою HTML тегів живого блогу за допомогою формату Microdata, а потім зв'язуванням з вашою JSON-LD схемою в секції head через “@id“.

Ось приклад, як це зробити.

Припустимо, у нас є цей HTML з розміткою Microdata з itemid="https://www.example.com/live-blog-page/#live-blog"

<div itemid="https://www.example.com/live-blog-page/#live-blog" itemscope itemtype="https://schema.org/LiveBlogPosting">
  <h1 itemprop="name">Live Blog Headline<h1>
  <p itemprop="description">Explore the biggest announcements from DevDay<p>
  <meta itemprop="coverageStartTime" content="2024-05-06T17:39:59+00:00" />
  <meta itemprop="coverageEndTime" content="2024-05-07T03:00:00+00:00" />
  <div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
      <div itemprop="datePublished" content="2024-05-06T18:45:52+00:00">
        <span>1:45 PM ET</span> <span>Nov 6, 2023</span>
     </div>    
    <div itemprop="articleBody">
    <p>OpenAI is taking the first step in gradual deployment of GPTs – tailored ChatGPT for a specific purpose – for safety purposes.</p>
    </div>
 </div>
<div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
   <div itemprop="datePublished" content="2023-11-06T18:44:26+00:00">
    <span>1:44 PM ET</span> <span>Nov 6, 2023</span>
   </div>
   <div itemprop="articleBody">
      <p>ChatGPT now uses GPT-4 turbo with current knowledge.</p>
      <p>It also knows which tool to choose for a task with GPT-4 All Tools.</p>
   </div>
</div>
<div itemprop="liveBlogUpdate" itemscope itemtype="https://schema.org/BlogPosting">
  <div itemprop="datePublished" content="2023-11-06T18:43:31+00:00">
     <span>1:43 PM ET</span> <span>Nov 6, 2023</span>
  </div>
  <div itemprop="articleBody">
    <p>Microsoft CEO Satya Nadella joined Altman to announce deeper partnership with OpenAI to help developers bring more AI advancements.</p>
  </div>
</div>

Ми можемо посилатися на нього з прикладу JSON-LD, який у нас був, ось так:

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@graph": [
  {
    "@id": "https://www.example.com/#website",
    "@type": "WebSite",
    "name": "Example Website",
    "url": "https://www.example.com",
    "publisher": {
         "@id": "https://www.example.com/#organization"
    }
 },
 {
    "@id": "https://www.example.com/#organization",
    "@type": "Organization",
    "name": "Example Company",
    "alternateName": "Example Co.",
    "legalName": "Example Company Inc.",
    "slogan": "Innovation at its best",
    "foundingDate": "2000-01-01",
    "numberOfEmployees": 200,
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "contactPoint": {
    "@type": "ContactPoint",
       "telephone": "+1-800-555-1212",
       "contactType": "Customer Service",
       "areaServed": "US",
       "availableLanguage": "English"
      },
    "founder": {
        "@id": "https://www.example.com/founder/jane-smith/#founder"
      },
    "sameAs": [
         "https://www.facebook.com/example",
         "https://www.twitter.com/example",
        "https://www.linkedin.com/company/example"
      ]
 },
 {
     "@id": "https://www.example.com/live-blog-page/#webpage",
     "@type": "WebPage",
     "url": "https://www.example.com/about",
     "name": "About Us",
     "description": "This is the About Us page for Example Company.",
     "isPartOf": {
        "@id": "https://www.example.com/#website"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
     }
 },
{
     "@id": "https://www.example.com/live-blog-page/#newsarticle",
     "@type": "NewsArticle",
     "headline": "Example News Headline",
     "datePublished": "2024-05-10T10:00:40+00:00",
     "dateModified": "2024-05-10T11:00:40+00:00",
     "wordCount": 180,
     "description": "This is an example news article.",
     "articleBody": "This is the full content of the example news article. It provides detailed information about the news event or topic covered in the article.",
     "author": {
        "@id": "https://www.example.com/authors/john-doe/#author"
      },
     "publisher": {
        "@id": "https://www.example.com/#organization"
       },
    "copyrightHolder": {
       "@id": "https://www.example.com/#organization"
    },
    "isPartOf": {
       "@id": "https://www.example.com/live-blog-page/#webpage"
    }
  },
{  
  /* matches live blogging Microdata itemid*/
  "@id": "https://www.example.com/live-blog-page/#live-blog", 
  "isPartOf": {
    "@id": "https://www.example.com/live-blog-page/#newsarticle"
  },
  "mainEntityOfPage": {
      "@id": "https://www.example.com/live-blog-page/#webpage"
   }
},
{
    "@id": "https://www.example.com/founder/jane-smith/#founder",
    "@type": "Person",
    "name": "Jane Smith",
    "url": "https://www.example.com/founder/jane-smith",
    "sameAs": [
       "https://www.twitter.com/janesmith",
       "https://www.linkedin.com/in/janesmith"
    ]
 },
{
    "@id": "https://www.example.com/authors/john-doe/#author",
    "@type": "Person",
    "name": "John Doe",
    "url": "https://www.example.com/authors/john-doe",
    "sameAs": [
        "https://www.twitter.com/johndoe",
        "https://www.linkedin.com/in/johndoe"
     ]
  }
 ]
}
</script>

Якщо ви скопіюєте та вставите HTML і JSON приклади нижче в інструмент перевірки схем, ви побачите, що вони правильно валідуються.

google-seo.pro

Вплив структурованих даних на SEO

Ця стаття розглянула різні типи кодування схем і всі нюанси впровадження структурованих даних.

Схеми набагато легше застосовувати, ніж здається, і це найкраща практика, яку необхідно впровадити на своїх вебсторінках. Хоча ви не отримаєте прямого підвищення в SEO рейтингах за впровадження схем, вони можуть:

Зробити ваші сторінки придатними для відображення у розширених результатах.
Забезпечити частіше потрапляння ваших сторінок до цільової аудиторії.
Уникнути плутанини та неоднозначності.

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