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

Cтруктурированные данные — это способ придать смысл содержимому вашей веб-страницы с использованием формата, понятного компьютерам. Целью использования разметки является помощь поисковым системам в извлечении и обработки информации для удобного её представления в результатах поиска.

Schema.org — это стандарт семантической разметки данных, но не всегда применение разметки Schema является удобным. Иногда, более удобно представить данные в виде JSON-LD. Этот формат описания контента размещается в теге <script> и не требует визуального представления на странице сайта.

Впервые опубликовано:
Обновлено: 10/12/2020

Содержание

Что такое Microdata?

Microdata — это спецификация HTML, способ семантически размечать сведения о разнообразных сущностях для кодирования данных через словари, такие как schema.org, используя стандартные элементы языка HTML (или XHTML). Является методом передачи метаданных в поисковые системы. Пользователь может воспринимать размеченную страницу как обычную веб-страницу, в то же время поисковые системы способны извлечь из такой страницы структурированную информацию, следуя определённым соглашениям.

Пример форматирования бизнес-данных.

<div itemscope="" itemtype="http://schema.org/LocalBusiness">
	<span itemprop="name">Gene's Delicious Donuts</span><br>
	<link itemprop="url" href="http://www.example.com">
	<span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">123 Happy Lane</span><br>
		<span itemprop="addressLocality">Irvine</span>, <span itemprop="addressRegion">CA</span> 
		<span itemprop="postalCode">92618</span>
	</span><br>	
	<a itemprop="telephone" href="tel:+15551112345">(555) 111-2345</a><br>
	<span itemprop="faxNumber">(555) 111-2345</span><br>
	<span itemprop="email">you@domain.com</span>
	<link itemprop="logo" href="image/path/file-name.jpg">I 
	<link itemprop="sameAs" href="https://plus.google.com/your-google-url">
	<link itemprop="hasMap" href="https://www.google.com/maps/place/link-to-your-business">
	<span itemprop="geo" itemscope="" itemtype="http://schema.org/GeoCoordinates">
		<meta itemprop="latitude" content="111.00000">
		<meta itemprop="longitude" content="-96.012345">
	</span><br>
	<time itemprop="openingHours" datetime="Mo, Tu, We, Th, Fr 09:00-17:00">9AM - 5PM</time> 
</div>

Пример графа знаний Google

Пример графа знаний Google

Поскольку Microdata часто использует визуальную разметку для стилизации элементов на странице, я часто замечаю что долго вожусь с CSS и HTML, чтобы на сайте клиента все выглядело привлекательно. Проблемы с макетами страниц, создаваемые Microdata, зачастую приводят к непродуктивной трате времени.

Что такое JSON-LD?

JSON-LD — это разметки, который позволяет легко встраивать данные в тег скрипта. В отличие от Microdata данные JSON-LD, так сказать, работают в фоновом режиме. Нет нужды возиться с визуальным оформлением данных, что позволяет ускорить работу над сайтом. Со скриптами нет необходимости беспокоиться о незакрытом DIV — все просто работает. Подумайте о JSON-LD как о более быстром, более чистом, более простом средстве для микроразметки важных данных. Поисковые системы любят такое, ибо они могут легко индексировать этот код и быстрее разобраться со структурированными данными.

Важными преимуществами использования формата JSON-LD являются:

  • Вложенные значения — микроданные позволяют легко отображать сложную информацию.
  • Разметка основана на переменных — чтобы пометить новый элемент, просто добавьте переменную.
  • Экономия времени — визуальная разметка проста в использовании и сложна для устранения неполадок, если вы не знакомы с визуальными редакторами.
  • Легко пометить отзывы — сохраните стиль в своих текущих обзорах, без необходимости внесения изменений в ваш CSS-файл.

Любые данные в формате JSON-LD представляют собой набор пар ключ-значение. В отличие от JSON, формат JSON-LD предусматривает зарезервированные ключи, с помощью которых можно определять контекст описания или связывать объекты различным образом. Например, «@context» определяет словарь объектов, а «@type» — тип описываемой сущности.

