Home >How to add Search Box and Breadcrumbs Rich Snippets for Magento 2

How to add Search Box and Breadcrumbs Rich Snippets for Magento 2

Vu An.September 21, 2017 |No Comments

In Magento 2, Aggregate Rating, Name, Sku and Price are supported to display Rich Snippets. Unfortunately, that only supports Product page. Besides, there are still a lot of limitations if we want to customize and add some advanced fields to Rich Snippets like Breadcrumbs and Search Box for website Magento 2.

How to add Search Box Rich Snippets

Firstly, create a folder app/code/Bss/ and register a module Magento named as RichSnippets. Create file Bss/RichSnippets/registration.php to register the module.

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Bss_RichSnippets',
    __DIR__
);

Create a module.xml file in the Bss/RichSnippets/etc/module.xml.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Bss_RichSnippets" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
            <module name="Magento_Catalog"/>
        </sequence>
    </module>
</config>

Create Block: Bss/RichSnippets/Block/RichSnippets.php.

<?php
namespace Bss\RichSnippets\Block;

class RichSnippets extends \Magento\Framework\View\Element\Template
{
    public function getBaseUrl()
    {
        return $this->_storeManager->getStore()->getBaseUrl();
    }

   public function getResultUrl($query = null)
    {
        return $this->_urlBuilder->getUrl(
            'catalogsearch/result'
        );
    }
}

Create a layout Bss/RichSnippets/view/layout/default.xml to add a template “add_rich_snippets.phtml” and Search Box Rich Snippets to the pages of the website.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <referenceBlock name="opengraph.general" remove="true" />
            <block class="Bss\RichSnippets\Block\RichSnippets" name="bss.richsnippets.opengraph.default" template="Bss_RichSnippets::add_rich_snippets.phtml" before="customer.wishlist" />
        </referenceBlock>
    </body>
</page>

And create a template: Bss/Richsnippets/view/templates/add_rich_snippets.phtml. Here can use the JSON-LD format to add Rich Snippets.

In Which:

Name is the name of your website.

URL is the link to your website’s homepage.

Target is the URL format of your search page.

Default Magento is “http://yourwebsite.com/catalogsearch/result/?q=keyword”. This link will be a basis for Google displaying search box on the search engine.

<?php
    $websiteName = “Your Website Name”;
    echo '<script type="application/ld+json">'; ?>
    {
        "@context": "http://schema.org",
        "@type": "WebSite",
        "name": "<?php echo $block->escapeHtml($websiteName); ?>",
        "url": "<?php echo $block->escapeUrl($block->getBaseUrl()); ?>",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "<?php echo $block->escapeUrl($block->getResultUrl()); ?>?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
    </script>

Navigate to “Home Page” URL in your browser and view the source code, copy the source code and paste it into the Rich Snippets Checker Tool to check the results.

How to add Breadcrumbs Rich Snippets

As we all know, Breadcrumbs makes a website more prominent on Google.

To add breadcrumbs, you need to create file Bss/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">
     <preference for="Magento\Theme\Block\Html\Breadcrumbs" type="Bss\RichSnippets\Block\Html\Breadcrumbs" />
</config>

Here will overwrite the file Magento\Theme\Block\Html\Breadcrumbs.

Create a file Block: Bss\RichSnippets\Block\Html\Breadcrumbs.

<?php
namespace Bss\RichSnippets\Block\Html; 

class Breadcrumbs extends \Magento\Theme\Block\Html\Breadcrumbs
{
    /**
     * Current template name
     *
     * @var string
     */
    protected $_template = 'Bss_RichSnippets::html/breadcrumbs.phtml';
}

Create template: Bss/RichSnippets/view/templates/html/breadcrumbs.phtml.

<?php if ($crumbs && is_array($crumbs)) : ?>
<div class="breadcrumbs">
    <ul class="items" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <?php foreach ($crumbs as $crumbName => $crumbInfo) : ?>
            <li class="item <?php /* @escapeNotVerified */ echo $crumbName ?>">
            <?php if ($crumbInfo['link']) : ?>
                <a href="<?php /* @escapeNotVerified */ echo $crumbInfo['link'] ?>" title="<?php echo $block->escapeHtml($crumbInfo['title']) ?>" itemprop="url">
                    <span itemprop="title"><?php echo $block->escapeHtml($crumbInfo['label']) ?></span>
                </a>
            <?php elseif ($crumbInfo['last']) : ?>
                <strong><?php echo $block->escapeHtml($crumbInfo['label']) ?></strong>
            <?php else: ?>
                <?php echo $block->escapeHtml($crumbInfo['label']) ?>
            <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

Here we add itemscope itemtype=”http://data-vocabulary.org/Breadcrumb” to ul tag, itemprop=”title” to label and itemprop=”url” to link.

However, this will be limited to the Product page. Product page should contain breadcrumbs in format of “Home > Category 1 > Category 2 > Product”. We will have guide “How to fix Breadcrumbs” in the next article.

If you have any problems or need our professional service, please email us support@bsscommerce.com. You can also find the right solution about Rich Snippets for Magento 2 in Bsscommerce, or find our verified Magento Partner extensions directly on Marketplace.

< Previous Post
Next Post >
Vu An
+ posts