Розширені фрагменти коду Breadcrumbs для Magento

Продавці часто оптимізують веб-сайти для розширених описів як частину Найкращі практики SEO для Magento . Однак вони зазвичай включають розмітку категорій та продуктів, тоді як інші, такі як розширені описи Magento breadcrumbs, залишаються поза увагою.

Цей посібник охоплює все, що вам потрібно знати про схему навігаційних крихт у Magento, розширені фрагменти навігаційних крихт та як додати їх на всі сторінки вашого магазину Magento.

Що таке Rich Snippets Magento Breadcrumbs?

Розширені фрагменти навігаційних сухарів Magento – це тип структурованого коду даних (розмітка Schema.org), який допомагає пошуковим системам відображати чіткий шлях навігації, наприклад, Головна > Категорія > Продукт, замість довгих URL-адрес на сторінці результатів пошуку. Вони генеруються зі структурованих даних навігаційного маршруту (JSON-LD або мікроданих), доданих на сторінку.

За замовчуванням Magento надає хлібні крихти для товарів, категорій та сторінок CMS. Однак розмітки схеми BreadcrumbList за замовчуванням немає.

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

Що таке хлібні крихти в Magento?

Хлібні сухарі Magento – це невеликі навігаційні посилання, які показують відвідувачам їхній шлях від головної сторінки до продукту чи іншої сторінки веб-сайту. Зазвичай вони відображаються у верхній частині сторінки та виглядають так:Головна > Чоловіки > Топи > Куртки > Вітровка Montana.

Приклад хлібних сухарів Magento

Що таке схема навігаційного шляху?

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

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Men",
      "item": "https://example.com/men"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Tops",
      "item": "https://example.com/men/tops"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Jackets",
      "item": "https://example.com/men/tops/jackets"
    },
    {
      "@type": "ListItem",
      "position": 5,
      "name": "Montana Wind Jacket"
    }
  ]
}

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

Схема «хлібних крихт» проти схеми «хлібних крихт» проти розширених фрагментів «хлібних крихт»

Хлібні крихти Magento не те саме, що схема бріджних крихт та розширені сніппети. Ось ключові відмінності.

Як додати Rich Snippets Breadcrumbs до Magento 2?

Існує два способи додавання розширених фрагментів у вигляді хлібних крихт до Magento: вручну додавши необхідний код структурованих даних або за допомогою Magefan Rich Snippets для Magento , який генерує та підтримує його автоматично.

Варіанти залежать від розміру вашого каталогу, ваших технічних навичок та часу, який ви можете витратити на керування структурованими даними.

Додати схему навігаційних крихт у Magento вручну

Додавання схеми хлібних крихт вручну вимагає певних технічних знань, оскільки вам потрібно буде створити невеликий користувацький модуль. Його завдання — генерувати скрипт BreadcrumbList JSON-LD з існуючих даних хлібних крихт Magento.

Крок 1: Створення власного модуля

Створіть модуль (наприклад, Vendor/RichSnippets) та додайте файл di.xml, який прикріплює плагін до блоку навігації Magento за наступним шляхом app/code/Vendor/RichSnippets/etc/frontend/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Block\Html\Breadcrumbs">
        <plugin name="Vendor_RichSnippets::add_breadcrumb_schema" type="Vendor\RichSnippets\Plugin\AddBreadcrumbJsonLd" />
    </type>
</config>

Крок 2: Напишіть плагін

Створіть плагін, який зчитує існуючі хлібні крихти у вашому магазині за допомогою getCrumbs(), перетворює їх у схему BreadcrumbList, а потім вставляє скрипт JSON-LD на сторінку.

Для цього помістіть наступний код у app/code/Vendor/RichSnippets/Plugin/AddBreadcrumbJsonLd.php:

<?php
namespace Vendor\RichSnippets\Plugin;

use Magento\Catalog\Model\Category;
use Magento\Catalog\Model\Product;
use Magento\Catalog\Model\ResourceModel\Category\CollectionFactory as CategoryCollectionFactory;
use Magento\Framework\Registry;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Theme\Block\Html\Breadcrumbs;
use ReflectionProperty;

class AddBreadcrumbJsonLd
{
    /**
     * @var Registry
     */
    private $registry;