Типы полезных локальных бизнес-данных, доступных для разметки

Для большинства местных предприятий наиболее важными элементами является NAP (Name + Address + Phone) — т.е. наименование компании + его адрес + телефон. Кроме того важны рабочие часы компании и геопозиционирование (очень важно для продвижения).

Вебмастер используя разметку JSON-LD сможет включить в структурированные данные:

  • Наименование фирмы
  • Адрес
  • Номер телефона
  • Адрес электронной почты
  • Рабочие часы
  • Географическая информация (координаты и карта)
  • Отзывы
  • Логотип
  • Описание деятельности
  • Социальный профиль ( социальные сети, где присутствует компания)
  • Название сайта

Дополнительные данные разметки, полезные для региональных компаний, включают:

  • Продукты
  • Медиа (изображения и видео)
  • Мероприятия
  • Корпоративные контакты
  • Средство поиска ссылок

В этом базовом примере разметки для региональной компании включены:
тип бизнеса, почтовый адрес, описание компании, название компании, телефон, часы работы, геопозиционирование  и ссылки на социальный профиль.

<script type="application/ld+json">
	{
  	"@context": "http://schema.org",
  	"@type": "LocalBusiness",
  	"address": {
    "@type": "PostalAddress",
    "addressLocality": "Irvine",
    "addressRegion": "CA",
    "postalCode":"92618",
    "streetAddress": "123 Happy Lane"
  	},
  	"description": "This is your business description.",
  	"name": "Gene’s Delicious Donuts",
  	"telephone": "555-111-2345",
  	"openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
  	"geo": {
    "@type": "GeoCoordinates",
    "latitude": "40.75",
    "longitude": "73.98"
 		}, 			
  	"sameAs" : [ "http://www.facebook.com/your-profile",
    "http://www.twitter.com/your-profile",
    "http://plus.google.com/your-profile"]
	}
</script>

Как реализовать разметку schema.org с использованием JSON-LD для региональной компании

Прежде чем приступить к работе над разметкой для вашей компанией, ознакомьтесь со следующими материалами и сервисами:

Обратите внимание на перечень локальных видов бизнеса. Вместо указания в разметке LocalBusiness (в строке «@type»: «LocalBusiness» ), используйте вид деятельности из приведенного списка. Например для стоматологической клиники — используем Dentist в строке «@type»: «Dentist»

Абсолютно все ключи и значения в формате JSON-LD чувствительны к регистру.

Шаг 1 - определитесь с видом деятельности компании

Используйте приведенную выше электронную таблицу, чтобы определить, какой тип схемы описывает ваш бизнес наиболее точно. Это будет использовано вместо общей схемы «LocalBusiness». Вы можете одновременно выбрать несколько видов вашей деятельности.

Шаг 2 - настройка и добавление кода

Настройте базовый пример (см ниже), добавляя собственную информации, включая вид деятельности, выбранный на шаге 1. После этого разместите код в любом месте шаблона вашего сайта. Вы можете вставить его не только в хедер или футер, но и, наприимер, в боковой виджет вашего сайта.

Абсолютно неважно, помещаете ли вы его в раздел или, у Google не будет проблем с чтением кода. Поскольку JSON-LD является форматом связывания данных, на сервер не поступает никаких дополнительных запросов, поэтому не имеет значения, загружен ли сценарий в верхней или нижней части страницы.

Итак, измените ваш вид деятельности:

"@type": "LocalBusiness",

Например на такие виды деятельности:

"@type": "HVACBusiness",
"@type": "Attorney",
"@type": "Physician",
"@type": "RealEstateAgent",
"@type": "Dentist",

Настройте географические координаты офиса / магазина /представительства компании. Для этого можно поискать вашу компанию на Google Maps или посмотреть вот здесь: http://www.latlong.net/

Получение координат компании
"latitude": "40.75",
"longitude": "73.98"

Добавьте URL сайта:

"url": "http://www.example.com",

Добавьте логотип:

"logo": "http://www.example.com/images/logo.png",

Добавить адрес электронной почты и контактную информацию:

"email":"mailto:you@example.com",

