Schema Markup: Definition, Types, How to Generate, Validate & Add Schema Markup and More.
April 17, 2024
We all want to dominate the top position in Google, and capture as much traffic we could. However, to do that, we must ensure, our site is easily readable by search engines like Google, Bing, Yahoo, etc.This is where SEO practices like xml sitemaps, and schema markup comes to the play.
We have already covered about xml sitemaps, and how it help search engine bots to index your website. In this article, we will learn about Schema Markup, which is an equally important practice that helps content to rank not only in ranking order, but also in other parts of Search Engine Results Page (SERP) as featured snippets, knowledge panel, site links, local pack, rich snippets, and many more.
What is Schema Markup?
Schema Markup, also known as structured data is a type of code that is added to a website’s HTML to make its content understandable to search engines. That means when search crawlers or google bots come to your webpage, they get additional information about the content of the page. This helps your webpage or website rank higher in search engines.
Technically, Schema Markup is a specific vocabulary of tags or microdata that you can add in your site or page’s html code. Adding schema markup tags help search engine to read and represent your page in SERP. Search engines can understand your page content, and display them in rich snippets or enhanced search results.
Schema Markup Example
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "DzinePixel Webstudios",
"description": "DzinePixel Webstudios is a full-service digital agency specializing in web development, design, and digital marketing.",
"address": {
"@type": "PostalAddress",
"streetAddress": "123 Main Street",
"addressLocality": "Bhubaneswar",
"addressRegion": "Odisha",
"postalCode": "751001",
"addressCountry": "India"
},
"telephone": "+91-123-456-7890",
"openingHours": "Mo, Tu, We, Th, Fr 09:00-17:00",
"geo": {
"@type": "GeoCoordinates",
"latitude": "20.2961",
"longitude": "85.8245"
},
"image": "http://example.com/logo.png",
"url": "http://www.example.com"
}
In this example:
- @context: Specifies the context for interpreting the data, indicating that it follows the Schema.org vocabulary.
- @type: Defines the type of entity being described, in this case, a LocalBusiness.
- Name, description, address, telephone, openingHours, geo, image, url: Provide various properties of the LocalBusiness entity, such as its name, description, address, contact details, operating hours, geographic coordinates, logo image, and website URL.
Technical Components of Schema Markup
Schema.org Vocabulary: Schema.org is a collaborative project between Google, Microsoft, Yahoo, and Yandex aimed at creating a common vocabulary for structured data markup. It defines a wide range of schemas for different types of entities, such as articles, events, organizations, products, and more.
Microdata or JSON-LD Syntax: Schema markup can be implemented using either microdata or JSON-LD (JavaScript Object Notation for Linked Data) syntax. Microdata involves adding specific HTML attributes to your existing HTML tags, while JSON-LD is a script-based format that allows you to define structured data separately from the HTML content of your page.
Schema Types and Properties: Each type of entity defined in the schema.org vocabulary has its own set of properties that describe its attributes. For example, a schema type
“Product” might have properties like “name”, “description”, “image”, “brand”, “price”, etc. These properties are used to provide detailed information about the entity to search engines.
Implementation: To implement schema markup on a webpage, you need to identify the relevant schema types and properties that correspond to the content on your page, and then add the appropriate markup using microdata or JSON-LD syntax. This markup is typically added directly to the HTML code of the webpage within the
Is Schema Markup Important In SEO?
Well, the general consensus about Schema Markup being helpful for SEO is Positive. Most SEO analysts believe that it helps webpage to rank higher in Google, and some even see more keywords being ranked after they put schema markup in their webpage’s HTML.
There are some who argues that Schema Markup is only beneficial for users, as they help users to get information right on the results page. This is also known as Zero-Clicks Searches, where user get all the data they need just by typing the query, without visiting the website. Although this is helpful for users, does it helpful for websites, since they miss out traffic.
Meanwhile some argues that even though zero click searches appears counterproductive for website owners, but search engines might reward these sites with more traffic. At the same time, some believe schema markup doesn’t directly affect SEO. It depends what schema types you use.
For instance, if you use schema for reviews, then it can make your snippet stand out from the crowd, and drive in more traffic. Types like LocalBusiness help Google to verify your business. It may not directly help in ranking, but it might help with Google My Business (GMB). So that when someone searches businesses near them, your organization may pop up on the Local Pack or Local 3-Pack.
How Does Schema Markup Work?
To understand this, you need to know what Schema is made of. We make you understand this process in 3 simple phase.
Phase 1: Schemas are Developed
Schema is a code comprising a structured vocabulary called Schema.org, developed in collaboration with major search engines like Google, Bing, Yahoo and Yandex. There are a wide variety of schemas or schema types that you can use to define or classify your site’s content. This includes properties like events, products, organizations, entities, people, etc.
Phase 2: Schemas are Added for Search Engines
To add schema markup, you need to find the ideal schema for your page and the contents within. These schemas are available in code snippets, usually in JSON-LD format. These code snippets contain structured data elements.
For instance, if you want to add schema for your organization, then you have common schema types for organizations such as “Organization”, “LocalBusiness”, “Corporation”, etc.
Note: Scroll Below if you want to know how to add schema markup in html.
Phase 3: Search Engines Get the Context of Your Site
Once you add the schema, crawling and indexing will be better.
How?
Well, the next time search engines crawlers come to crawl your site, they will parse the structured data. This is help the crawler to understand the meaning and context behind the webpages. As a result, search engines can display rich snippets, or enhanced results in Search Engine Results Page (SERP).
For example, if you want to add reviews and ratings for your products or services, you can use schema type “review”, & “Aggregaterating” in your page’s html. Similarly, if you want to add prices, Schema Types “offer”, and “product” is the one you should go for.
What Is Schema Markup Used For?
Schema Markup provides additional context about your webpages to search engines. This increases the chances of your pages’ being displayed in search engine results in formats other than the traditional ranking.
What better way to help you understand than by providing an example?
Lets say someone search “dzinepixel” in Google. Now in traditional format, your search engine results will look like this:
However, after adding schema, the results has improved drastically. Now when someone search “Dzinepixel” in Google, the result page will look like this.
As you can see, Google has classified each contents of the site into different elements. You can get these results for your site through adding Schema Markup.
Adding Schema Markup Improves Page’s Visibility
Schema Markup or Structured Data improves your site/page’s visibility by featuring them in rich snippets such as ratings, product reviews, event details, opening/closing time for local businesses, products/services including pricing for ecommerce sites, and more. This makes your page more appealing to users, encouraging them to click and visit your page.
Schema Provides More Relevant Results
Remember the number of time you entered a page for some information only to realize that you have wasted your time. Now, if you are a website owner, this could be counterproductive for your business. If users leave your site because they couldn’t find what they are looking for, then it will increase your bounce rate, and Google may drop the ranking.
Schema Markup helps search engine understand the relevance of your content, leading to more accurate display of search results. This way users will know what they are going to get when they visit your site.
Schema Gets You in Featured Snippets
Schema markup can increase the likelihood of your content being featured in rich snippets, which are summaries of information displayed at the top of search results. Featured snippets can significantly increase the visibility of your content and establish your website as a credible source of information.
Schema is Best for Voice Search Optimization
The rise of voice search has created a massive shift in the way users interact with search engines. Structured data aka schema can help search engines understand your content more precisely, and improves its chance of getting featured in voice search result.
To feature your page in voice search optimization, you can follow this example:
The schema type we use for voice search optimization is “VoiceAction”.
{ "@context": "http://schema.org", "@type": "VoiceAction", "agent": { "@type": "Organization", "name": "DzinePixel", "logo": "https://www.dzinepixel.com/wp-content/uploads/2022/10/logo.png" }, "query": "Web design trends 2024", "result": { "@type": "BlogPosting", "headline": "Top Web Design Trends for 2024", "description": "Explore the latest trends in web design for 2024, including examples and insights.", "image": "https://www.dzinepixel.com/wp-content/uploads/2024/02/style.jpg", "url": "https://www.dzinepixel.com/blog/web-design-trends-2024/", "author": { "@type": "Organization", "name": "DzinePixel" }, "datePublished": "2024-04-12", "interactionStatistic": { "@type": "InteractionCounter", "interactionType": { "@type": "VoiceSearchAction" }, "userInteractionCount": 128 } } }
Explanation:
@type: Specifies the type of schema, which is “VoiceAction” for voice search results.
agent: Specifies the organization responsible for the content, in this case, DzinePixel.
query: Represents the voice search query made by the user, such as “Web design trends 2024”.
result: Provides information about the result of the voice search.
@type: Specifies the type of result, which is “WebPage” in this case.
name: Title of the search result, such as “Top Web Design Trends for 2024”.
description: Brief description of the result.
image: URL of an image associated with the result.
url: URL of the page containing the result.
interactionStatistic: Tracks user interactions with the result.
interactionType: Specifies the type of interaction, which is “VoiceSearchAction” for voice searches.
userInteractionCount: Indicates the number of times the result was accessed in response to voice searches, for example, “128” times.
Note: VoiceAction is not recognized by Schema.org, so you need to validate it through JSON Schema validator.
Schema is Extremely Useful in Local SEO
For businesses with physical locations, schema markup can enhance their presence in local search results with the right Local SEO Strategies. By marking up key information such as business name, address, phone number, and operating hours, businesses can improve their visibility in local searches and attract more customers to their physical locations.
Example of Schema for Local Business
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "DzinePixel",
"address": {
"@type": "PostalAddress",
"streetAddress": "DCB-419, DLF Cybercity, Infocity, Patia",
"addressLocality": "Bhubaneswar",
"addressRegion": "Odisha",
"postalCode": "751024",
"addressCountry": "India"
},
"telephone": "+918847853679",
"email": "business@dzinepixel.com",
"openingHours": "Mo-Sa 10:00-18:00",
"geo": {
"@type": "GeoCoordinates",
"latitude": "20.3495873",
"longitude": "85.807801"
},
"image": "https://www.dzinepixel.com/wp-content/uploads/2022/10/logo.png",
"url": "https://www.dzinepixel.com/",
"description": "DzinePixel offers professional web design and development services.",
"sameAs": [
"https://www.facebook.com/dzinepixel",
"https://twitter.com/dzinepixel",
"https://www.instagram.com/dzinepixel"
]
}Types of schema markup
Schema markup offers a wide range of types that cover various aspects of structured data.
Here are some common types of schema markup:
- Organization: Describes a specific organization, including its name, logo, contact information, and social media profiles.
- LocalBusiness: Provides information about a local business, such as its address, phone number, opening hours, and geographic coordinates.
- WebSite: Defines a website, including its name, URL, potentialAction, and author information.
- Person: Represents an individual person and includes details such as their name, job title, and contact information.
- Product: Describes a product, including its name, description, brand, image, price, and availability.
- Event: Specifies details about an event, such as its name, start date and time, end date and time, location, and organizer.
- Article: Represents an article or blog post and includes properties such as headline, date published, author, and main content.
- Review: Provides information about a review of a product, service, or other entity, including the reviewer’s name, rating, and review text.
- BreadcrumbList: Defines a breadcrumb trail for navigation purposes, indicating the hierarchy of pages on a website.
- FAQPage: Specifies a page containing frequently asked questions (FAQs) and their corresponding answers.
- Recipe: Describes a recipe, including ingredients, instructions, cooking time, and nutrition information.
- VideoObject: Represents a video file or stream, including properties such as name, description, duration, and thumbnail URL.
How to Create Schema Markup?
Here’s a step-by-step guide on how to create schema markup:
- Identify Content to Markup: Determine which content on your website you want to mark up with schema markup. This could include products, articles, events, local businesses, recipes, and more.
- Choose Schema Type: Visit the Schema.org website and browse the available schema types to find the most appropriate one for your content. Each schema type has specific properties and guidelines for implementation.
- Write JSON-LD Markup: Use JSON-LD (JavaScript Object Notation for Linked Data) to define the structured data for your content. JSON-LD is a preferred format for schema markup as it’s easy to read and implement.
- Define Properties: Within the JSON-LD markup, define the properties and values for the chosen schema type. These properties will vary depending on the schema type you’ve selected. Refer to the Schema.org documentation for guidance on which properties to include for each schema type.
- Implement Markup in HTML: Once you’ve written the JSON-LD markup, insert it into the HTML code of your web pages. Place the JSON-LD markup within the
What Is Schema Markup Generator?
A schema markup generator is a tool or software application designed to help website owners and developers create structured data markup for their web pages easily and efficiently. These generators typically provide a user-friendly interface where users can input information about their content and select the appropriate schema types and properties.
What Is Video Schema Markup?
Video schema markup is a type of structured data markup that provides search engines with
additional information about video content on web pages. It helps search engines understand the context of the
video, its content, and its relationship to the surrounding content, leading to richer and more informative search
results.
Video schema markup uses the Schema.org vocabulary to define properties and attributes
related to video content. Here are some key elements commonly included in video schema markup:
- Name: The title or name of the video.
- Description: A brief description of the video content.
- Thumbnail URL: The URL of the thumbnail image associated with the video.
- Content URL: The URL of the video file or streaming service where the video can be accessed.
- Duration: The length of the video in ISO 8601 duration format (e.g., “PT1M30S” for 1 minute and 30 seconds).
- Upload Date: The date and time when the video was uploaded or published.
- Embed URL: The URL used to embed the video on other websites.
- Keywords: Keywords or tags associated with the video content.
- Interaction Count: The number of interactions (e.g., views, likes, comments) the video has received.
- Author: The entity or person responsible for creating the video.
- Publisher: The entity or organization that published or distributed the video.
When to Add Schema Markup?
Schema markup implementation can happen any time. Although it is recommended to be added
before your site going live, you can add them later, or anytime you want.
Here are some key points to consider regarding when to add schema markup:
- During Website Development: If you’re building a new website or redesigning an existing one, incorporate schema markup into the development process. This ensures that structured data is integrated into your website from the beginning, providing search engines with valuable information about your content right from the start.
- When Adding New Content: Whenever you create new content for your website, such as blog posts, product pages, events, or articles, make sure to include schema markup alongside the content creation process. This helps search engines understand the context and relevance of your new content more effectively.
- Before Launching a Marketing Campaign: If you’re planning to launch a new marketing campaign or promotional activity, consider adding schema markup to relevant landing pages or promotional materials. This can enhance the visibility and performance of your campaign in search results, increasing its effectiveness.
- When Updating Existing Content: Periodically review and update your existing website content to ensure that it’s optimized for search engines. As part of this process, add schema markup to any content that doesn’t already have it, or update existing markup to reflect changes or improvements in your content.
- As Soon as Possible: If you haven’t already implemented schema markup on your website, don’t delay in doing so. Adding structured data to your website can provide immediate benefits in terms of search engine visibility, user experience, and click-through rates. The sooner you add schema markup, the sooner you can start reaping the rewards.
Where to add schema markup in website?
Schema markup should be added to the HTML code of your website, specifically within thesection or directly within the content that you want to mark up.
Here are some common locations where you can add schema markup on your website:
Section of HTML: You can include schema markup directly within the section of your HTML code. This is typically done using JSON-LD (JavaScript Object Notation for Linked Data) format.
Place the JSON-LD markup within a Within Content Sections: You can also add schema markup directly within the content sections of your webpage, particularly for content types such as articles, blog posts, products, events, and reviews.
Place the JSON-LD markup within the
How to Use Schema Markup Validator to Validate Schema Code?
While there are several schema validators available online, today we are going to use the
official
schema validatorof Schema.org Once you open the official schema validator link, you
will see this page below.
Now you see two options in front of the screen- Fetch URL and Code Snippet.
CODE SNIPPET
Click on the CODE SNIPPET tab if you want to validate your schema. It will look like the image below.
Now paste the code into the “paste your code” area. I have pasted the code that I used as an example above. After you paste your code, click on RUN TEST.
If your code is correct, it will be displayed on the right side in the way as displayed above.
If any errors or inconsistencies are found in the schema markup, the validator identifies them and provides detailed feedback on what needs to be corrected. This may include missing required properties, incorrect data types, or invalid formatting.
FETCH URL
If you have a website and you want to make sure whether it has schema in it, you can use Fetch URL.
Enter your website or webpage address, Click RUN TEST.
If your webpage/website has schema in it, it will display on the right side. Dzinepixel.com has two schema types – WebPage, and WebSite in it, which is being displayed on the image above.
FAQs about Schema Markup
What is the Code for Schema Markup Address?
Schema markup for addresses is used to provide search engines with structured data about the physical location of a business, organization, event, or any other entity with a specific address. It helps search engines understand the address information more accurately and display it in search results in a structured format, potentially enhancing the visibility and relevance of the information to users.
Here is an example of how you can use schema markup to represent an address:
In this example:
Your Company Name
123 Main Street
City,
State
12345
Country
- The element represents the organization (or entity) to which the address belongs, with the itemtype attribute set to “http://schema.org/Organization”.
- The organization’s name is specified using the itemprop=”name” attribute.
- The address information is contained within a nested element with the itemtype attribute set to “http://schema.org/PostalAddress”.
- Specific address components such as street address, locality (city), region (state), postal code, and country are specified using the appropriate itemprop attributes.
What is the Code for Schema Markup Aggregate Rating?
Schema markup for aggregate rating is a structured data markup used to provide information about the overall rating or review score of a product, service, or entity based on multiple individual ratings or reviews. It helps search engines understand and display the aggregated rating information in search results, potentially improving the visibility and click-through rates of the item in search listings.
Here’s an example of how you can use schema markup to represent aggregate rating:
In this example:
Product Name
4.5 out of 5 based on 100 ratings and 50 reviews.
- The element represents the product to which the aggregate rating belongs, with the itemtype attribute set to “http://schema.org/Product”.
- The product’s name is specified using the itemprop=”name” attribute.
- The aggregate rating information is contained within a nested element with the itemtype attribute set to “http://schema.org/AggregateRating”.
- The ratingValue property specifies the overall rating score, while the bestRating property specifies the highest possible rating score.
- The ratingCount property indicates the total number of ratings received, and the reviewCount property indicates the total number of reviews.
What is the Code for Author Name in Schema Markup?
Schema markup for authors is used to provide search engines with structured data about the author of a piece of content, such as an article, blog post, or book. It helps search engines understand the authorship information more accurately and display it in search results in a structured format, potentially enhancing the visibility and relevance of the content to users.
Here’s an example of how you can use schema markup to represent author information:
John Doe
Author description or biography.
In this example:
- The element represents the author, with the itemtype attribute set to “http://schema.org/Person”.
- The author’s name is specified using the itemprop=”name” attribute.
- Optionally, the author’s image can be included using the itemprop=”image” attribute within a nested element of type “https://schema.org/ImageObject”.
- A brief description or biography of the author can be included using the itemprop=”description” attribute.
- The sameAs property is used to specify social media profiles associated with the author. Each social media profile is represented as a separate element within a nested element of type “https://schema.org/SocialMediaProfile”.
How to Add Schema Markup to Shopify?
- Access Your Shopify Admin: Log in to your Shopify account and navigate to the “Online Store” section.
- Choose Your Theme: Select the theme you want to modify by clicking on “Themes” under the “Online Store” menu.
- Edit Code: Click on the “Actions” dropdown menu for your chosen theme and select “Edit code.” This will open the theme code editor.
- Locate Theme.liquid File: In the theme code editor, locate and click on the “theme.liquid” file. This file contains the HTML structure for your entire website.
- Add Schema Markup: Within the section of the “theme.liquid” file, add the schema markup using JSON-LD format. You can add schema markup for different types of content, such as products, articles, and breadcrumbs, depending on your requirements.
- Save Changes: After adding the schema markup, save the changes to the “theme.liquid” file.
- Test Schema Markup: Use Google’s Structured Data Testing Tool or other schema markup validators to test your schema markup and ensure it’s implemented correctly.
- Repeat for Other Templates: If necessary, repeat the process for other templates in your theme, such as product pages, collection pages, or blog posts, to add specific schema markup for different types of content.
- Backup Your Theme: Before making any changes to your theme code, it’s essential to create a backup of your theme. This will allow you to revert to the original version if needed.
- Monitor Performance: After adding schema markup, monitor the performance of your structured data in search results using tools like Google Search Console. This will help you track any improvements in search visibility and ensure that search engines are correctly interpreting your structured data.
How to Add Schema Markup to WordPress without Plugin/Manually?
When it comes to add schema markup to WordPress without a plugin, you have to manually
edit your theme files or individual posts/pages to include the structured data.
Here’s a step-by-step guide to add schema markup without a plugin:
- Identify the Schema Markup: You can find the appropriate schema type by visiting the Schema.org website and browsing the available schema types.
- Access Your WordPress Theme Files: Log in to your WordPress dashboard and navigate to Appearance & Theme Editor. Alternatively, you can access your theme files via FTP by connecting to your hosting server.
- Edit the Theme Header File (header.php): Locate the header.php file in your theme editor and add the schema markup within thesection of your website. You can add JSON-LD structured data directly within the
How to Add Schema Markup in WordPress with a Plugin?
To add schema markup to your WordPress website, you have several options, including using plugins, manually adding markup to your theme files, or using a combination of both. Here’s a step-by-step guide on how to add schema markup in WordPress:
Using Plugins:
- Install a Schema Markup Plugin: There are several WordPress plugins available that can help you add schema markup to your website easily. Some popular options include Yoast SEO, Schema Pro, and WP SEO Structured Data Schema.
- Activate the Plugin: After installing the plugin, activate it from the Plugins page in your WordPress dashboard.
- Configure Plugin Settings: Depending on the plugin you choose, you may need to configure settings related to schema markup. Follow the plugin’s documentation or on-screen instructions to set up the plugin according to your needs.
- Add Schema Markup to Content: Once the plugin is set up, you can start adding schema markup to your content. Most plugins provide options to add schema markup to individual posts, pages, or custom post types.
- Select Schema Type: Choose the appropriate schema type for your content. This could be Article, Event, Product, Recipe, etc., depending on the nature of your content.
- Fill in Schema Fields: Enter relevant information in the schema fields provided by the plugin. This may include details such as title, description, image, date published, author, etc.
- Save Changes: After adding schema markup to your content, save the changes, and publish or update the post/page.
- Test Schema Markup: Use Google’s Structured Data Testing Tool or other schema markup validators to test your schema markup and ensure it’s implemented correctly.