Вход

Что такое JSON + LD разметка сайта?

7.03.2018

6 минут

микроразметка, Разработка, Руководства,

1027

Добрый день, сегодня мы познакомим вас с такой вещью как микроразметка сайта, а точнее с одной из ее разновидностей – JSON LD разметка.

Кому статья будет полезна?

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

Приступаем к рассмотрению нашего вопроса

Любой разработчик, SEO специалист или владелец сайта явно сталкивался с такой задачей, как внедрение микроразметки на свой собственный сайт. Следует отметить, что такая вещь как «микроразметка» существует в разных типах, а точней сказать, существует два основных понятия. Такие как:

Словари – задают язык, который указывает на суть контента страницы;
Синтаксис – определяет, как будут указаны элементы словаря на странице.

Существующие словари микроразметки:

Org;
Микроформаты;
Open Graph;
FOAF;
Dublin Core;
Data Vocabulary;
Good Relations.

Самые популярные словари микроразметки на данный момент – это словари Shema.org и Open Graph.

Существующие синтаксисы микроразметки:

Microdata;
RDFa и RDFa Lite;
JSON-LD.

Именно JSON LD нас сегодня больше всего интересует. Рассмотрим более детально эту технологию.

Что же такое JSON+LD разметка по определению

JSON-LD — это способ передачи связанных данных (Linked Data, LD) с помощью текстового формата JSON (JavaScript Object Notation). Формат JSON-LD разработала организация W3C. Использование текстового формата JSON позволяет людям легко читать и писать документы, размеченные с помощью JSON-LD. Страницы с разметкой JSON-LD облегчают структурирование данных поисковыми роботами и распознавание понятий.

Данный синтаксис позволяет поместить информацию в контекст, который определяется указанием объектов и описанием их свойств.

Данные, размеченные с помощью JSON+LD, распознаются поисковыми системами. Это облегчает и может повысить индексирование, а также повышает видимость сайта в поиске благодаря расширенным сниппетам, которые могут выглядеть таким образом:

При этом JSON-LD совместим со schema.org, что позволяет владельцу сайта пользоваться семантикой этой системы. А если говорить проще – использовать сразу две микроразметки на сайте.

Как используется разметка JSON + LD

Формат JSON-LD предполагает связывание данных с помощью ключей и их значений. Список зарезервированных ключей можно посмотреть в документах W3C. Центральным понятием этого способа разметки является контекст (@context). С помощью этого ключа вы можете связывать термины с международными идентификаторами ресурсов (IRI). Ниже представлено описание некоторых ключей в разметке:

context

Определяет структуру предоставляемых данных, а именно ключи и типы значений к ключам(IRI).

Используется для определения уникального имени для сущности. В структуре данных сущность – это узел графа.

value

Используется для определения данных для введенных ключей.

language

Определяет язык предоставленных данных.

{
  "@context":
  {
    ...
    "@language": "ru"
  },
  "name": "Penguin",
  "occupation": "Разработчик арктики"
}

type

Указывает тип узла или же типизированного значения.

container

Выставляем тип контейнера для нашего ключа.

{
  "@context":
  {
    ...
    "nick":
    {
      "@id": "http://xmlns.com/foaf/0.1/nick",
      "@container": "@list"
    }
  },
...
  "@id": "http://example.org/people#penguin",
  "nick": [ "fibi", "joy", "chandler" ],
...
}

list

Контейнер данных, в JSON представлен массивом.

["var1","var2","var3"]

set

Контейнер данных, в JSON представлен как объект ключ => значение.

{ "@id": "data" }

reverse

Добавляет общий ключ для узлов графа, этот ключ будет родительским для узлов, которые вписаны внутри reverse.

Пример добавления ключа без reverse

[
  {
    "@id": "#r2d2",
    "http://example.com/vocab#name": "r2d2"
  },
  {
    "@id": "#yoda",
    "http://example.com/vocab#name": "Yoda",
    "http://example.com/vocab#parent": { "@id": "#rdd2" }
  },]

В случае если использовать reverse, то мы получим более удобную структуру.

{
  "@id": "#r2d2",
  "http://example.com/vocab#name": "r2d2",
  "@reverse": {
    "http://example.com/vocab#parent": [
      {
        "@id": "#Yoda",
        "http://example.com/vocab#name": "Yoda"
      },
    ]
  }
}

index

Вид контейнера, который представлен как произвольные структуры ключ значение. Тут используется прямой доступ к данным без определения структуры в контексте.

