Schema Markup Guide: Types & Importance in SEO
Schema Markup also termed microdata or structured data is a small piece of code that is embedded into the HTML of the web pages, helping search engines to read and classify data quickly and accurately. The ideal benefit of adding schema is to provide the data in terms of who’s, what’s, where’s, when’s, and how’s to the search engine.
In laymen’s, schema converts unstructured data into structured data which helps search engines to understand the content, context, enhance the organic rankings, and visibility of the web page in SERP (showing most relevant results, based on the search query)
Based on website frameworks and compatibility, there are only 3 types of Schema Code Languages that can be used to add schema markup to the web pages.
-
JSON-LD: JavaScript Object Notation for Linked Data* (Recommended by Google)
JSON-LD is a combined version of code and schema markup and it can be implemented anywhere in the HTML body of the webpage. As per Google, this markup is not interleaved with the user-visible text, which makes nested data items easier to express, such as the Country of a PostalAddress of a MusicVenue of an Event. Also, Google can read JSON-LD data when it is dynamically injected into the page’s contents, such as by JavaScript code or embedded widgets in your content management system. A few commonly used JSON-LD attributes are @context, @type, etc.
JSON-LD Code Example:<script type=”application/ld+json”>
{ “@context”: “https://schema.org”,
“@type”: “Local Business”,
“name”: “Company Name“,
“url”: “company URL“,
“image”: “Logo URL“,
“address”: {
“@type”: “PostalAddress”,
“streetAddress”: “street address“,
“addressLocality”: “Locale area name“,
“postalCode”: “xxxxxx“,
“addressCountry”: “country code”
},
“OpeningHoursSpecification”: {
“dayOfWeek”: [
“Monday”,
“Tuesday”,
“Wednesday”,
“Thursday”,
“Friday”,
“Saturday”
],
“opens”: “00:00”,
“closes”: “00:00”
}
}
</script>DID YOU KNOW?
Based on experts’ opinions, Google, which covers 92.24% of the market share for search engines, prefers JSON-LD wherever possible as it is effectively comprehensible and can be added and eliminated without any significant development efforts
As per Google, it is recommended to add JSON-LD schema code in the <head> section of the HTML; however, it can be placed in the <body> section as well.
-
Microdata
Microdata is one form of structured data that works with HTML5. They are simpler to utilize however can get confusing as they should be implemented with each HTML tag inside the body of the web page.A few commonly used Micro Data attributes are itemscope, itemtype, itemprop, etc
Micro Data Code Example:
<h2 itemprop=”description”>webpage heading details</h2>
<p>Address:</p>
<span itemprop=”address” itemscope itemtype=”http://schema.org/PostalAddress”>
<p itemprop=”streetAddress”>address</p>
<p itemprop=”addressLocality”>City, State Code</p></span>
<p>Tel: <span itemprop=”telephone”>xxxxxxxxxx</span></p>
<p><a itemprop=”menu” href=”URL“>Anchor Text</a></p>
<p itemprop=”openingHours”>From-To 00:00am – 00:00pm</p>
</div>As per Google, it is recommended to add Microdata markup in the page body; however, can be added in the head section as well.
-
RDFA – Resource Description Framework in Attributes
RFDA and Micro Data are very much similar, and it not only works in HTML5 but is a common technology for Linked Data markup in a variety of HTML-like languages. Such as XML documents, SVG documents, as well as HTML4, XHTML1 and XHTML5 documents.
Well, if RDFA is pretty much compatible with various HTML platforms, then why it is not preferred over JSON-LD? Because JSON-LD can be dynamically used (nowadays most of the websites use JavaScript to display lots of dynamic content) and users can read, create code easily. Also, it is a lightweight Linked Data format.
A few commonly used Micro Data attributes are typeof , property, about, datatype, etc
RFDA Code Example:
<h2 property=”description”>webpage heading details</h2>
<p>Address:</p>
<div property=”address” typeof=”PostalAddress”>
<p property=”streetAddress”>address</p>
<p property=”addressLocality”>City, State Code</p>
</div>
<p>Tel: <span property=”telephone”>xxxxxxxxxx</span></p>
<p><a property=”menu” href=”URL“>Anchor Text</a></p>
<p property=”openingHours”>From-To 00:00am – 00:00pm</p>
</div>RDFa is commonly used in both the head and body sections of the HTML page.
Why Schema Markups are Important for SEO?
Gone are the days, when SEO (Search Engine Optimization) is all about optimizing meta tags, heading tags, and sitemaps. With the evolution of Google algorithm updates and advanced search practices, it’s more often about how well your website is structured.
Here are a few most important reasons to must have schema markups on your website
- Improves Organic Click-Through Rates
- Helps to create Rich Snippets
- Helps in Local Schema
- Helps in Promoting Events
- Boost Google’s Knowledge Graph
- Helps search engines to understand webpage content more efficiently
- Enhance website organic ranking
5 Types of Schema You Must Add to Your Website
-
Organization Schema
An organization’s logo, website address, social media profiles, and contact information are part of the Organization Schema type. This schema markup helps to create brand visibility, which can improve the appearance of the Knowledge Graph and website snippets in the SERP. With snippets and visuals, schema markups make your website more informative and engaging in SERPS. Such results are more likely to be clicked. As a result, websites that use schema markup have a better chance of ranking higher than those not.
Organization Schema Template:
<script type=’application/ld+json’>
{
“@context”: “http://www.schema.org”,
“@type”: “Organization”,
“name”: “brand name“,
“url”: “Website URL“,
“logo”: “Complete URL of logo in .png or .jpg“,
“image”: “Complete URL of logo in .png or .jpg“,
“description”: “Company/Brand Description“,
“address”: {
“@type”: “PostalAddress”,
“streetAddress”: “Address of your company“,
“addressLocality”: “Locale Area Name“,
“addressRegion”: “State“,
“postalCode”: “xxxxxx“,
“addressCountry”: “Country Code”
},
“contactPoint”: {
“@type”: “ContactPoint”,
“telephone”: “xxxxxxxxxx“,
“contactType”: “Customer Support/Tollfree”
},
“sameAs”: [
“https://www.facebook.com/abc”,
“https://twitter.com/abc”,
“https://www.linkedin.com/company/abc”,
“https://www.instagram.com/abc”,
“https://www.youtube.com/channel/abc”
]
}
</script>
-
WebSite Schema
This is another very important schema that helps to create the site link search box panel for brand SERPs. “In order to use this schema, make sure you must have a site search option on your website”.Website Schema Template:
<script type=”application/ld+json”>
{
“@context” : “http://schema.org”,
“@type” : “WebSite”,
“name” : “brand name”,
“url” : “brand page url”,
“potentialAction” : {
“@type” : “SearchAction”,
“target” : “URL?s={search_term}”,
“query-input” : “required name=search_term”
}
}
</script>DID YOU KNOW?
“Search Action” can be customized based on your search query data and ideally advised to add it to the home page of a website only.
For Example: Assume you get most of the traffic from the search term “Internet Service Delhi”(highlighted in RED colour in the below sample code), then the alteration in the code will be:
“potentialAction” : {
“@type” : “SearchAction”,
“target” : “url?s={internet-services}“,
“query-input” : “required name= internet-services”
} -
Breadcrumb Schema
The breadcrumb schema markup on a webpage helps to provide information about the page’s position in the website hierarchy. It helps users to explore a website easily and quickly. For the search engine or crawler, it’s another smarter way of figuring out how the website is structured, and at times, Google may also use them in the actual search results, which makes your search results substantially more engaging to users. Breadcrumb Schema Template:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “BreadcrumbList”,
“itemListElement”: [{
“@type”: “ListItem”,
“position”: 1,
“name”: “Home“,
“item”: “Website URL”
},{
“@type”: “ListItem”,
“position”: 2,
“name”: “Category Name“,
“item”: “Page URL”
},{
“@type”: “ListItem”,
“position”: 3,
“name”: “Sub-Category Name“,
“item”: “Page URL”
},{
“@type”: “ListItem”,
“position”: 4,
“name”: “Sub-Sub-Cateory Name“,
“item”: “Page URL”
}]
}
</script> -
SiteNavigation Schema
This schema helps search engines to get a better and prompt understanding of the site structure and navigation elements along with improving the website’s click-through rate.SiteNavigation Schema Template:
<script type=”application/ld+json”>{
“@context”:”http://schema.org”,
“@type”:”ItemList”,
“itemListElement”:[
{
“@type”: “SiteNavigationElement”,
“position”: 1,
“name”: “Navigation Element 1“,
“description”: “Navigation Element 1 Description“,
“url”:”https://example.com”
},
{
“@type”: “SiteNavigationElement”,
“position”: 2,
“name”: “Navigation Element 2 (About us)“,
“description”: “Navigation Element 2 Description“,
“url”:”https://example.com/xyz”
},
{
“@type”: “SiteNavigationElement”,
“position”: 3,
“name”: “Navigation Element 3 (Products)“,
“description”: “Navigation Element 3 Description“,
“url”:”https://example.com/abc”
},
{
“@type”: “SiteNavigationElement”,
“position”: 4,
“name”: “Navigation Element 4 (contact us)“,
“description”: “Navigation Element 4 Description“,
“url”:”https://example.com/pqr”
}
]
}
</script> -
FAQPage Schema
No matter whether your website is new or old, this schema will help you to capture more space in search results which ultimately boost clickthrough rate in no time, if implemented smartly.FAQ Schema Template:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [{
“@type”: “Question”,
“name”: “Question Heading“,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Answer Description”
}
},{
“@type”: “Question”,
“name”: “Question Heading“,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Answer Description”
}
},{
“@type”: “Question”,
“name”: “Question Heading“,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Answer Description”
}
}]
}
</script>PRO TIP?
In order to get your FAQs ranked well in SERP, always try to use simple words, research thoroughly, and adjust the questions’ word length between 30-40 words.
It is evident that one-third of Google’s search results incorporate rich snippets, including schema markup. And here are a few least used schema that varies on the website niche
-
Schema Markup for Software Applications
This schema is implemented in the body of the webpage and is only applicable for websites having software apps (Android and iPhone). Adding this schema helps to enhance the chances of your app being eligible to appear as a rich result. In order to achieve the best results, it is highly recommended to follow guidelines shared by Google.
Software Application Schema Template
<html>
<head>
<title>APP Title</title>
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “SoftwareApplication”,
“name”: “App Title“,
“operatingSystem”: “ANDROID/iPHONE“,
“applicationCategory”: “Category of APP“,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “0.0“,
“ratingCount”: “xxxx”
},
“offers”: {
“@type”: “Offer”,
“price”: “0.00“,
“priceCurrency”: “USD/INR/EURO”
}
}
</script>
</head>
<body>
</body>
</html>Note*
The offer section can be excluded in case not available -
Schema for E-Commerce Websites
Price, Review, and Rating are a few most essential attributes that play a major role to convert users into consumers. And with a plethora of market rivals available online, it is very important to optimize the website in an extraordinary way so that you don’t lose your “top positions in SERP”. Adding product and offer schema can help search engines understand the content and purpose of a web page where the product is listed, which can be a game-changer Structured data, for example, will inform search engines that the page is selling windows and it is a product for sale that is relevant to the question or phrase the user entered. This assists a business page by attracting more users interested in their products and services.
There are multiple ways to implement product schema based on the data provided:
Product Schema with Offer Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product image“,
“description”: “product description”,
“brand”: {
“@type”: “Brand”,
“name”: “brand name”
},
“sku”: “product SKU code“,
“offers”: {
“@type”: “Offer”,
“url”: “Product Page URL“,
“priceCurrency”: “INR“,
“price”: “xxx“,
“priceValidUntil”: “xxxx-xx-xx“,
“availability”: “https://schema.org/InStock”,
“itemCondition”: “https://schema.org/NewCondition”
}
}
</script>
- Product Schema with Review Field Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product Image URL“,
“description”: “product description“,
“brand”: {
“@type”: “Brand”,
“name”: “Brand Name”
},
“sku”: “product SKU code“,”review”: {
“@type”: “Review”,
“name”: “[Name of the Person who has reviewed]“,
“reviewBody”: “[Description of the review]“,
“datePublished”: “[Date of publishing the review in YYYY-MM-DD format]“,
“author”: {“@type”: “Person”, “name”: “brand name“},
“publisher”: {“@type”: “Organization”, “name”: “brand name“}
}
}
</script>
- Product Schema with Aggregate Offer Field Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product image URL“,
“description”: “product description“,
“brand”: {
“@type”: “Brand”,
“name”: “brand name”
},
“sku”: “Product SKU code“,
“offers”: {
“@type”: “AggregateOffer”,
“url”: “product URL“,
“priceCurrency”: “INR“,
“lowPrice”: “xxx“,
“highPrice”: “xxx“,
“offerCount”: “x”
}
}
</script>
-
Product Schema with Separate Aggregate Field Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product image URL“,
“description”: “product description“,
“brand”: {
“@type”: “Brand”,
“name”: “brand name”
},
“sku”: “product SKU code“,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “out of 5“,
“bestRating”: “5”,
“worstRating”: “0“,
“ratingCount”: “xx”
}
}
</script>
-
Product Schema with a combination of Offer Field & Aggregate Field Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product page image URL“,
“description”: “product description“,
“brand”: {
“@type”: “Brand”,
“name”: “brand name”
},
“sku”: “product SKU code“,
“offers”: {
“@type”: “Offer”,
“url”: “product page URL“,
“priceCurrency”: “INR“,
“price”: “xxx“,
“priceValidUntil”: “xxxx-xx-xx“,
“availability”: “https://schema.org/InStock”,
“itemCondition”: “https://schema.org/NewCondition”
},
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “Out of 5“,
“bestRating”: “5”,
“worstRating”: “0“,
“ratingCount”: “xx”
}
}
</script>
-
Product Schema with a combination of the Aggregate offer Field and Aggregate Field
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Product”,
“name”: “product name“,
“image”: “product image url“,
“description”: “product description“,
“brand”: {
“@type”: “Brand”,
“name”: “brand name”
},
“sku”: “product SKU code“,
“offers”: {
“@type”: “AggregateOffer”,
“url”: “product page URL“,
“priceCurrency”: “INR“,
“lowPrice”: “xxx“,
“highPrice”: “xxx“,
“offerCount”: “x”
},
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “Out of 5“,
“bestRating”: “5”,
“worstRating”: “0“,
“ratingCount”: “xx”
}
}
</script>
-
Schema for Local Businesses
As the name implies, this schema is appropriate for locally-based enterprises that help drive nearby users. Implementing Local Business Schema Markup (majorly includes business hours, reviews, images) to a website will enhance changes to be eligible for rich results, and these results can help your brand to stand out in search results, generating higher click-through rates, improving organic traffic, and increasing conversion rate. Additionally, one can also add a Google Maps API that helps users directly make a booking or reservation via search results.
Local Business Schema Template
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “LocalBusiness”,
“name”: “brand name“,
“image”: “logo URL“,
“url”: “Page URL“,
“telephone”: “tollfree/customer support no“,
“email”: “website email address“,
“address”: {
“@type”: “PostalAddress”,
“streetAddress”: “[Address]“,
“addressLocality”: “[City]“,
“addressRegion”: “[State]“,
“postalCode”: “XXXXX“,
“addressCountry”: “country code”
}
}
</script> -
Schema for Event Websites
This schema is ideally impactful for websites that are organizing events, concerts, seasonal festivals. It helps to promote events via Google’s knowledge graph. Here is a screenshot for reference – how it will display in SERP
Event Schema Template (*Music Concert)
<script type=”application/ld+json”>
{
“@context”: “http://schema.org”,
“@type”: “MusicEvent”,
“name”: “name of music event“,
“image”: “music event image URL“,
“startDate”: “Year-Month-DateTDate:00:00-00:00“,
“url”: “Event Webpage URL“,
“location” : {
“@type”: “Place”,
“name”: “place name“,
“sameAs”: “Venue URL“,
“address” : {
“@type”: “PostalAddress”,
“streetAddress”: “address“,
“addressLocality”:”city“,
“addressRegion”:”state“,
“postalCode”:”xxxxxx“,
“addressCountry”:”country code”
}
},
“offers” : {
“@type” : “Offer”,
“url”:”Offer page URL”
}
}
</script>
-
Article Schema for Publisher Sites
Adding article schema to the News Media, blog, and sports-related web page greatly helps enhance search appearance in Google Search Results as well as in Google News.
Article Schema Template
<html>
<head>
<title>Article headline</title>
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Article”,
“mainEntityOfPage”: {
“@type”: “WebPage”,
“@id”: “article/blog page URL”
},
“headline”: “Article headline“,
“Description”: “Article description“,
“image”: [
“https://example.com/photos/1×1/photo.jpg”,
“https://example.com/photos/4×3/photo.jpg”,
“https://example.com/photos/16×9/photo.jpg”
],
“datePublished”: “date and time“,
“dateModified”: “date and time“,
“author”: {
“@type”: “Person”,
“name”: “author name“,
“url”: “author profile URL”
},
“publisher”: {
“@type”: “Organization”,
“name”: “Organization Name“,
“logo”: {
“@type”: “ImageObject”,
“url”: “article/blog image URL”
}
}
}
</script>
</head>
<body>
</body>
</html>Closing Thoughts
Whether you’re starting your SEO journey or are already are in midway. In that case, the above-mentioned basic structured data implementations like organization schema, breadcrumb schema, and FAQ schema will help you boost your brand/business ranking position in SERP immensely.
To get a better understanding of structured data, reach out to Schema.org. It’s a reference website that publishes documentation and guidelines on using structure data markup on various niche-based websites. Furthermore, the primary objective is to standardize HTML tags to be used by webmasters for creating rich results.
WE ARE HERE TO HELP YOU!
With a collective experience of more than 12 years, our SEO experts will help you with all your Schema-related queries. Contact us today, on how to give your website/brand/ business a result-driven structure for SEO and reap the benefits of working with the best digital marketing company at comprehensive pricing packages.
