Cách thêm Search Box và Breadcrumbs Rich Snippets cho Magento 2

Nhận xét sản phẩm này

Tình trạng: Còn hàng

0,00 US$
Hoặc

Cách thêm Search Box và Breadcrumbs Rich Snippets cho Magento 2

Cách thêm Search Box và Breadcrumbs Rich Snippets cho Magento 2

Ở Magento 2, Aggregate Rating, Name, Sku và Price đã được hỗ trợ hiển thị Rich Snippets. Tuy nhiên điều đó chỉ hỗ trợ trang sản phẩm và vẫn còn rất nhiều hạn chế nếu chúng ta muốn tùy biến và thêm một số trường nâng cao cho Rich Snippets như Breadcrumbs và Search Box cho website Magento 2.

 

Thao tác đó sẽ dễ dàng hơn rất nhiều nếu bạn làm theo hướng dẫn của chúng tôi dưới đây.

Cách thêm Search Box Rich Snippets

Bước đầu tiên, tạo một Folder app/code/Bss/ và đăng ký một Module Magento đặt tên là RichSnippets.

 

Tạo file: Bss/RichSnippets/registration.php để đăng ký module.

 

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

    'Bss_RichSnippets',

    __DIR__

);

 

Tạo một file module.xml ở đường dẫn 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>

 

Tạo 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'

        );

    }

}

 

Tạo một layout Bss/RichSnippets/view/layout/default.xml để thêm một Template là add_rich_snippets.phtml và Search Box Rich Snippets cho các trang của 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>

 

Tạo một Template Bss/Richsnippets/view/templates/add_rich_snippets.phtml

Ở đây chúng ta sử dụng định dạng JSON-LD để thêm Rich Snippets.

Trong đó:

Name là Tên website của bạn.

Url là đường dẫn tới trang chủ website của bạn.

Target là định dạng URL của trang tìm kiếm của bạn, Default Magento làhttp://yourwebsite.com/catalogsearch/result/?q=keyword”. Đường dẫn này sẽ là cơ sở để Google hiển thị thanh search Box trên công cụ tìm kiếm.

 

<?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>

 

 

Mở trang Home Page ở trình duyệt của bạn và hiển thị Source Code, sao chép Source này và dán vào công cụ check Rich Snippets để kiểm tra kết quả.

 

 

Cách thêm Breadcrumbs Rich Snippets

Magento 2 thì không hỗ trợ Breadcrumbs Rich Snippets. Như chúng ta đã biết, Breadcrumbs sẽ làm cho trang web của chúng ta nổi bật hơn trên Google.

Để thêm Breadcrumbs Rich Snippets, bạn cần tạo 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>

 

Ở đây bạn sẽ ghi đè file Magento\Theme\Block\Html\Breadcrumbs.

Tạo một 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';

}

 

Tạo 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; ?>

 

 

Ở đây bạn thêm itemscope itemtype="http://data-vocabulary.org/Breadcrumb" vào thẻ ul, itemprop="title" vào label và itemprop="url" vào link.

 

Tuy nhiên, điều này vẫn có một số giới hạn với trang sản phẩm. Trang sản phẩm cần phải có Breadcurmbs ở dạng “Home > Category 1 > Category 2 > Product”. Chúng tôi sẽ hướng dẫn các bạn ở bài viết "How to fix Breadcrumbs".

Hi vọng bài viết giúp ích các bạn!

 

Nếu bạn có bất cứ vấn đề gì hoặc cần một dịch vụ chuyên nghiệp, hãy gửi mail cho chúng tôi qua địa chỉ: support@bsscommerce.com.

Bạn có thể tìm được giải pháp tốt hơn về Rich Snipptes cho Magento 2 ở Bsscommerce, hoặc tìm kiếm Magento Partner extensions của chúng tôi đã được xác nhận trên Marketplace.

Thông tin kỹ thuật

Author BSS Member
(0)

Questions and Answers

add your question

There are no entries.