{
  "@context":
  {
     "schema": "http://schema.org/",
     "name": "schema:name",
     "body": "schema:articleBody",
     "words": "schema:wordCount",
     "post": {
       "@id": "schema:blogPost",
       "@container": "@index"
     }
  },
  "@id": "http://example.com/",
  "@type": "schema:Blog",
  "name": "World News",
  "post": {
     "en": {
       "@id": "http://example.com/posts/1/en",
       "body": "World today...",
       "words": 1539
     }
  }
}

base

Определяет основной URL для IRI с относительными путями.

vocab

Указывает специфический словарь, который расширяет типы для ключа type.

{
  "@context": {
    "@vocab": "http://schema.org/"
  }
  "@id": "http://example.org/places#Cafe",
  "@type": "Бистро",
  "name": "Cafe"
  ...
}

graph

Иногда нужно присоединить не узел, а полный граф как объект, и для этого используется данный ключ. Тут граф передается как группа узлов.

{
  "@context": {
    "generatedAt": {
      "@id": "http://www.w3.org/ns/prov#generatedAtTime",
      "@type": "http://www.w3.org/2001/XMLSchema#date"
    },
    "Person": "http://xmlns.com/foaf/0.1/Person",
    "name": "http://xmlns.com/foaf/0.1/name",
    "knows": "http://xmlns.com/foaf/0.1/knows"
  },
  "@id": "http://example.org/graphs/73",
  "generatedAt": "2012-04-09",
  "@graph":
  [
    {
      "@id": "http:// YodaMaster.net /about#manu",
      "@type": "Person",
      "name": "Yoda",
      "knows": "http://YodaMaster.net/foaf#me"
    },
    {
      "@id": "http:// YodaMaster.com /foaf#me",
      "@type": "Person",
      "name": "Palpatin",
      "knows": "http:// YodaMaster.com /about#manu"
    }
  ]
}

Подводя итоги

Формат JSON-LD — это способ структурирования данных, который не предполагает изменение содержимого в теле страницы. Этот инструмент отлично подходит владельцам сайтов, которые хотят быстро реализовать микроразметку. Вставка подобной разметки никаким образом не влияет на работу скриптов и стилей сайта (при условии, что она не содержит грубых синтаксических ошибок). Кроме того, внедрение такой разметки вы сможете сделать самостоятельно, даже если отдаленно слышали о том, что такое HTML. Данный инструмент не требует слишком высоких технических навыков.

Для вашего удобства ниже представлены примеры микроразметки JSON LD

Web site:

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "WebSite",
  "name": "Penguin team",
  "alternateName": "Penguin Studio",
  "url": "https://pengstud.com/"
}
</script>

Хлебные крошки JSON+LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org/", 
  "@type": "BreadcrumbList", 
  "itemListElement": [
    { 
      "@type": "ListItem", 
      "position": "1", 
      "item": { 
        "@id": "https://pengstud.com/", 
        "name": "Home" 
      } 
    },
    { 
      "@type": "ListItem", 
      "position": "2", 
      "item": { 
        "@id": "https://pengstud.com/ppctools/", 
        "name": "PPC Tools" 
        } 
    }
  ]
}
</script>

Разметки статьи в блоге по схеме JSON LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "headline": "Знакомство с WPS Framework",
  "image": {
    "@type": "ImageObject",
    "url": "https://pengstud.com/wp-content/uploads/2018/02/Framework-material.jpg",
    "width": 1200,
    "height": 300
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://pengstud.com/blog/znakomstvo-s-wps-framework/"
  },
  "description": "WPS Framework — это инструмент, созданный разработчиком Penguin-team для удобства при разработке сайтов на CMS WordPress.",
  "datePublished": "2018-02-22",
  "dateModified": "2018-02-23",
  "author": {
    "@type": "Person",
    "name": "Penguin"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Penguin-team",
    "logo": {
      "@type": "ImageObject",
      "url": "https://pengstud.com/wp-content/themes/pengstud_v2/assets/img/common/team-logo.png",
      "width": 600,
      "height": 60
    }
  }
}
</script>

Разметка товара по схеме JSON LD:

<script type="application/ld+json">
{
  "@context": "http://schema.org/", 
  "@type": "Product", 
  "name": "Лёд",
  "image": "https://pengstud.com/topic/razrabotka-2/",
  "description": "Чистый и свежий",
  "brand": "Арктика",
  "sku": "",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "USD",
    "price": "100",
    "priceValidUntil": "2018-02-28",
    "availability": "http://schema.org/InStock",
    "itemCondition": "http://schema.org/NewCondition"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "bestRating": "5",
    "worstRating": "4",
    "ratingCount": "100"
  }
}
</script>

Надеемся, что данные примеры станут вам полезными, и вы сможете расширить сниппет своего сайта в выдаче. Удачной и валидной разметки!