Як використовувати Rich Snippets у WordPress

522

Розширені сніппети в WordPress – керівництво для початківців

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

Чому Ви повинні використовувати розширені описи веб-сторінок на Вашому сайті WordPress?

Rich Snippet (багатий фрагмент) надає власникам сайтів ще один спосіб спілкування з пошуковими системами. Структуровані дані дозволяють пошуковим системам побачити різні типи контенту на вашому сайті і використовувати їх для побудови розширених описів веб-сторінок, які відображаються в якості додаткової інформації в результатах пошуку (рис.1).

Рецепт в результатах поиска с расширенным сниппетом

рис.1

Такого роду додаткова інформація в пошуковій видачі зробить ваше оголошення більш помітним в пошуку, а значить ви отримаєте більше органічного трафіку на ваш сайт. Це також допоможе вам отримати і підняти авторитет у вашій ніші, так як ваш сайт стає більш помітним в пошуку.
Розширені описи веб-сторінок застосовуються не тільки для відгуків чи рецептів. Ви можете використовувати розширені описи подій, продуктів, людей, відео, музики, додатків, статей, блог постів і т. д.
Тепер, коли ви знаєте, як благотворно впливають на сайт розширені сніппети, пропоную розглянути кілька способів, як додати багаті текстові фрагменти в WordPress. Я покажу два способи: додавання Rich Snippets в WordPress вручну, а також використовуючи WordPress плагін.

Додавання розширених фрагментів в WordPress за допомогою плагіна

Підтримка розширених описів веб-сторінок вручну може виявитися складним завданням навіть для досвідчених власників сайтів. На щастя, є кілька плагінів для WordPress, які полегшать цю задачу для вас, і майже автоматично додадуть розширені описи веб-сторінок в ваш блог WordPress.
Перше, що вам потрібно зробити, це встановити і активувати плагін All In One Schema.org Rich Snippets. Після установки і активації просто натисніть на кнопку розширені описи веб-сторінок (пункт меню в бічній панелі), щоб продовжити (рис.2).

All in One Schema.org поддерживаемые типы содержимого

рис.2

Ви зможете побачити різні типи Контенту, які ви можете створити за допомогою плагіна. Список включає в себе:

  • Item Review (Огляд)
  • Events (Події)
  • Person (Осіб)
  • Product (Продукт, товар)
  • Recipe (Рецепт)
  • SoftwareApp (Додаток, програма, гра)
  • Video (Відео)
  • Article (Стаття)

Рекомендую до прочитання: Google Мій бізнес – створення сторінки

При натисканні на будь-який тип контенту, плагін покаже вам поля, які будуть доступні при написанні поста/сторінки або запису. Тепер вам потрібно створити новий пост або відредагувати існуючий. Трохи нижче посту, в редакторі з’явиться новий чекбокс для налаштування Rich Snippets (рис.3). Всередині, ви побачите випадаюче меню, де можна вибрати тип вмісту для конкретної статті з якою ви працюєте.

Выбор типа содержимого для добавления расширенных сниппетов в WordPress

рис.3

Будь-який вибір типу вмісту буде відображати розширене опис полів, які потрібно заповнювати. На (рис.4) нижче, я вибрав вміст статті і плагін показав наступні пункти, які потребують заповнення:

  • назва статті,
  • автор,
  • короткий опис статті,
  • зображення

Rich snippets for article content type

рис.4

Ви можете як завгодно змінювати рецепти, події або будь-який інший тип змісту, який створюєте, а потім заповнити поля для розширеного опису. Ви не зобов’язані заповнювати всі поля, але деякі з полів є обов’язковими з погляду Google, для правильного відображення rich snippets. Після цього не забудьте зберегти свій пост, щоб зберегти розширені фрагменти.

Додавання Rich Snippets вручну в WordPress

Багаті фрагменти або структурування розмітка даних можуть бути записані з трьох різних словників, таких як:

  • microdata,
  • RDFa,
  • і JSON-LD.

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

Микроразметка для
PHP
John Smith
Photo of John Smith
Support Technician
342 Acme Inc.
101 Washington Avenue
Eagleton IN 98052
(425) 123-4567
[email protected]
Website:
example.com

