Как Введение Структурированных Данных (Schema Markup) Влияет на SEO: Пошаговое Руководство

Что такое Разметка Schema и Почему Она важна для SEO?

Google SEO

Улучшайте результаты поиска с помощью разметки 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 рейтингах при внедрении схем, они могут:

Сделайте ваши страницы пригодными для отображения в расширенных результатах.
Обеспечить чаще попадание ваших страниц в целевой аудитории.
Избегать путаницы и неоднозначности.

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