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

Плюси – Приймає незрозумілі дані і відображає гарні розширені сніппети;
Мінуси– Іноді це величезний безлад! Досить часто це відбувається з розміткою Microdata. Потрібно витрачати багато часу на її форматування, щоб вона виглядала достойно на сайті клієнта.

Що таке Microdata?

Microdata – специфікація HTML, форма семантичної розмітки, яка використовується для кодування даних через словники, такі як schema.org, і це відмінний спосіб для передачі метаданих пошуковим системам. Пошукові системи, такі як Google і Bing, використовують цю розмітку для отримання інформації з веб-сторінок. Специфікація часто використовується для створення більш “багатшого” досвіду для веб-користувачів за допомогою яскравих розширених сніппетів та інтерактивних елементів.

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

<div itemscope="" itemtype="http://schema.org/LocalBusiness">
	<span itemprop="name">Smachni Bulochki</span><br>
	<link itemprop="url" href="http://www.example.com">
	<span itemprop="address" itemscope="" 
itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">Prorizna 8</span><br>
		<span itemprop="addressLocality">Kyiv</span>, 
                 <span itemprop="addressRegion">KA</span> 
		<span itemprop="postalCode">01001</span>
	</span><br>	
<a itemprop="telephone" href="tel:+380123123121">(012)312 31 12 </a><br>
<span itemprop="faxNumber">(012)312 31 12</span><br>
<span itemprop="email">you@site.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, що витягує інформацію з Microdata:

Приклад розмітки SCHEMA

Труднощі з мікроданими

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

Що таке JSON-LD?

JSON-LD – це формат розмітки посилань даних, який дозволяє легко вставляти дані в тег сценарію. На відміну від Microdata, дані JSON-LD працюють у фоновому режимі, так би мовити. Немає необхідності налаштувати фактичні елементи HTML, що створює набагато сприятливіші умови для спеціалістів з маркетингу. За допомогою скриптів не потрібно турбуватися про відсутність проміжку відкриття чи закриття div – все просто працює. JSON-LD – швидший, більш чистий, більш простий рушій для Schema. Пошукові машини люблять це, оскільки вони можуть легко сканувати код, щоб швидше зрозуміти дані.

Переваги використання JSON-LD

Вкладені значення – дозволяє відображати складну інформацію в легко зрозумілій формі.
Змінна на основі змін – для виділення нового елемента просто додайте змінну.
Заощаджує багато часу – візуальну розмітку легко зламати і важко усунути неполадку, якщо у вас нема досвіду роботи з візуальними редакторами.
Легко помітити відгуки – зберігайте стиль у своїх поточних відгуках без необхідності внесення змін у файл CSS.

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

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

  • Назва компанії
  • Адреса
  • Номер телефону
  • Адреса електронної пошти
  • Робочий час
  • Інформація про географію (координати та карта)
  • Відгуки
  • Логотип
  • Опис бізнесу
  • Соціальні посилання профілю через властивість sameAs.
  • Назва сайту

Додаткові корисні локальні типи розмітки включають:

  • Продукти
  • Медіа (зображення та відео)
  • Події
  • Корпоративні контакти
  • Поле пошуку посилань на сайт

Приклад основної розмітки Schema.org із використанням JSON-LD для місцевого бізнесу

У цьому базовому прикладі LocalBusiness ми включаємо тип бізнесу, PostalAddress, опис, назва компанії, телефон, години роботи, географічні координати та посилання на соціальні профілі:

