WHat is SCHEMA OR RICH SNIPPET? Step by Step process to create and submit sitemap in Google search console by Prashant Chauhan digital marketing trainer and expert

Create Schema Markup | Technical SEO to Rank Faster in Google

/ Digital Marketing, SEO / By

Schema markup, also called structured data, is a kind of code you add to your website’s HTML. It helps search engines understand your website’s content better. This can improve how your page appears in search results, often leading to special features like rich snippets or enhanced listings. In this article, we will learn to create schema markup in different CMS and try to understand its uses in depth.

What is Schema Markup?

Schema markup is a set of tags you add to your HTML. These tags are understood by major search engines like Google, Bing, Yahoo!, and Yandex. When you use schema markup, it creates a detailed description, called a rich snippet, that shows up in search results.

Credit: Ahrefs | Example of results displayed on Google search engine result page (SERP) for a product.

Example of results displayed on Google search engine result page (SERP) for an article.

Benefits of Creating Schema Markup

  • Improved Search Engine Understanding: This helps search engines understand the context of your content.
  • Enhanced SERP Display: This can result in rich snippets which can improve click-through rates.
  • Increased Visibility: Provides more information to users directly in the search results.
  • Voice Search Optimization: Improves the chances of being featured in voice search results.

Types of Schema Markup

  • Articles
  • Local businesses
  • Restaurants
  • TV episodes and ratings
  • Book reviews
  • Movies
  • Software applications
  • Events
  • Products

How to Implement Schema Markup

  1. Choose the Type of Schema: Decide which schema type best matches the content of your page. Explained in the below examples.
  2. Use Schema Markup Generators: Tools like Google’s Structured Data Markup Helper can help you generate the necessary code.
  3. Add the Markup to Your HTML: Insert the generated schema markup into the appropriate sections of your HTML code.
  4. Test Your Markup: Use tools like Google’s Rich Results Test to ensure your markup is correctly implemented.

Example of Schema Markup

Let’s look at a basic example of schema markup for a local business:

Example 1. Write Schema Markup for a Local Business

<!DOCTYPE html>
<html>
<head>
  <title>John's Bakery</title>
</head>
<body>
  <div itemscope itemtype="http://schema.org/Bakery">
    <h1 itemprop="name">John's Bakery</h1>
    <p itemprop="description">John's Bakery is the best bakery in town, offering a wide variety of baked goods made fresh daily.</p>
    <p>Address: <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">123 Main St</span>, 
      <span itemprop="addressLocality">Hometown</span>, 
      <span itemprop="addressRegion">CA</span> 
      <span itemprop="postalCode">12345</span>
    </span></p>
    <p>Phone: <span itemprop="telephone">(123) 456-7890</span></p>
    <p>Website: <a href="http://www.johnsbakery.com" itemprop="url">johnsbakery.com</a></p>
    <p>Opening Hours: 
      <span itemprop="openingHours" datetime="Mo-Fr 08:00-17:00">Mon-Fri 8am - 5pm</span>, 
      <span itemprop="openingHours" datetime="Sa 08:00-12:00">Sat 8am - 12pm</span>
    </p>
  </div>
</body>
</html>

In this example, the itemscope and itemtype attributes define the type of item (a bakery) and its properties, such as name, address, telephone, and opening hours. Each property is marked with the itemprop attribute to define its value.

Explanation

  • itemscope and itemtype: These attributes define the scope of the item and its type.
<div itemscope itemtype="http://schema.org/Bakery">

This indicates that the content within this ‘div‘ describes a ‘Bakery‘.

  • itemprop: This attribute specifies the properties of the item.
html<h1 itemprop="name">John's Bakery</h1>
<p itemprop="description">John's Bakery is the best bakery in town, offering a wide variety of baked goods made fresh daily.</p>

Here, ‘name‘ and ‘description‘ properties describe the bakery.

  • Nested itemscope for Address:
htmlCopy code<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="streetAddress">123 Main St</span>
  <span itemprop="addressLocality">Hometown</span>
  <span itemprop="addressRegion">CA</span>
  <span itemprop="postalCode">12345</span>
</span>

This nested structure allows for detailed address information, each part of the address is described with its own ‘itemprop‘.

  • Other properties:
htmlCopy code<p>Phone: <span itemprop="telephone">(123) 456-7890</span></p>
<p>Website: <a href="http://www.johnsbakery.com" itemprop="url">johnsbakery.com</a></p>
<p>Opening Hours: 
  <span itemprop="openingHours" datetime="Mo-Fr 08:00-17:00">Mon-Fri 8am - 5pm</span>, 
  <span itemprop="openingHours" datetime="Sa 08:00-12:00">Sat 8am - 12pm</span>
</p>
Result after schema update:

John’s Bakery:

  • Rich Snippet Example:
    • Title: John’s Bakery
    • Description: John’s Bakery is the best bakery in town, offering a wide variety of baked goods made fresh daily.
    • Address: 123 Main St, Hometown, CA 12345
    • Phone: (123) 456-7890
    • Opening Hours: Mon-Fri 8am – 5pm, Sat 8am – 12pm

Google Search Result:

vbnetCopy codeJohn's Bakery
★★★★☆  (4.5)
123 Main St, Hometown, CA 12345 - (123) 456-7890
Opens at 8:00 AM
John's Bakery is the best bakery in town, offering a wide variety of baked goods made fresh daily.
Visit website

Example 2. Write Schema Markup for a product

Example Markup

