Magento 2 Rich Text Schema Setup in JSON-LD: Step-by-Step Guide

In our previous blog, we discussed how Magento 2’s default schema markup doesn’t quite meet SEO needs straight out of the box. If your Magento 2 store relies on the default Magento template, it likely won’t qualify for showing up as a product card in Google search results. We provided a detailed guide on fixing the issues with the default Magento 2 schema, however there’s an even better approach: implementing schema using JSON-LD format. Unlike the Microdata format used by default in Magento 2, JSON-LD is more flexible and preferred for schema due to its ease of use and efficiency.

For those unfamiliar, schema markup plays a crucial role in making your eCommerce site more visible on search engines. By adding Rich Text Schema, search engines can better understand your content, which improves SEO and enables rich snippets (like product widgets) that give you more space in Google Search page and attract clicks and boost visibility.

How can you add Rich Text Schema Markup in JSON-LD to your Magento 2 store?

The first option is to get a 3rd party extension. There are plenty of options available, but make sure to do a basic research (check the demos) and then purchase it, most of the extensions struggle with Magento 2 Configurable products. We would recommend going for an SEO extension from reputed publishers like Amasty or Mageworks which along with schema fixes gives many more features for SEO as well.

However, if you prefer the more exciting DIY approach, you can add this schema yourself with some basic Magento and PHP knowledge. This guide will walk you through the steps for setting up Rich Text Schema for products and organization details, ensuring your Magento 2 store stands out with structured data designed for search engine success. Let’s dive in!

Note: These issues persist in the default Magento setups till version 2.4.7, so if you are using any 3rd party theme or SEO extension, or any newer version in future, then this solution might not work for you. If you are facing any troubles following the guide or fixing the schema, feel free to reach out to us.

Directory Structure

To make the required changes without them being overwritten by future updates, we’ll create a custom module. Here’s the basic structure:

app/code/Azguards/RichTextSchema/
├── Block
│   ├── OrganizationSchema.php
│   └── ProductSchema.php
├── view
│   └── frontend
│       ├── layout
│       │   ├── cms_index_index.xml
│       │   └── default.xml
│       └── templates
│           ├── organizationschema.phtml
│           └── productschema.phtml


Click here to view and edit & add your code between the textarea tags

Layout XML Configuration

Organization Schema Layout

File:

app/code/Azguards/RichTextSchema/view/frontend/layout/cms_index_index.xml

This file configures the layout for the CMS Index page, referencing the OrganizationSchema block to include the organization schema data

<?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>
       <referenceContainer name="content">
           <block class="Azguards\RichTextSchema\Block\OrganizationSchema" name="organization_schema" template="Azguards_RichTextSchema::schema.phtml"/>
       </referenceContainer>
   </body>   
</page>

Click here to view and edit & add your code between the textarea tags

product Schema layout

File:

app/code/Azguards/RichTextSchema/view/frontend/layout/default.xml

This file configures the layout for the default page, referencing the ProductSchema block to include the product schema data.

<?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>
       <referenceContainer name="content">
           <block class="Azguards\RichTextSchema\Block\ProductSchema" name="rich.text.schema" template="Azguards_RichTextSchema::productschema.phtml"/>
       </referenceContainer>
   </body>
</page>

Click here to view and edit & add your code between the textarea tags

Checkout Our Magento 2 Extensions

Creating templates Organization

Template File for organization schema

File

app/code/Azguards/RichTextSchema/view/frontend/templates/organizationschema.phtml

<?php
/** @var \Azguards\RichTextSchema\Block\OrganizationSchema $block */
?>
<script type="application/ld+json">
   <?php echo $block->getSchemaData(); ?>
</script>


Click here to view and edit & add your code between the textarea tags

Organization Schema Block

File:

app/code/Azguards/RichTextSchema/Block/OrganizationSchema.php

This block class contains the logic to create and return the structured schema data as a JSON string.

 /**
    * Organization Schema data
    *
    * @return string
    */
   public function getSchemaData()
   {
       $schemaData = [
           '@context' => 'https://schema.org',
           '@type' => 'Organization',
           'url' => $this->getSiteUrl(),
           'logo' => $this->getSiteUrl().'media/logo/'.$this->getLogoUrl(),
           'name' => $this->getStoreName(),
           'description' => 'Magento 2',
           'email' => $this->getStoreEmail(),
           'telephone' => $this->getStorePhone(),
           'address' => [
               '@type' => 'PostalAddress',
               'streetAddress' => $this->getStoreStreet(),
               'addressLocality' => $this->getStoreCity(),
               'addressCountry' => $this->getStoreCountry(),
               'postalCode' => $this->getStorePostcode()
           ],
           'aggregateRating' => [
               '@type' => 'AggregateRating',
               'ratingValue' => 4.8,
               'ratingCount'=> 50
           ]
       ];


       return json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
   }