<script type="application/ld+json">
	{
  	"@context": "http://schema.org",
  	"@type": "LocalBusiness",
  	"address": {
    "@type": "PostalAddress",
    "addressLocality": "Kyiv",
    "addressRegion": "KA",
    "postalCode":"01001",
    "streetAddress": "Prorizna 8"
  	},
  	"description": "Опис бізнесу",
  	"name": "Smachni Bulochki",
  	"telephone": "093-111-55-55",
  	"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 для місцевого бізнесу

Застереження: Ця стаття призначена для того, щоб показати вам, суб’єктивне впровадження схеми в проекти по локальному бізнесу, надіємось ця інформація буде вам корисною. Будь ласка, уважно прочитайте всі інструкції Google, перш ніж застосовувати аналогічний код. Не забувайте протестувати, протестувати і ще раз протестувати!

Варто також навести декілька корисних посилань та інструментів:

  • Інструмент тестування структурованих даних – власний інструмент Google для вирішення проблем із кодом розмітки. Використовуйте його, щоб перевірити свій код, перш ніж публікувати його на своєму веб-сайті. Це значно допоможе вам оптимізувати веб-сторінку для кращого відображення під час локального ранжування.
  • Таблиця типів розмітки – ресурс, яким поділились Філ Рожек та Девід Дерінг, який допоможе вам покращити вашу розмітку. Замість того, щоб вказати LocalBusiness, скористайтеся цією таблицею, щоб знайти тип розмітки, щоб замінити рядок “@type”: “LocalBusiness”. Не впевнений, як вибрати правильний тип? Не хвилюйтеся, Філ і Давид написали мануал, щоб допомогти вам справитись з цим завданням.
  • Приклади структурованих даних Google – цей ресурс містить багато пояснень та прикладів типів даних, доступних для розмітки.
  • Інструменти Google Webmaster – правильно вбудований код буде просканувати і відображатися на інформаційній панелі GWT. Аарон Бредлі, автор SEOSkeptic підтвердив, що GWT розуміє JSON-LD. Цей розділ можна знайти в GWT у розділі “Вигляд пошуку”> “Структуровані дані”.
  • Перелік інструментів візуалізації, перевірки та тестування розмітки структурованих даних також може бути корисним.

Крок 1. Визначте тип вашої схеми

Список типів локального бізнесу

Використовуйте зручну електронну таблицю Phil і David, щоб визначити, який тип схеми найбільш точно описує ваш бізнес – замість використання загальної схеми “LocalBusiness”.

Крок 2. Налаштування та додавання коду

Налаштуйте наш основний приклад (нижче) своєю власною інформацією, включаючи тип схеми, вибраний на кроці 1, потім додайте код будь-де на ваш веб-сайт. Неважливо, якщо ви розмістите його в розділі <head> або <body>, Google не буде проблем з читанням коду. Оскільки JSON-LD – це формат з’єднання даних, на сервері немає додаткових запитів, тому неважливо, чи завантажений скрипт у верхній або нижній частині сторінки, – ніякого зворотного відтворення взагалі немає.

Налаштуйте тип схеми:

"@type": "LocalBusiness",

Наприклад, ваш @type можна прочитати:

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

Налаштуйте геокоординати:

Щоб знайти географічні координати свого бізнесу, знайдіть свій бізнес на Картах Google і перегляньте URL-адресу, щоб знайти широту та довготу. Крім того, ви можете використовувати http://www.latlong.net/ для пошуку своєї ділової адреси:

Геокординати локального бізнесу

Додайте URL:

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

Додайте Logo:

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

Додайте e-mail:

"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"]

Посилання на карту:

"hasMap": "https://www.google.com/maps/place/Sushi+Imari/@33.664141,-11
7.879423,17z/data=!3m1!4b1!4m2!3m1!1s0x80dcdfaa9f9de2a5:0x48ad2abe6bb60a3b
?hl=en",

Щоб отримати посилання на вашу карту, знайдіть свій бізнес на Картах Google, Натисніть на кнопку Поділитись > Надіслати або Вставити карту.

Кнопка поділитись картоюКопіювати та вставити Карту GoogleВключити додатковий тип:

Як необов’язковий крок для тих, хто хотів би включити значення продукту в онтологію продукту в свій код, додайте додатковий тип так:

"additionalType": "http://www.productontology.org/id/Personal_injury_lawyer",

Додати загальний рейтинг:

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

Включити відгуки з загальним рейтингом:

Щоб додати інші відгуки, просто скопіюйте та вставте елемент огляду та налаштуйте сукупний огляд Count and RatingValues. Зауважте, що кожен огляд має два фігурні дужки та розділені комою.