htmlCopy code<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">Super Widget</span>
  <img itemprop="image" src="super-widget.jpg" alt="Super Widget">
  <span itemprop="description">The best widget you'll ever find for all your widget needs.</span>
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">49.99</span>
    <link itemprop="availability" href="http://schema.org/InStock">In stock</link>
  </div>
</div>

Explanation

Product Scope:

<div itemscope itemtype="http://schema.org/Product">

Basic Properties:

<span itemprop="name">Super Widget</span>
<img itemprop="image" src="super-widget.jpg" alt="Super Widget">
<span itemprop="description">The best widget you'll ever find for all your widget needs.</span>

Offer Nested Scope:

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
  Price: $<span itemprop="price">49.99</span>
  <link itemprop="availability" href="http://schema.org/InStock">In stock</link>
</div>
Result after schema update:

Super Widget:

  • Rich Snippet Example:
    • Product Name: Super Widget
    • Image: An image of the Super Widget
    • Description: The best widget you’ll ever find for all your widget needs.
    • Price: $49.99
    • Availability: In stock

Google Search Result:

scssCopy codeSuper Widget
★★★★☆  (4.5)
$49.99 - In stock
The best widget you'll ever find for all your widget needs.
[Product Image]

Example 3. Write Schema Markup for Event 

htmlCopy code<div itemscope itemtype="http://schema.org/Event">
  <span itemprop="name">The Amazing Concert</span>
  <span itemprop="startDate" content="2024-07-10T19:00">July 10, 2024 at 7:00 PM</span>
  <span itemprop="location" itemscope itemtype="http://schema.org/Place">
    <span itemprop="name">The Grand Arena</span>
    <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">456 Music Lane</span>
      <span itemprop="addressLocality">Music City</span>
      <span itemprop="addressRegion">TN</span>
      <span itemprop="postalCode">12345</span>
    </span>
  </span>
  <span itemprop="performer" itemscope itemtype="http://schema.org/Person">
    <span itemprop="name">John Doe</span>
  </span>
</div>

Explanation

Event Scope:

<div itemscope itemtype="http://schema.org/Event">

Event Properties:

<span itemprop="name">The Amazing Concert</span>
<span itemprop="startDate" content="2024-07-10T19:00">July 10, 2024 at 7:00 PM</span>

Nested Location Scope:

<span itemprop="location" itemscope itemtype="http://schema.org/Place">
  <span itemprop="name">The Grand Arena</span>
  <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">456 Music Lane</span>
    <span itemprop="addressLocality">Music City</span>
    <span itemprop="addressRegion">TN</span>
    <span itemprop="postalCode">12345</span>
  </span>
</span>

Performer Property:

<span itemprop="performer" itemscope itemtype="http://schema.org/Person">
  <span itemprop="name">John Doe</span>
</span>
Result after schema update:

The Amazing Concert:

  • Rich Snippet Example:
    • Event Name: The Amazing Concert
    • Date and Time: July 10, 2024, at 7:00 PM
    • Location: The Grand Arena, 456 Music Lane, Music City, TN 12345
    • Performer: John Doe

Google Search Result:

vbnetCopy codeThe Amazing Concert
Date: July 10, 2024
Time: 7:00 PM
Location: The Grand Arena, 456 Music Lane, Music City, TN
Performer: John Doe
Get Tickets

Create Schema for WordPress website

you can install various plugins to create the schema in the WordPress website.

Plugin URL – https://wordpress.org/plugins/schema-and-structured-data-for-wp/

Check the plugin description and screenshots to understand the in-depth processing of this tool.

Create Schema for Shopify website

1. Login to your Shopify Store.

2 . Scroll down and go to themes > edit your theme

3. Go to the snippets folder add a new snippet and name it “product-schema.liquid”

AsthaUpadhyay_0-1653034179545.png

4. Insert the following code into the new “product-schema.liquid”

Copy below code:

<script type=’application/ld+json’>
{
“@context”: “http://schema.org/”,
“@type”: “Product”,
“name”: “{{ product.title }}”,
“url”: “{{ shop.url }}{{ product.url }}”,
“image”: “{{ shop.url }}{{ product.featured_image }}”,
“description”: “{{ page_description }}”,
“offers”: {
“@type”: “Offer”,
“priceCurrency”: “{{ shop.currency }}”,
“price”: “{{ product.price | money_without_currency }}”,
“itemCondition”: “http://schema.org/NewCondition”,
“availability”: “http://schema.org/InStock”
}
}
</script>
[/code]

 5. Go to the product.liquid file, scroll down to the end of the page, and paste this code.

Also, you can install the below Chrome extension to check your website page schema optimization.
https://chrome.google.com/webstore/detail/schema-builder-tester-for/klohjdodjjeocpbpadmkcndjoadijgjg

Below, I have shared the screenshot for one of the produc from your website, you can use the schema builder tool (download from the above link), it will help to check for the schema tag optimization.

AsthaUpadhyay_1-1653034194839.png

Pro Tip – You can also test your product URLs with this tool – https://validator.schema.org/. It will tell you if there are any missing fields (including errors).

Points to consider when creating a product schema
  1. Product Image
  2. Product Name
  3. Either review or aggregate rating or offers
  4. Brand
  5. Description
  6. SKU (if any)
  7. Price, Currency, and offers (if any)
  8. Product Inventory Status

Summary
Article Name
A perfect guide to Schema markup and rich snippets | Most advanced techniques in 2024
Description
Schema markup, also called structured data, is a kind of code you add to your website's HTML. It helps search engines understand your website's content better. This can improve how your page appears in search results, often leading to special features like rich snippets or enhanced listings.
Author
Publisher Name
Prashantchauhan.com
Publisher Logo

Related Posts