Укажите социальные профили компании:

В настоящее время Google поддерживает Facebook, Twitter, Google+, Instagram, YouTube, LinkedIn и Myspace. Чтобы добавить новый профиль, поместите URL в кавычки и разделите запятой.

"sameAs" : [ "http://www.facebook.com/your-profile",
    "http://www.twitter.com/yourProfile",
    "http://plus.google.com/your_profile"]

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

Чтобы встроить ккарту — найдите вашу компанию (или адрес) на картах Google (1), нажмите на «меню» (2) в левом верхнем углу и выберите пункт «ссылка/код»

Встраивание карты Google Maps
"hasMap": "https://www.google.com/maps/place/Sushi+Imari/@33.664141,-117.879423,17z/data=!3m1!4b1!4m2!3m1!1s0x80dcdfaa9f9de2a5:0x48ad2abe6bb60a3b?hl=en",

Добавить общий рейтинг сайта:

"aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4",
    "reviewCount": "250"
 },

Добавить отзывы о сайте  +  общий рейтинг:

Чтобы добавить больше обзоров, просто скопируйте и вставьте элемент обзора и настройте общий рейтинг Count и ratingValues . Обратите внимание, что каждый обзор имеет 2 фигурных скобки и разделен запятой.

 <script type="application/ld+json">
	{
  	"@context": "http://schema.org",
  	"@type": "Dentist",    
  	"name": "Family Dentistry",
    "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4",
    "reviewCount": "2"
 	 },  	
    "review": [
    {
      "@type": "Review",
      "author": "Ellie",
      "datePublished": "2011-04-01",
      "description": "I'm not entirely upset with this office, but the staff at the front desk could have been nicer in letting me know they have nothing available for the next 2 months.",
      "name": "Good services, poor communication",
      "reviewRating": {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "3",
        "worstRating": "1"
      	}
    },
    {
      "@type": "Review",
      "author": "Lucas",
      "datePublished": "2011-03-25",
      "description": "I was finally able to get my old crown replaced with a new, porcelain one at a cost that doesn't break the bank.",
      "name": "Affordable Crowns",
      "reviewRating": {
        "@type": "Rating",
        "bestRating": "5",
        "ratingValue": "5",
        "worstRating": "1"
      }
    }
  ]
}
</script>

Шаг 3 - проверьте свой код

После того, как вы написали код, проверьте его инструментом Structured Data Testing Tool или Валидатором микроразметок. Ссылки на инструменты приведены выше.

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

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

Ниже приведен расширенный JSON-LD код для региональной (местной) компании.

 <script type="application/ld+json">
	{
  	"@context": "http://schema.org",
  	"@type": "LocalBusiness",
	"additionalType": "http://www.productontology.org/id/Genes_Donuts",
	"url": "http://example.com/",
	"logo": "http://www.example.com/images/logo.png",
	"hasMap": "https://www.google.com/maps/place/link-to-your-business",
	"email": "mailto:you@example.com",
  	"address": {
    	"@type": "PostalAddress",
    	"addressLocality": "Irvine",
    	"addressRegion": "CA",
    	"postalCode":"92618",
    	"streetAddress": "123 Happy Lane"
  	},
  	"description": "This is your business description.",
  	"name": "Gene’s Delicious Donuts",
  	"telephone": "555-111-2345",
  	"openingHours": "Mo,Tu,We,Th,Fr 09:00-17:00",
  	"geo": {
    	"@type": "GeoCoordinates",
   	"latitude": "40.75",
    	"longitude": "73.98"
 		}, 			
  	"sameAs" : [ "http://www.facebook.com/your-profile",
    	"http://www.twitter.com/yourProfile",
    	"http://plus.google.com/your_profile"]
	}
</script>

