What is Schema Markup and How to Add it to Your Website?

What is Schema Markup?

Schema markup, also known as structured data, is the code added to your web pages to assist search engines in better understanding your content. This enables them to present your content in a richer format. To boost your SEO strategy, it's essential to include schema markup on your web pages, as it helps search engines better understand your content and enhances search visibility. For example, while you might instantly recognize a list of ingredients as part of a recipe, a search engine can’t "see" that without some help. By adding schema markup, you give search engines the context they need to understand the meaning behind your content, making it easier for them to categorize and display it in search results.

Like this:

In this example, Google showcases an image, star rating, review count, cooking time, and recipe ingredients directly in the search results. These features help your webpage stand out from the others.

Importance of Schema Markup for Search Engines

Schema markup plays a vital role in how search engines interpret and rank your web pages. By adding extra information to your webpage such as its title, description, images, and other key elements — schema markup helps search engines understand the meaning and context behind your content. This deeper understanding can result in better visibility on search engine results pages (SERPs).
Schema markup also helps your web pages show up in rich results, which look better and give more information, leading to more clicks and more visitors to your site.

Related topics you may enjoy: What is Google Tag Manager and How it Works?

Types of Schema markup

Schema markup can be applied to enhance a wide variety of content types. While there are 803 types listed on Schema.org, Google currently supports only a select few, with the possibility of more being added in the future. Here are some of the types of schema markup that Google supports and that you can use on your website:

1. Product Markup

  
By adding Product markup, you give Google additional information about your products, including price, availability, review ratings, and shipping information. This is especially helpful for e-commerce websites, as it lets users get a more detailed preview of the product in the search results.

2. Article Markup

Article schema is well suited to news, blog, or sports article pages. It encourages Google to gain a better sense of what is on your page by offering specific signals about what kind of content it is. 

Here are the primary advantages:

• Enhanced visibility: Allows Google to display better title text, images, and date details.
   
• Content comprehension: It clearly informs Google about the content of your page, increasing the chances of it appearing for relevant search queries.

3. Review Markup

Review markup adds a star rating to the bottom of your search result listing, giving searchers insight into what others think of your product, service, or business. Customers tend to read reviews before making a decision, so this markup is highly valuable.
This schema type is perfect for sites that have reviews on products, books, movies, courses, and more.

4. Local Business Markup

Local Business schema helps Google to get a better understanding of your business, such as Name, address, phone number, departments, and operating hours. This markup can help to provide key business information right in the search results, particularly for local businesses. Google can utilize this information to generate a local knowledge panel, which appears when someone searches for your business name.

Or display this information directly on Google Maps.

5. Organization Markup
 

Organization markup provides detailed information about an organization such as the organization's name, logo, contact information, address, and social media handles. This helps Google generate knowledge panels—a special panel on the right side of search results with key information about the organization.
This schema is valuable for companies, NGOs, Organizations, and any group wanting to provide clear and easily accessible information to users.

Here’s an example of Organization Markup for Apple Inc.

6. Event Markup

Event schema is valuable for getting more visibility for events, whether they’re online or offline. Rich results for events stand out in Google search results, helping increase engagement and attendance. You can add details such as event name, date, time, location, and more.

Here’s an example of event Markup for New York concerts.

Benefits of Schema Markup for SEO

Schema markup is essential for SEO, not because it directly affects your rankings, but because of the many indirect benefits it provides:

• Improved Search Engine Understanding: Schema markup helps search engines better comprehend the context and content of your pages. This allows your pages to be shown for more relevant search queries, which can drive more targeted traffic to your site.
   
• Enhanced Appearance in Search Results: By adding schema markup, you can enhance the visual appeal of your page in search results. This includes features like rich snippets, which display additional information (ratings, prices, images, etc.). This makes your page stand out, and users are more likely to click on your link, improving your click-through rate (CTR).
   
• Competitive Advantage: Many websites are still not using schema markup, which gives you a competitive edge. By adding schema, you're staying ahead of the curve and making your website more visible and appealing to users and search engines alike.

All of these factors can contribute to better overall SEO performance, helping your website rank higher and attract more visitors.

How to Add Schema Markup to Your Website

1. Choose the Schema Markup Type

Every website should implement basic schema, but it's important to only add the schema types that are most relevant to your content. Some common types include:

• Article
   
• Product
   
• Local Business
   
• Recipe
   
• Event
   
• FAQ

You can find the full list of schema types and their properties on Schema.org.

Methods for Adding Schema Markup to Your Website?

The good news is that most modern website content management systems (CMS) support basic schema integration right out of the box.

1. Using a CMS

• Wix or Webflow: These platforms allow you to adjust the schema settings easily within the CMS, without needing additional plugins or code.
   
• WordPress: You can use a plugin like Yoast SEO to add schema markup. During the setup process, you’ll be prompted to add an Organization or Person schema. After that, you can customize your settings further by selecting the "Schema" tab within a post.

2. Manually Adding Schema Markup

If you prefer more control over your schema markup, you can manually add the code to your site. However, this requires some coding knowledge, so you may want to consult an SEO professional or developer if you're not comfortable with the code.

Schema can be written in three formats:

Three Methods to Implement Schema Markup

There are three primary methods for communicating schema markup to Google. These methods involve different coding formats that make your schema markup machine-readable:

1. JSON-LD (JavaScript Object Notation for Linked Data)

JSON-LD is the most common method for implementing schema markup. It's a JavaScript-based approach that uses JSON syntax to structure data in name-value pairs, similar to how a phonebook organizes information. This method is simple for developers to use and is Google’s preferred format for schema markup.

Example:

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": "What is Schema Markup and How to Add it to Your Website?",
"author": {
  "@type": "Person",
  "name": "James Vince"
},
"datePublished": "2024-02-25",
"image": "image.png"
}
</script>

In this example, Google understands that:

• The content is an article.
• The article's title is "What is Schema Markup and How to Add it to Your Website?"
• The author is "James Vince."
• The article was published on February 25, 2024.
• JSON-LD is the most widely used method due to its simplicity and Google’s preference.

2. Microdata

Microdata embeds schema markup directly within HTML tags. Although this method is more understandable to those familiar with HTML, it tends to produce longer code compared to JSON-LD and is less preferred.

Example:

<html>
<head>
<title>your page title</title>
</head>
<body>
<div itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">What is Schema Markup and How to Add it to Your Website?</h1>
<img itemprop="image" src="image.png" alt="featured image">
<p>Written by: <span itemprop="author">James Vince</span></p>
<p>Published on: <time itemprop="datePublished" datetime="2025-02-25">February 25, 2024</time></p>
</div>
</body>
</html>

Here:

• <div> indicates the scope of the “Article” schema.
• The itemprop attribute specifies the title, image, author, and publication date.

3. RDFa (Resource Description Framework in Attributes)

RDFa is another method that uses HTML tags and attributes, similar to Microdata. However, RDFa is more verbose and can result in even longer code than Microdata.

Example:

<html>
<head>
<title>What is Schema Markup and How to Add it to Your Website?</title>
</head>
<body>
<div vocab="http://schema.org/" typeof="Article">
<h1 property="headline">What is Schema Markup and How to Add it to Your Website?</h1>
<img property="image" src="image.png" alt="featured image">
<p>Written by: <span property="author" typeof="Person">James Vince</span></p>
<p>Published on: <time property="datePublished" datetime="2024-02-25">February 25, 2023</time></p>
</div>
</body>
</html>

In this case:
<div> marks the scope of the “Article” schema.
The property attributes specify the title, image, author, and publication date.
While RDFa and Microdata are still used, JSON-LD is generally considered the best option due to its simplicity and Google’s preference for it. Using JSON-LD ensures that schema markup is easily understood by search engines and helps improve the visibility of your content in search results.

3. Go to Google’s Structured Data Markup Helper Tool

Start by visiting Google’s Structured Data Markup Helper Tool.

4. Select a Data Type

Choose the most relevant data type for your content. For this example, we’ll select “Articles”.

5. Paste Your URL

Paste the URL of the page you want to mark up. Alternatively, you can paste the HTML code directly into the tool. Once done, click the “Start Tagging” button.

The tool will load your page, allowing you to begin marking it up. Your webpage will be displayed on the left side, while the data items will appear on the right, like this:

6. Start Marking Up Your Page

Once the tool loads the page, it will display the content on the left side and a list of data items on the right side.

• Highlight Content: Begin by highlighting the content on the left (like the title or author).
   
• Select Data Item: Choose the appropriate data item from the right (e.g., “Name” for the title of the article).
   
• Tag Additional Information: Repeat this process for other elements like the author name, date published, or any other data points that are relevant to the page.

The tool will automatically place the selected items in the appropriate fields on the right side.

7. Generate HTML Code
 

• Once you've marked up the page content, click the “Create HTML” button located at the top-right of the screen.
   

   

• You’ll receive the code for the markup in JSON-LD format by default, but you can select Microdata format from the drop-down menu if you prefer.

   

8. Add the Markup to Your Page

Now that you have the generated code, copy it from the tool.

• Paste the Code: Add the code to your webpage, placing it in the <head> section of the page’s HTML.

   

9. Test Your Schema Markup

Once the schema markup is added, it’s important to test it to ensure it’s implemented correctly.

• Use Google’s Rich Results Test Tool: Go to the Rich Results Test Tool, enter your URL or code snippet, and run the test.
   

   

• Review Results: The tool will show errors, warnings, and any detected schema markup on the right side of the screen. If there are any issues, you can edit the code directly in the left section and click the “RUN TEST” button to revalidate.
   

10. Site Audit for Schema Issues

You can also audit your entire site for schema issues using the Site Audit tool.

• Run a Site Audit: Set up an audit for your site and wait for the results.
   
• View Markup Errors: In the Overview tab, look for the “Markup” section. You’ll be given a markup score based on how well your schema is implemented.
   
• Review Errors: If there are any issues, you’ll be able to view detailed error reports. Click on specific errors in the “Affected Fields” column to see what needs fixing.

By following the above steps, you can successfully implement schema markup on your website and improve how your pages appear in search results. Don’t forget to keep testing and validating your schema to ensure it works as expected!