Click here to view and edit & add your code between the textarea tags

Creating templates Products

Template File for Product schema

File

app/code/Azguards/RichTextSchema/view/frontend/templates/productschema.phtml

<?php
/** @var \Azguards\RichTextSchema\Block\ProductSchema $block */
?>
<script type="application/ld+json">
   <?php echo $block->getSchemaData(); ?>
</script>


Click here to view and edit & add your code between the textarea tags

Product Schema Block

File

app/code/Azguards/RichTextSchema/Block/ProductSchema.php

/**
    * Product Schema data
    *
    * @return string
    */
   public function getSchemaData()
   {
       $product = $this->getProduct();
       if (!$product) {
           return '';
       }


       $variations = [];
       if ($product->getTypeId() == 'configurable') {
           $childProducts = $product->getTypeInstance()->getUsedProducts($product);
           foreach ($childProducts as $childProduct) {
               if ($childProduct instanceof Product) {
                   $variations[] = [
                       '@type' => 'Product',
                       'sku' => $childProduct->getSku(),
                       'image' => $this->getImage($childProduct, 'product_base_image')->getImageUrl(),
                       'name' => $childProduct->getName(),
                       'description' => $this->escapeHtml($childProduct->getDescription()),
                       'offers' => [
                           '@type' => 'Offer',
                           'url' => $this->escapeHtml($product->getProductUrl()) . '?id=' . $childProduct->getId(),
                           'priceCurrency' => $this->getCurrencyCode(),
                           'price' => $childProduct->getFinalPrice(),
                           'itemCondition' => 'https://schema.org/' . ($this->getItemCondition($childProduct) ?: 'NewCondition'),
                           'availability' => $childProduct->isAvailable() ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
                       ],
                   ];
               }
           }
       }


       $reviewSummary = $this->_reviewSummaryFactory->create()->load($product->getId());
       $reviewCount = $reviewSummary->getReviewsCount() ?: 0;
       $ratingSummary = $reviewSummary->getRatingSummary() ?: 20;


       $schemaData = [
           '@context' => 'https://schema.org/',
           '@type' => $product->getTypeId() == 'configurable' ? 'ProductGroup' : 'Product',
           '@id' => $this->escapeHtml($product->getProductUrl()),
           'name' => $this->escapeHtml($product->getName()),
           'image' => $this->getImage($product, 'product_base_image')->getImageUrl(),
           'description' => $this->escapeHtml($product->getDescription()),
           'sku' => $this->escapeHtml($product->getSku()),
           'aggregateRating' => $reviewCount ? [
               '@type' => 'AggregateRating',
               'bestRating' => 5,
               'worstRating' => 1,
               'ratingValue' => $ratingSummary / 20,
               'reviewCount' => $reviewCount,
           ] : null,
           'offers' => [
               '@type' => 'Offer',
               'priceCurrency' => $this->getCurrencyCode(),
               'url' => $this->escapeHtml($product->getProductUrl()),
               'availability' => $product->isAvailable() ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock',
               'price' => $product->getFinalPrice(),
               'itemCondition' => 'https://schema.org/' . ($this->getItemCondition($product) ?: 'NewCondition'),
           ],
       ];


       if ($product->getTypeId() == 'configurable' && !empty($variations)) {
           $schemaData['productGroupID'] = $this->escapeHtml($product->getSku());
           $schemaData['hasVariant'] = $variations;
       }


       return json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT);
   }


Click here to view and edit & add your code between the textarea tags

Final Step: Deploy and Test Your Changes

After implementing the custom module, deploy the changes to your Magento store by running the following commands:

php bin/magento setup:upgrade
php bin/magento cache:flush
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f



Click here to view and edit & add your code between the textarea tags

Once the deployment is complete, test your product schema markup using Google’s Rich Results Testing Tool. Enter the URL of a product page, test a simple and config product, and ensure everything is correctly recognized.

need assisting with Magento 2 customization?

Feel Free To Contact Our Experts

IT SERVICES

Ecommerce Development

Enterprise Solutions

Web Development

Mobile App Development

Digital Marketing Services

Quick Links

Hire Developers

Magento 2 Rich Text Schema Setup in JSON-LD: Step-by-Step Guide

How can you add Rich Text Schema Markup in JSON-LD to your Magento 2 store?

Directory Structure

Layout XML Configuration

Organization Schema Layout

product Schema layout

Creating templates Organization

Template File for organization schema

Organization Schema Block

Creating templates Products

Template File for Product schema

Product Schema Block

Final Step: Deploy and Test Your Changes

Quick Links

Our Expertise

Hire Dedicated Developers