Если у вас мало или вообще нет опыта веб-разработки, легко допустить ошибку при попытке настроить примеры кода своими данными. Вот несколько советов по работе с кодом:

  • Объект JSON — набор пар ключ-значение (0 или больше), разделенных запятыми, заключенный в фигурные скобки. В отличие от JSON, в объектах JSON-LD имена ключей в одном и том же объекте не должны повторяться.
  • Массив — набор значений, разделенных запятыми, заключенный в квадратные скобки. В отличие от JSON, массив не считается упорядоченным, если это не указано особо.
  • Строка — набор символов Unicode, заключенных в двойные кавычки. При необходимости символы можно указывать с помощью обратных слэшей (\).
  • Число — используется как и в большинстве языков программирования, но при этом не поддерживаются восьмеричное и шестнадцатеричное представления, а также запрещены нули в начале числа.
  • true и false — бинарные значения, которые можно использовать для ключей только с двумя вариантами значений (например, прямой перелет или с пересадками, зарегистрирован пассажир или нет, и т. п.).
  • null — отсутствующее значение. Обычно используется для очистки данных. Если null указан как значение ключа @value, @list, или @set внутри JSON-объекта, этот объект полностью игнорируется.
  • Каждый элемент объявляется в кавычках:
    "logo":
  • Каждый тип элемента объявляется в следующем формате:
    "@type":
  • Сложные записи, такие как значения в адресе, всегда будут помещаться в фигурные скобки:
    "address": {значения адреса}
  • Каждый элемент разделяется запятой
    "addressLocality": "Irvine" , " addressRegion": "CA"
  • Повторяющиеся свойства или ссылки в социальных сетях (свойство sameAs), помещаются в скобки [ ].
  • Не используйте Microsoft Word для форматирования кода, так как это приведет к ошибкам форматирования.

Руководство по разметке JSON-LD

Прежде чем вы приступите к созданию описание вашей компании в Json-LD, и будете использовать данные, которые отсутсвуют на сайте — помните: Google абсолютно не понимает шуток со спамом в расширенных сниппетах (Rich Snippet). Вы подвергаете себя опасности словить алгоритмический или ручной штраф от ассесоров.

Это, прежде всего, относится к рейтингам и отзывам о компании. Если вы их добавили в разметку Json-LD, то они где-то должны визуально присутствовать на сайте, должна быть какая-то система рейтинга и пр. В целом все данные разметки не должны обманывать или вводить в заблуждение посетителей сайта.

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

Несколько часто задаваемых вопросов и ответов о работе JSON-LD:

Могу ли я включить данные, которые не отображаются на моем веб-сайте?

Нет, однако есть некоторые исключения. Обычно Google не отображает данные, которые явно не отображаются на вашей странице. Фактически, это противоречит их рекомендациям.

Расширенные сниппеты не появляются, как это получилось?

Google не гарантирует, что ваши Rich Snippet будут отображаться.

Как я могу изменить время работы компании в разные дни недели?

Если у вашей компании разные часы работы в разные дни недели, то вы можете указать несколько значений переменной в скобках. Вот краткий пример компании, которая работает большую часть недели с 9 до 17 часов,а в пятницу работает до 12-00.

"openingHours": [ "Mo-Th 09:00-17:00", "Fr 09:00-12:00" ],

Могу ли я использовать этот код в WordPress или иной CMS?

Да, код будет работать где угодно.

Оказывает ли JSON-LD влияние на скорость работы сайта

Нет. В отличие от javascript нет задержки на загрузку скрипта с внешнего источника и его работу. Это означает, что вы можете разместить код в любом месте сайта, не беспокоясь о замедлении загрузки. Код немного увеличит размер HTML-контента, но это несущественно.

Источник: Whitespark

1

Об авторе:

DrMax. Занимаюсь аудитами, оценкой качества YMYL проектов и SEO сайтов более 20 лет. В настоящее время провожу аудиты и реанимирую трафик сайтов, восстанавливаю позиции в органической выдаче сайтов, помогаю снять алгоритмические и ручные штрафы Google. В портфолио - продвижение несколько десятков проектов как региональных частников, так и крупнейших мировых компаний. Владелец SEO блога Drmax.su. Автор 22 книг по продвижению и аудиту сайтов.
  Посмотрите еще

Комментарии

  1. Руслан  17 ноября, 2020

    Здравствуйте! А как разметить таблицу с помощью JSON-LD ?

    ответ

Добавить комментарий