<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. Перевірте свій код

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

Зелена галочка та текст “Все добре” відображатимуться, якщо в коді немає помилок. Якщо з якихось причин ви помітили помилку, уважно перевірте синтаксис, переконайтесь, що ви не пропустили кому, фігурну дужку або лапки.
Дані на скріншоті взяті з веб-сайту HVAC local business: www.santabarbarahvaccontractor.com

Результати тестування структурованих даних

Розширені властивості Приклад JSON-LD для місцевого бізнесу

Додаємо до нашого основного прикладу адресу електронної пошти, addtionalType, hasMap, URL-адресу веб-сайту та посилання на зображення логотипу:

<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>

Кілька порад, щоб уникнути помилок

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

  1. Кожен товар оголошується в лапках: “phone”:
  2. Кожен тип елемента оголошується у такому форматі: “@type”:
  3. Комбіновані записи, такі як значення в адресі, завжди будуть розміщені в фігурних дужках: “адреса”: {значення адреси}
  4. Кожен елемент розділений комою “addressLocality”: “Ірвін”, “addressRegion”: “CA”
  5. Повторні властивості, такі як openningHours або посилання на соціальні медіа (властивість sameAs), містяться у дужках [].
  6. Не використовуйте Microsoft Word для форматування коду, оскільки це спричинить помилки форматування. Краще використовувати Блокнот або внесення змін в сервісі Тестування Структурованих даних Google.

Рекомендації щодо розмітки JSON-LD

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

Короткий посібник щодо розмітки місцевого бізнесу

    • Дані не повинні обманювати чи вводити в оману користувачів.
    • Використовуйте лише найбільш специфічні типи та назви властивостей, визначені schema.org.
    • Відмічений вміст повинен бути видимим на сторінці, де доданий скрипт.

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

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

F.A.Q.

Кілька часто задаваних питань та відповідей щодо схеми впровадження розмітки за допомогою JSON-LD:

  • Чи можу я включити дані, які не відображаються на моєму веб-сайті?
    Ні, однак є деякі винятки. Google зазвичай не покаже дані, які на вашій сторінці не відображаються. Фактично, це суперечить їх керівництву.
  • Розширені сніппети для мого веб-сайту не відображаються під час пошуку, що робити в цьому випадку?
    Google не гарантує, що ваші розширені сніппети відображатимуться.
  • Чи можу я використовувати наведені тут приклади коду розмітки в футері мого веб-сайту?
    Так, тільки не забудьте вказати свої значення, і переконайтесь, що кожен елемент насправді візуально присутній. Чи містить футер всю інформацію? Чи коректно вказаний шлях до логотипу?
  • Як я можу коригувати години роботи за допомогою розмітки?
    Якщо ваш бізнес має різні години робити в різні дні, ви можете вказати кілька відкритих годин на окремій лінії в квадратних дужках. Короткий огляд openHours див. У специфікації schema.org. Ось короткий приклад, коли бізнес відкривається більшу частину тижня з 9 до 5, але працює лише половину дня в п’ятницю:

    "openingHours": [ "Mo-Th 09:00-17:00", "Fr 09:00-12:00" ],
  • Чи можу я скористатися цим кодом у WordPress чи іншій системі керування контентом?
    Так, цей сценарій працює скрізь. Щоб вставити код на весь сайт (для відображення на всіх сторінках), додайте його до розділу власних скриптів у Налаштуваннях (деякі теми можуть не підтримувати власні скрипти). Якщо ваша тема не має області скриптів, знайдіть файл header.php або footer.php та вставте його там.
  • Чи робить JSON-LD затримка CSS рендерингу?
    На відміну від javascript немає затримки рендерингу з форматом з’єднання даних. Це означає, що ви можете розмістити код де завгодно, не турбуючись про повільне завантаження сторінки. Код збільшить розмір HTML-вмісту, але не значно, коли мова йде про час завантаження сторінки.

СТАТТІ ПО ТЕМІБІЛЬШЕ ВІД АВТОРА