Ви робите мікророзмітку schema.org одну за іншою і хочете, щоб був більш простий спосіб її реалізації? Вам набридло використовувати плагіни, які створюють одну й ту саму мікророзмітку на кожній сторінці? Ви хочете, щоб кожна сторінка мала унікальну розмітку, але не знаєте, як автоматизувати цей процес? Бажаєте навчитися застосовувати структуровані дані в масштабі?
Якщо ви маєте великий сайт з тисячами сторінок, і ви хочете додати динамічну розмітку до всіх з них, ви потрапили за адресою! Розгляньмо, як їх можна адаптувати для кожної сторінки вашого сайту без необхідності ручного додавання. І як динамічно налаштовувати їх кожної сторінки, уникаючи трудомісткого ручного процесу. Попрощайтеся зі старим методом та привітайтесь з оптимізованим та ефективним процесом, який не тільки заощаджує ваш час, а й підвищує SEO-потенціал вашого сайту.
Проблема в тому, що ви хочете застосувати унікальні структуровані дані до всього сайту, але у вас велика кількість сторінок.
Рішення полягає в тому, щоб додати мікророзмітку до будь-якої кількості сторінок за допомогою всього одного фрагмента динамічного коду.
Ця стаття покаже вам, як створювати динамічну мікророзмітку schema.org та автоматизувати цей процес.
Встановіть необхідні інструменти
Почнемо з того, що встановимо потрібні інструменти.
Створіть обліковий запис у Менеджері тегів Google. Після створення облікового запису необхідно встановити наданий GTM код на всі сторінки вашого сайту.
Selector Gadget — це розширення Chrome з відкритим вихідним кодом, що спрощує створення та виявлення селекторів CSS на складних сайтах.
Тепер, коли всі необхідні інструменти готові, почнемо з визначення того, які типи мікророзмітки нам потрібні для опису нашої сторінки.
Визначте типи мікророзмітки, які ви хочете реалізувати, та їх необхідні властивості
При прийнятті рішення про тип мікророзмітки, ви повинні спочатку визначити контент на вашій сторінці.
- Визначте свій тип контенту. Це можуть бути статті, продукти, рецепти, події тощо.
- Перевірте Schema.org: знайдіть тип мікророзмітки, який найкраще відповідає вашому контенту. Наприклад, якщо ви продаєте книги, можна використовувати схему «Book».
- Перегляньте обов'язкові та рекомендовані властивості: наприклад, для схеми "Book" потрібні, такі як "ім'я" (назва книги), "автор", "приклад роботи" (конкретне видання книги), і рекомендуються такі властивості, як "isbn". , 'numberOfPages' і т. д. Ось список найбільш важливих типів мікророзмітки та їх обов'язкові та рекомендовані властивості.
Визначивши тип схеми, який ви бажаєте продати на вашому веб-сайті, наступним кроком буде створення відповідного шаблону мікророзмітки.
Створіть шаблон мікророзмітки
Шаблон мікророзмітки - це структурована модель даних, яку ви створюєте для представлення даних, які ви хочете розмітити на своєму сайті. Цей шаблон є схемою, яку можна багаторазово використовувати для подібних типів контенту, що спрощує і робить процес розмітки більш ефективним. Після того, як ви визначили, який тип схеми необхідний та її необхідні властивості:
- Перевірте шаблон на помилки. Використовуйте валідатор, щоб переконатися, що у шаблоні немає помилок.
- Перевірте шаблон на наявність обов'язкових та рекомендованих властивостей. Використовуйте інструмент перевірки структурованих даних Google, щоб переконатися, що ваш шаблон відповідає обов'язковим і рекомендованим властивостям для розширених результатів вибраних фрагментів.
Пам'ятайте, що кожен тип контенту матиме свою особливу мікророзмітку, тому вам може знадобитися створити кілька різних шаблонів, якщо ваш сайт містить різноманітний контент.
У цьому прикладі шаблон мікророзмітки визначає хлібні крихти (BreadcrumbList) з використанням JSON-LD. Він включає такі властивості: name і @id.
Приклад коду JSON_LD для BreadcrumbList:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "https://example.com/dresses",
"name": "Dresses"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "https://example.com/dresses/real",
"name": "Real Dresses"
}
}
]
}
</script>Після успішного створення шаблону мікророзмітки, наступним кроком є забезпечення того, щоб наша схема точно представляла вміст кожної сторінки. Для цього ми маємо ідентифікувати динамічний контент.
Визначте динамічний контент
Щоб визначити властивості, які ви бажаєте замінити динамічно, визначте елементи, які змінюються для кожного елемента. У цьому прикладі, якщо ви створюєте шаблон для хлібних крихт (схема BreadcrumbList), такі властивості, як @id і name, швидше за все, будуть різними для кожного елемента і тому повинні замінюватися динамічно.
Тепер, коли визначено динамічний вміст, ми повинні перетворити ці значення на змінні.
Перетворення значень на змінні
Вставка змінних для схеми у Менеджері тегів Google дозволяє використовувати динамічну та персоналізовану мікророзмітку для кожної сторінки. Змінні діють як заповнювачі даних, які динамічно вводяться в розмітку схеми.
Для цього замініть кожну динамічну властивість змінної з відповідним ім'ям. Виберіть імена змінних, які найкраще відповідають їхній функції або призначенню. Покладіть ці змінні на подвійні фігурні дужки, оскільки це стандартний синтаксис, який Менеджер тегів Google використовує для ідентифікації змінних.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "{{first_bread_crumb_url}}",
"name": "{{first_bread_crumb}}"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "{{second_bread_crumb_url}}",
"name": "{{second_bread_crumb}}"
}
}
]
}
</script>Зауважте, що рекомендується генерувати шаблон мікророзмітки BreadcrumbList на глибину найбільш вкладеного рівня сторінки. Це з тим, що за відсутності значення відповідний елемент списку буде автоматично видалено зі схеми. Це забезпечить роботу хлібних крихт на кожній сторінці.
Більше того, ці змінні визначаються користувачем, що означає, що я створюватиму їх за допомогою Менеджера тегів Google. Але перед цим ми повинні визначити селектори CSS за допомогою інструмента SelectorGadget.
Отримайте CSS селектори для цільових елементів
Після встановлення розширення SelectorGadget у браузері Chrome перейдіть на потрібну сторінку та запустіть його. У правому нижньому кутку сайту відчиниться вікно. Вибираємо перший елемент у BreadcrumbList, щоб зробити його динамічним. Як тільки це буде зроблено, зробимо той самий процес для другого елемента.
- Натисніть на елемент сторінки, якому повинен відповідати селектор (він стане зеленим). Потім SelectorGadget згенерує селектор CSS для цього елемента в нижній частині екрана та виділить (жовтим кольором) все, що відповідає селектору. У цьому випадку плагін підсвітить усі три елементи.
- Тепер, щоб вибрати лише один елемент, клацніть інший виділений елемент, щоб видалити його із селектора (червоний), або клацніть невиділений елемент, щоб додати його до селектора. Через цей процес вибору та відхилення SelectorGadget допоможе вам знайти ідеальний селектор CSS для ваших потреб. У нашому випадку мета полягає в тому, щоб виділити лише один елемент.
- Як тільки ви виділите один елемент, ви можете скопіювати вибраний код css з нижньої частини сторінки.
- Повторіть той самий процес для другого та третього елемента.
Створіть змінні в GTM
Тепер давайте створимо змінні, які будуть вставляти інформацію до нашого коду мікророзмітки за допомогою Менеджера тегів Google. Для BreadCrumbList ми прагнемо створити пару змінних, включаючи ім'я елемента хлібних крихт та URL-адресу.
Щоб створити змінну назву
- Відкрийте Менеджер тегів Google.
- Натисніть "Змінні".
- Прокрутіть вниз до змінної користувача і натисніть «Створити».
- Натисніть конфігурацію змінної та виберіть пункт «Елемент DOM».
- В меню DOM виберіть «Селектор CSS» у меню «Метод вибору».
- Скопіюйте отриманий код у селектор елементів.
- Назвіть цю змінну "first_bread_crumb" та натисніть "Зберегти".
- Повторіть ті ж дії для другої змінної.
Щоб створити змінну URL-адресу
- У змінній користувача натисніть «Створити».
- Натисніть конфігурацію змінної та виберіть URL-адресу.
- Натисніть «Додаткові параметри»
- У меню "Джерело URL" виберіть "first_bread_crumb".
- Назвіть цю змінну "first_bread_crumb_url" та натисніть "Зберегти".
- Повторіть ті самі дії для другої URL-адреси. Тепер, коли змінні створені, ми маємо розгорнути код.
Розгорніть свій код JSON-LD за допомогою Менеджера тегів Google
Менеджер тегів Google (GTM) може бути чудовим інструментом для реалізації динамічної мікророзмітки, особливо для нетехнічних користувачів, яким можна безпосередньо редагувати код сайту.
Розгортання коду схеми за допомогою Менеджера тегів Google є простим процесом.
- Увійдіть у Менеджер тегів Google
- Натисніть "Теги" на лівій бічній панелі, а потім натисніть "Створити", щоб створити новий тег.
- Натисніть «Конфігурація тега» та виберіть «Користувацький HTML» як тип тега. У текстовому полі HTML вставте код розмітки JSON-LD.
- Налаштуйте тригер: тепер потрібно визначити, коли цей тег повинен спрацьовувати.
- Натисніть кнопку «Запуск» під конфігурацією тега.
Натисніть «Зберегти», щоб завершити створення тега.
Перед тим, як опублікувати його, використовуйте режим "Попередній перегляд" у GTM, щоб перевірити свій тег і переконатися, що він правильно працює на вашому сайті.
Протестуйте свою реалізацію
Тестування тега перед його розгортанням у Менеджері тегів Google (GTM) — важливий крок для забезпечення його правильної роботи та запобігання можливим помилкам або проблемам.
- Натисніть «Попередній перегляд» у верхньому правому куті.
- Введіть URL-адресу, яку ви хочете протестувати, і натисніть «Підключитися».
- Перевірте, чи Tag Assistant підключився.
- Виберіть "Window Loaded" або "Container Loaded" у меню зліва.
- Натисніть на вкладку "Variables" (з вибраним "Window Loaded"), щоб переконатися, що ваші змінні працюють належним чином.
- Поверніться на сторінку, відкриту через GTM, та натисніть «Готово».
Тепер, коли все працює як належить, давайте запустимо та відправимо зміни.
Надішліть свої зміни
Переконавшись, що все працює належним чином, натисніть «Надіслати», щоб опублікувати зміни. Це змусить мікророзмітку працювати на вашому веб-сайті.
Висновок
Підсумовуючи, майте на увазі, що цей метод можна використовувати практично для будь-якого типу сторінок, зверніть увагу, що деякі сайти мають дуже складні та неорганізовані селектори CSS, і цей метод може не завжди працювати.