1
2
3
4
5
6
7
8
9
10
John Smith
Photo of John Smith
Support Technician
342 Acme Inc.
101 Washington Avenue
Eagleton IN 98052
(425) 123-4567
[email protected]
Website:
example.com

Але його можна легко перетворити для отримання розширеного фрагменту. Якщо ви знайомі з HTML, то ви можете легко зрозуміти наступний приклад:

John Smith
Photo of John Smith
Support Technician
342 Acme Inc.
101 Washington Avenue
Eagleton,
IN
46818
(425) 123-4567
[email protected]
Website
example.com

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
John Smith
Photo of John Smith
Support Technician


342 Acme Inc.
101 Washington Avenue

Eagleton,
IN
46818

(425) 123-4567
[email protected]
Website
example.com

Для кожного типу вмісту є деякі особливі властивості, які повинні бути визначені і вказані на сайті в обов’язковому порядку. Schema.org це організація, яка допомагає визначати і застосовувати мікророзмітку для різних типів контенту. На їх сайті ви знайдете документацію з прикладами для кожного типу вмісту, розміщеного на вашому сайті. Ось ще один приклад рецепту “правильно розміченого”, з багатими фрагментами.

Рекомендую до прочитання: Розширений сніппет Google

Mom’s World Famous Banana Bread
By John Smith,
Banana bread on a plate
This classic banana bread recipe comes
from my mom — the walnuts add a nice texture and flavor to the banana
bread.
Prep Time: 15 minutes
Cook time: 1 hour
Yield: 1 loaf
Ingredients:
– 3 or 4 ripe bananas, smashed
– 1 egg
– 3/4 cup of sugar

Instructions:
Preheat the oven to 350 градусів. Mix in the ingredients in a bowl. Add
the flour last. Pour the mixture into a loaf pan and bake for one hour.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Mom’s World Famous Banana Bread
By John Smith,
Banana bread on a plate
This classic banana bread recipe comes
from my mom — the walnuts add a nice texture and flavor to the banana
bread.

Prep Time: 15 minutes
Cook time: 1 hour
Yield: 1 loaf
Ingredients:
3 or 4 ripe bananas, smashed
1 egg
3/4 cup of sugar

Instructions:

Preheat the oven to 350 градусів. Mix in the ingredients in a bowl. Add
the flour last. Pour the mixture into a loaf pan and bake for one hour.

Якщо ви вирішили вручну додавати розширені сніппети у ваших постах WordPress, то вам потрібно буде використовувати редактор тексту, типу Notepad++, щоб можна було наочно бачити размечаемые дані. Вам також може знадобитися звернутися до компанії Google, точніше до їх сервісу “Майстер розмітки структурованих даних“, щоб зрозуміти, які властивості необхідні для вашого типу контенту. Як і де їх розмічати.

Рекомендую до прочитання: Основи HTML (частина 3)

Тестування ваших Rich Snippets

Google та інші пошукові системи можуть не відразу проіндексувати ваші розмічені дані і показати в пошуковій видачі багаті фрагменти. Як же дізнатися, що ви правильно все розмітили на вашому сайті? Для цього потрібно відвідати майстер перевірки структурованих даних інструменту тестування Google. Ви можете або вставити розмітку в панелі інструментів у вигляді коду, або натиснути на посилання “Отримати дані по URL” і ввести URL-адресу. Далі натисніть на кнопку Підтвердити і інструмент розгляне вашу розмітку (рис.5).

Testing your rich snippet markup

рис.5

Ось в принципі і все, як ви бачите, абсолютно нічого складного, а користі “вище даху”. Сподіваюся, що ця стаття допомогла вам дізнатися, як правильно застосовувати микророзметку даних на своєму сайті WordPress для отримання розширених фрагментів.

Попередня статтяКлуні пояснив, чому його бетмен не з’явиться у “флеші” , і соски тут ні при чому
Наступна стаття“виглядає фантастично”: ветеран bungie взяв участь у тестуванні halo infinite для xbox series x / s