    /**
     * @var StoreManagerInterface
     */
    private $storeManager;

    /**
     * @var CategoryCollectionFactory
     */
    private $categoryCollectionFactory;

    /**
     * @param Registry $registry
     * @param StoreManagerInterface $storeManager
     * @param CategoryCollectionFactory $categoryCollectionFactory
     */
    public function __construct(
        Registry $registry,
        StoreManagerInterface $storeManager,
        CategoryCollectionFactory $categoryCollectionFactory
    ) {
        $this->registry = $registry;
        $this->storeManager = $storeManager;
        $this->categoryCollectionFactory = $categoryCollectionFactory;
    }

    public function afterToHtml(Breadcrumbs $subject, string $result): string
    {
        $jsonLd = $this->buildJsonLd($subject);

        if (empty($jsonLd)) {
            return $result;
        }

        $script = '<script type="application/ld+json">'
            . str_replace('</', '<\/', json_encode($jsonLd, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE))
            . '</script>';

        return $result . $script;
    }

    private function buildJsonLd(Breadcrumbs $subject): array
    {
        $crumbs = $this->getCrumbs($subject) ?: $this->getProductFallbackCrumbs();

        if (!$crumbs || !is_array($crumbs)) {
            // No crumbs to render — this is expected on the homepage,
            // where Magento doesn't output a breadcrumb trail at all.
            return [];
        }

        $itemListElement = [];
        $position = 1;

        foreach ($crumbs as $crumbInfo) {
            $item = [
                '@type' => 'ListItem',
                'position' => $position,
                // Labels are often \Magento\Framework\Phrase objects, not
                // strings — cast explicitly or json_encode() will output {}.
                'name' => (string) $crumbInfo['label'],
            ];

            if (!empty($crumbInfo['link']) && empty($crumbInfo['last'])) {
                $item['item'] = $crumbInfo['link'];
            }

            $itemListElement[] = $item;
            $position++;
        }

        return [
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => $itemListElement,
        ];
    }

    /**
     * Breadcrumbs stores crumbs in a protected $_crumbs property and never
     * exposes a public getter — it only pushes them into the phtml scope via
     * assign('crumbs', ...), which lands in $_viewVars, not block data. So
     * there's nothing to call; read the property directly. This runs in
     * afterToHtml, i.e. after _toHtml() already stamped first/last flags on
     * it, so it's the exact same array the template rendered from.
     */
    private function getCrumbs(Breadcrumbs $subject)
    {
        $property = new ReflectionProperty(Breadcrumbs::class, '_crumbs');
        $property->setAccessible(true);

        return $property->getValue($subject);
    }

    /**
     * Product pages render breadcrumbs entirely client-side via the
     * mage/breadcrumbs JS widget (fed from browser-cached category data),
     * so $_crumbs is always empty here — there's nothing added server-side
     * to reflect. Build the trail ourselves from the product's own category
     * assignment instead of depending on JS/session state, so crawlers get
     * a breadcrumb regardless of how the product URL was reached.
     */
    private function getProductFallbackCrumbs(): ?array
    {
        /** @var Product|null $product */
        $product = $this->registry->registry('current_product');

        if (!$product) {
            return null;
        }

        $crumbs = [
            ['label' => __('Home'), 'link' => $this->storeManager->getStore()->getBaseUrl()],
        ];

        $category = $this->registry->registry('current_category') ?: $this->getProductCategory($product);

        if ($category) {
            $pathIds = array_reverse(explode(',', $category->getPathInStore()));
            $parentCategories = $category->getParentCategories();

            foreach ($pathIds as $categoryId) {
                if (isset($parentCategories[$categoryId]) && $parentCategories[$categoryId]->getName()) {
                    $crumbs[] = [
                        'label' => $parentCategories[$categoryId]->getName(),
                        'link' => $parentCategories[$categoryId]->getUrl(),
                    ];
                }
            }
        }

        $crumbs[] = ['label' => $product->getName(), 'last' => true];

        return $crumbs;
    }

