Як додати структуровані дані в WordPress (без плагінів)

Відображення сторінок вашого сайту в результатах пошуку в пошукових системах (SERP) має дуже важливий вплив на обсяг органічного трафіку. Якщо в результатах пошуку ваш сайт не «чіпляє» користувачів, вони його проігнорують і, не замислюючись, підуть «серфити» далі. З іншого боку, «чіпляюче» відображення вашого сайту в пошуку допоможе збільшити органічний трафік на сайт.

Як домогтися «зачіпляючого» відображення сайту в результатах пошуку? Досить просто, наприклад, з допомогою розмітки схеми (Schema Markup, або структурованих даних). Розмітка схеми може підвищити ефективність вашого SEO-просування, надаючи додаткові дані пошуковим системам, допомагаючи їм краще зрозуміти контент вашого сайту, включаючи можливість потрапляння на Панель знань Google. В сьогоднішній статті ми поговоримо про те, що таке розмітка схеми (структуровані дані), покажемо вам деякі переваги та наведемо кілька прикладів того, як вона працює. Також ми навчимо вас практичного способу додавання розмітки схеми для сайтів на WordPress.

 

 

Що таке розмітка схеми (Schema Markup)?

Розмітка схеми – це свого роду метадані (ще вони називаються мікродані), які при додаванні на ваш сайт дають пошуковим системам більше інформації про те, що відбувається на сторінці. Використовуючи розмітку схеми, ви перетворюєте звичайні метаописи в розширені сніпети. Розширені сніпети – це результати пошуку, які завдяки додатковій цінній інформації виглядають більш привабливо для користувачів. Ця додаткова (і цінна) інформація береться з розмітки схеми (структурованих даних), яка є на сторінці. Поряд з розширеними сніпетами, дуже ефективна Панель знань Google: поля з додатковою інформацією при пошуку в Google об’єктів (людей, місць, організацій, речей). Вони дають користувачеві короткий огляд певної теми на основі обробленого Google наявного в Інтернеті контенту.

Раніше, для того, щоб повідомити пошуковим системам те, про що сайт, використовувалися тільки теги заголовків (title), метаопису (description) і ключові слова (keywords). Але це не давало пошуковим системам всієї інформації, яка потрібна для повного розуміння того, про що ваш сайт і кому він може сподобатися. І ось тут з’явилася розмітка схеми (структуровані дані). Розмітка схеми додається в HTML-код сторінок вашого сайту. Вона призначає окремим елементам додаткові властивості.

Розглянемо, для прикладу, мікророзмітку для телесеріалу. HTML-код мікророзмітки (Microdata) може виглядати наступним чином:

<div itemscope itemtype="https://schema.org/TVSeries">
 <div itemprop="name">Серіал Друзі</div>
 <div itemprop="character" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Рейчел Карен Грін</span>
 </div>
 <div itemprop="actor" itemscope itemtype="https://schema.org/Person">
  <span itemprop="name">Дженіфер Еністон</span>
 </div>
 <div itemprop="trailer" itemscope itemtype="https://schema.org/VideoObject">
  <meta itemprop="name" content="Серіал Друзі — Хто така Рейчел Карен Грін?">
  <a itemprop="url" href="https://sebweo.com/serial-druzi-hto-taka-rejchel-karen-grin/">Серіал Друзі — Хто така Рейчел Карен Грін?</a>
  <meta itemprop="thumbnailUrl" content="https://sebweo.com/wp-content/uploads/2020/03/serial-druzi__hto-taka-Reychel-Karen-Grin_poster_ua.jpg">
  <span itemprop="description">Сьогоднішній огляд присвячений Рейчел Грін, головній героїні чудового серіалу Друзі. Отже, давайте дізнаємось про те, хто така Рейчел Грін.</span>
  <meta itemprop="uploadDate" content="2020-03-25">
  <meta itemprop="embedUrl" content="https://youtu.be/_rMsnCmrWmg">
 </div>
</div>

 

 

В результатах інструменту Google Тестування структурованих даних цей код буде розпізнано наступним чином:

 

 

Якщо вам зручніше використовувати JavaScript, тоді використовуйте формат JSON-LD (JavaScript Object Notation for Linked Data). Синтаксис буде приблизно наступний (з використанням попереднього прикладу):

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "TVSeries",
 "name": "Серіал Друзі",
 "character": {
  "@type": "Person",
  "name": "Рейчел Карен Грін"
 },
 "actor": {
  "@type": "Person",
  "name": "Дженіфер Еністон"
 },
 "trailer": {
  "@type": "VideoObject",
  "name": "Серіал Друзі — Хто така Рейчел Карен Грін?",
  "url": "https://sebweo.com/serial-druzi-hto-taka-rejchel-karen-grin/",
  "thumbnailUrl": "https://sebweo.com/wp-content/uploads/2020/03/serial-druzi__hto-taka-Reychel-Karen-Grin_poster_ua.jpg",
  "description": "Сьогоднішній огляд присвячений Рейчел Грін, головній героїні чудового серіалу Друзі. Отже, давайте дізнаємось про те, хто така Рейчел Грін.",
  "uploadDate": "2020-03-25",
  "embedUrl": "https://youtu.be/_rMsnCmrWmg"
 }
}
</script>

 