    /**
     * Pick the most specific (deepest) active category assigned to the
     * product to stand in for the missing current_category registry entry.
     */
    private function getProductCategory(Product $product): ?Category
    {
        $categoryIds = $product->getCategoryIds();

        if (empty($categoryIds)) {
            return null;
        }

        $collection = $this->categoryCollectionFactory->create()
            ->addAttributeToSelect(['name', 'url_key', 'url_path'])
            ->addIdFilter($categoryIds)
            ->addAttributeToFilter('is_active', 1)
            ->setOrder('level', 'DESC');

        $category = $collection->getFirstItem();

        return $category->getId() ? $category : null;
    }
}

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

Крок 3: Увімкніть модуль

Щоб увімкнути модуль, виконайте такі команди:

bin/magento module:enable Vendor_RichSnippets
bin/magento setup:upgrade
bin/magento cache:flush

Автоматичне додавання схеми навігаційних крихт у Magento

Щоб автоматично додавати схему навігаційних крихт у Magento, скористайтесяMagento 2 Rich Snippets модуль від Magefan. модуль генерує схему BreadcrumbList на основі ваших хлібних крихт Magento, що відображає поточну ієрархію вашого магазину. Якщо щось у вашому каталозі змінюється, воно також оновлює ваші структуровані дані. Ручна робота не потрібна.

Щоб увімкнути фрагменти навігаційних сухарів Magento:

1. Перейти до Магазини > Конфігурації > Модулі Magefan > Rich Snippets коду.
2. Прокрутіть униз до Фрагмент хлібних сухарів функцію та увімкніть її, натиснувши Так.

Увімкнення фрагмента навігаційних крихт за допомогою модуль Magento 2 Rich Snippets

Тоді Зберегти конфігурація та очистити кеш Magento застосувати розмітку схеми.

Ось так просто. Відтепер модуль Magefan автоматично генерує та оновлює схему хлібних крихт у міру зростання вашого магазину.

Як перевірити, чи працює ваша схема навігації?

Щоб перевірити, чи ваша схема навігаційного шляху є дійсною, виконайте перевірку URL-адреси активної сторінки.Тест розширених результатів Google і Валідатор розмітки схеми.

Тест розширених результатів Googleперевіряє, чи може Google прочитати схему навігаційних крихт (і потенційно показати її як розширений результат).

Результат тесту схеми навігації (breadcrumb schema) у тесті розширених результатів Google

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

Результат тесту схеми навігаційного шляху у валідаторі розмітки схеми

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

Після того, як схема навігації Magento буде активована на всіх сторінках, ви можете використовувати Консоль пошуку Google щоб перевірити роботу хлібних сухарів через Звіт «Навігаційні крихти».

Перевірка навігаційних ланцюжків у Search Console

Якщо ви використовуєте Magefan Rich Snippets, процес стає набагато простішим, оскільки зменшується ризик помилок, допущених вручну. модуль автоматично створює та підтримує розмітку навігаційних крихт.

Окрім схеми навігаційного шляху, модуль дозволяє вам додайте інші Rich Snippets до Magento , включаючи схеми продукту, поширених запитань та організації. Таким чином, ви можете підтримувати точність та актуальність структурованих даних у всьому вашому магазині без спеціальної розробки.

Найчастіші запитання

Чи всім сторінкам Magento потрібна схема навігації (breadcrumb)?

Не всім сторінкам Magento потрібна схема breadcrumb. Такі сторінки, як головна сторінка, кошик для покупок або оформлення замовлення, не отримають від неї користі, оскільки не мають змістовної ієрархічної позиції для відображення.

Де розмістити схему навігаційних крихт у Magento?

Скрипт JSON-LD зазвичай додається через XML-файл макета (catalog_category_view.xml для сторінок категорій та catalog_product_view.xml для сторінок товарів), щоб він витримав майбутні оновлення. Якщо ви використовуєте модуль, таке як Magefan Rich Snippets для Magento, воно зазвичай автоматично вставляє його у вивід сторінки без ручного редагування шаблону.

Чи вимагає зміна URL-адрес категорій Magento оновлення схеми навігаційних крихт?

Якщо ви перейменовуєте категорії, змінюєте URL-адресу або переміщуєте продукт до іншої категорії, ваша схема навігації має відображати оновлену ієрархію. В іншому випадку вона відображатиме невідповідний або застарілий шлях. Модуль Magefan Rich Snippets автоматично оновлює схему навігації після будь-яких змін у категорії.