Результати Тестування структурованих даних Google будуть такими ж, як і в попередньому прикладі.

 

Створення розширених фрагментів для сторінок вашого сайту може здатися складним завданням, але цим варто займатися, враховуючи додаткову користь для SEO-просування. По-перше, розширені сніпети візуально виділяють ваші сторінки в результатах пошуку. По-друге, існує більше 800 типів розмітки схеми, тому з великою часткою ймовірності ви знайдете відповідну розмітку і під свій контент.

 

 

Які бувають типи розмітки схеми

Тепер ви знаєте, чому слід використовувати розмітку схеми на своєму сайті. А зараз давайте коротко розглянемо, які типи даних підтримуються.

На сайті schema.org є повний список типів даних, серед яких найбільш часто використовуються наступні:

• Творчі роботи: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries та ін.
• Вбудовані нетекстові об’єкти: AudioObject, ImageObject, VideoObject.
• Захід.
• Організація.
• Персоналії.
• Місце, місцевий бізнес, ресторан і багато іншого.
• Продукт (товар), пропозиція, Сукупна пропозиція.
• Огляд, Сукупний рейтинг.

 

Це лише невелика частина доступних типів даних, і весь час додаються нові. Наприклад, з врахуванням недавніх подій, пов’язаних з коронавірусом, Schema.org тепер також включає схеми для спеціальних оголошень, засоби тестування Covid-19 і багато іншого.

 

 

Онлайн-генератори мікророзмітки Microdata і JSON-LD

Якщо ви не знайомі з JSON, JavaScript або HTML, вам може бути складно створювати фрагменти, які містять метадані. На щастя, в мережі Інтернет є досить багато інструментів-генераторів, які ви можете використовувати для створення фрагментів схеми Microdata або JSON-LD для свого сайту. Одним із прикладів таких онлайн-сервісів може служити Webcode.tools, який має в своєму розпорядженні комплексний інструмент для генерації багатьох різних типів контенту і розмітки схеми.

 

 

Як додати розмітку схеми в WordPress (без плагінів)

Тепер, коли ви знаєте, як виглядає розмітка схеми, вам може бути цікаво, як вбудувати її на свій сайт WordPress. Щоб використовувати розмітку схеми в сайті на WordPress, ви можете використовувати відповідний плагін або зробити це вручну. Сьогодні ми розглянемо тільки ручний спосіб додавання розмітки схеми в сайт на ВордПрес.

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

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

Більш простий спосіб – це відредагувати файли своєї теми.

Так, наприклад, якщо ваша тема містить файл single.php, який виводить контент окремих постів, з приблизно таким кодом:

<div id="primary" class="content-area">
 <main id="main" class="site-main">
 <?php while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>" class="post single">
   <?php if(has_post_thumbnail()) { ?>
   <div class="post-image">
    <?php the_post_thumbnail(); ?>
   </div>
  <?php } ?>
  <h1 class="post-title"><?php the_title(); ?></h1>
  <div class="container">
    <div class="post-content">
     <?php the_content(); ?>
    </div>
   </div>
  </article>
 <?php endwhile; ?>
 </main>
</div>

 

 

Ви можете відредагувати цей код, щоб включити розмітку схеми, наприклад таким чином:

<div id="primary" class="content-area">
 <main id="main" class="site-main">
 <?php while ( have_posts() ) : the_post(); ?>
  <article itemscope itemtype="https://schema.org/Article" id="post-<?php the_ID(); ?>" class="post single">
   <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <meta itemprop="name" content="Автор">
    <span itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
     <img itemprop="url image" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" />
    </span>
   </div>
   <meta itemprop="mainEntityOfPage" content="<?php the_permalink(); ?>">
   <?php if(has_post_thumbnail()) { ?>
   <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject" class="post-image">
    <img itemprop="url" src="<?php the_post_thumbnail_url(); ?>" />
   </div>
   <?php } ?>
   <h1 itemprop="name headline" class="post-title"><?php the_title(); ?></h1>
   <div class="container">
    <div itemprop="articleBody" class="post-content">
     <?php the_content(); ?>
    </div>
    <ul class="post-meta">
     <li itemprop="datePublished" content="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date('Y-m-d'); ?></li>
     <li itemprop="dateModified" content="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date('Y-m-d'); ?></li>
     <li itemprop="author">Автор</li>
    </ul>
   </div>
  </article>
 <?php endwhile; ?>
 </main>
</div>

 

 

Як протестувати правильність доданої розмітки схеми?

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

Врахуйте, що скоро цей інструмент буде закритий, а замість нього ви можете використовувати новий інструмент Перевірка розширених результатів. Відкрийте доступний вам інструмент в браузері і введіть URL-адресу свого сайту (або ж певний фрагмент коду).

Інструмент тестування Google покаже, які аспекти розмітки схеми присутні на вашому сайті, та чи є помилки.

 

 

 

Короткий підсумок

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

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

Дякуємо, що читаєте нас!