DEV Community

Cover image for An ultimate guide to Schema markup and how to use for SEO?
Harshal Suthar
Harshal Suthar

Posted on • Originally published at ifourtechnolab.com

An ultimate guide to Schema markup and how to use for SEO?

What is Schema markup?
Schema markup is one kind of microdata that you can add to your HTML. It provides important information to search engine or we can say to improve the way search engines read and represent your page in SERPs.

Search engines cannot see/read the website in a way human eyes can, i.e. all the styles and images in a web page which we can see, is just a long text file for search engine, with hundreds of sentences. From all those sentences, to recognize which sentence is email and which sentence is phone number is a very tough job for search engines.

To overcome this, Search engines like Google, Microsoft, and Yahoo are come up with a solution which we called Schema markup - it provides all the web page related information to search engine in a way it understands, in other way schema markup tells the search engine what your data is all about.

Most commonly there are three different formats of schema markups for popular search engines.

  • JSON-LD (Recommended)
  • Microdata
  • RDFa

iFour Technolab uses JSON-LD structured data that it finds on the web to understand the content of the page, here is a JSON-LD structured data snippet that might appear on ifourtechnolab.com, describing the page type, the name of the website, and other details:

Example: (using: JSON-LD)

<script type="application/ld+json">
  {

  "@context": "http://schema.org/",
  "@type": "WebSite",
  "name": "iFour Technolab",
  "alternateName": ["iFour","iFour Technolab","Asp.Net Software Company"],
  "url": "https://www.ifourtechnolab.com/",
  "potentialAction":{
  "@type": "SearchAction",
  "target": "https://www.ifourtechnolab.com/tag?tag={search_term_string}",
  "query-input": "required name=search_term_string"
  }
  }
  </script> 

Enter fullscreen mode Exit fullscreen mode

Let’s discuss some essential details,

  • @type: type is the tag or property which tells the search engine what type of the data it is. And, here type is a website, so the search engine came to know that this page is a website and contains information about the website.
  • name: Here name describes the website name to the Search engine.
  • url: Url describes a website link to the search engine.

Read More: 23 ADVANCED SEO TECHNIQUES TO DOMINATE SERPS IN 2020

Example: (using: Microdata / RDFa)

<div itemscope="" itemtype="http://schema.org/WebSite">
<meta item="" prop="name" content="iFour Technolab">
<meta itemprop="alternateName" content="Asp.Net Software Company">
<meta itemprop="url" content="https://web.archive.org/web/20201126040717/https://www.ifourtechnolab.com/"><form itemprop="potentialAction" itemscope="" itemtype="http://schema.org/SearchAction">
<meta itemprop="target" content="https://web.archive.org/web/20201126040717/https://www.ifourtechnolab.com/tag?tag={search_term_string}">
<input itemprop="query-input" name="search_term_string" required="" type="text">
<input type="submit"> </form></div>

Enter fullscreen mode Exit fullscreen mode

Let’s discuss,

  1. Itemscope indicates the item inside container.

  2. Itemtype describes the type of item, in other words, type of your data content or page, in the above instance it’s ‘Website’.

  3. Itemprop describes properties of a specific item in the above instance it’s a name, alternate name, url, etc. of website.

How does Schema markup help in SEO?

Better user experience with a good ranking factor

There are hundreds of data markup provided by Schema.org for all types of content - from person to organization and from entertainment to legal schedules.

Some of those are:

  • Organization
  • Recipe
  • Article
  • Person
  • Places
  • Products
  • Movies
  • Book reviews
  • Events
  • Software Applications, etc.

In doing so, all these markups are used by structured data markup to provide information to a Search engine, like what your data is all about, and what does it actually mean rather than just random keywords.

Mainly search engines match all this information up to a user’s search query. As a result, this will improve the user’s experience on search engines - in return, it can be a great ranking factor as well.

Extensive Rich Snippets

Structured data markup enhances the rich snippets which displayed under the title of your content in search engine results pages (SERPs) which will make your web page look better.

Take a look at the below example:

Image description

See, how this result contains almost all the information that a user might need.

Here SERPs rich snippet looks way better in comparison to the results which only contain the metadata that Google chooses.

To sum up, Schema markup helps you display the exact information that you want users to see on the rich snippets of your web pages

Boosts Your Website SEO

Schema markup provides targeted metadata than mere keywords. Also, it makes search engines easily understand the content of your web page, and makes web pages easily indexable in comparison to websites without schemas.

Based on one case study, web pages with a structured data markup can rank up to four positions higher than those that do not utilize a data markup.

Therefore, a better schema markup means better SEO.

Schema markup we used

Let’s discuss some of the schema markup used by ifourtechnolab.com to stay ahead on the majority of their competition.

Corporation schema (General category of Organization schema)

Corporation schema elaborates the company introduction, by including the type of company, company name, the official logo, address, contact info, andunique identifying URL, etc. of your Corporation.

There is another value for: "@type": "Corporation" in general is "Organization". Many companies use this value. The organization schema markup helps generate brand signals which enhance the rich snippet of your website presence in the search engine results page (SERPs).

Example: (search: iFour Technolab; Corporation: iFour Technolab; using JSON-LD)

<script type="application/ld+json">
  {
  "@context": "https://schema.org",
  "@type": "Corporation",
  "name": "iFour Technolab Pvt. Ltd.",
  "alternateName": [
  "iFour",
  "iFour Technolab",
  "Asp.Net Software Company"
  ],
  "url": "https://www.ifourtechnolab.com/",
  "logo": "https://www.ifourtechnolab.com/assets/images/logo/logo-ifour-software-company-logo.webp",
  "sameAs": [
  "https://www.facebook.com/ifourtechnolab/",
  "https://twitter.com/consultifour",
  "https://www.linkedin.com/company/ifourtechnolab",
  "https://www.ifourtechnolab.com/",
  "https://www.youtube.com/channel/UCXGOj7M361sk4OoqqcqEs1g",
  "https://in.pinterest.com/i4technolab/",
  "https://www.instagram.com/ifourtechnolab/"]
  }
</script>

Enter fullscreen mode Exit fullscreen mode

Example: (search: iFour Technolab; Corporation: iFour Technolab; using: Microdata / RDFa)

<span itemscope="" itemtype="http://schema.org/Organization">
<meta itemprop="name" content="iFour Technolab Pvt. Ltd.">
<meta itemprop="alternateName" content="iFour, Four Technolab,Asp.Net Software Company">
</span>

Enter fullscreen mode Exit fullscreen mode

FAQ schema

FAQ schema is used when you offer a Frequently Asked Question page or have a page that contains frequently asked questions.

FAQ schema will let you be eligible for a collapsible menu under your search engine result page with the question, that reveals the answer when clicked. It also makes your content or page eligible for FAQ Action shown on Google Assistant.

You should use FAQ schema only if your page contains a list of questions with answers. Else if your page has a single question and users can submit alternative answers, use QA schema instead, which we’ll discuss later in this article.

Example: (using JSON-LD)

<script type="application/ld+json">
  {
  "@context": "https://web.archive.org/web/20201126040717/https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
  {
  "@type": "Question",
  "name": "What kind of technocrats we can hire from you?",
  "acceptedAnswer": {
  "@type": "Answer",
  "text": "<p>iFour has skillful developers in every department with fine experience in multiple project developments. You can hire our Angular developers, SCRUM masters, Front-end and Back-end developers, Project Managers, QA Engineers, Support Engineers.</p>"
  }
  },
  {
  "@type": "Question",
  "name": "Will the hired Angular developers work dedicatedly only for our project?",
  "acceptedAnswer": {
  "@type": "Answer",
  "text": "<p>Of course, yes. Our Angular developers always work dedicatedly on every client project for Full-time only.</p>"
  }
  },
  {
  "@type": "Question",
  "name": "How much time does it take to finish the Angular Project?",
  "acceptedAnswer": {
  "@type": "Answer",
  "text": "<p>Actually, it depends on several factors like business requirements, model and size of the project, integration, customization, required features and functionalities, etc. Depending on these, the timescale may vary.</p>"
  }
  },
  {
  "@type": "Question",
  "name": "How do you ensure that Angular web developers follow company guidelines in terms of acceptable coding practices?",
  "acceptedAnswer": {
  "@type": "Answer",
  "text": "<p>We schedule and follow the weekly peer code review process. Aside of that, our PM would also do code review on regular basis. And before making approval every pull request gets properly reviewed.</p>"
  }
  },
  {
  "@type": "Question",
  "name": "How do you protect our rights and ownership of intellectual property?",
  "acceptedAnswer": {
  "@type": "Answer",
  "text": "<p>You will have total control over our hired Angular developers who would work for you. The whole source code, intellectual property rights, copyrights, etc. would be under your roof. Thus, you own 100% ownership of the Web development project.</p>"
  }
  }
  ]
  }
</script>

Enter fullscreen mode Exit fullscreen mode

Example: (using: Microdata / RDFa)

<h3 itemprop="name">What kind of technocrats we can hire from you?</h3>
<div itemscopeitemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div itemprop="text"><p>iFour has skillful developers in every department with fine experience in multiple project developments. You can hire our Angular developers, SCRUM masters, Front-end and Back-end developers, Project Managers, QA Engineers, Support Engineers.</p>
/div></div></div>
<h3 itemprop="name">Will the hired Angular developers work dedicatedly only for our project?</h3>
<div itemprop="text"><p>Of course, yes. Our Angular developers always work dedicatedly on every client project for Full-time only.</p></div>
<div itemscopeitemprop="mainEntity" itemtype="https://schema.org/Question"><h3 itemprop="name">How much time does it take to finish the Angular Project?</h3>
<div itemscopeitemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div itemprop="text"><p>Actually, it depends on several factors like business requirements, model and size of the project, integration, customization, required features and functionalities, etc. Depending on these, the timescale may vary.</p></div></div></div>
<div itemscopeitemprop="mainEntity" itemtype="https://schema.org/Question"><h3 itemprop="name">How do you ensure that Angular web developers follow company guidelines in terms of acceptable coding practices?</h3>
<div itemscopeitemprop="acceptedAnswer" itemtype="https://schema.org/Answer"><div itemprop="text"><p>We schedule and follow the weekly peer code review process. Aside of that, our PM would also do code review on regular basis. And before making approval every pull request gets properly reviewed.</p></div></div></div>

Enter fullscreen mode Exit fullscreen mode

Speakable schema

Speakable is one of the property ofschema.orgwhich is identical for audio playback using text-to-speech (TTS) within an article or webpage.

Speakable schema markup let search engines to identify content to read aloud using TTS.

Read More: Best Seo Optimization Tips For Podcast That Ranks Easily

Example: (using JSON-LD)

<script type="application/ld+json">
  {
  "@type": "NewsArticle",
  "dateline": "Ahmedabad, India",
  "@context": "https://web.archive.org/web/20201126040717/http://schema.org",
  "speakable": {
  "@type": "SpeakableSpecification",
  "xpath": ["/html/head/title",  "/html/head/meta[@name='description']/@content"]
  },
  "url": "https://web.archive.org/web/20201126040717/https://www.ifourtechnolab.com/why-data-security-should-be-a-top-priority-for-
  businesses"
  }
</script>

Enter fullscreen mode Exit fullscreen mode

There are three kinds of properties used by speakable to identify 'content-locator' values

  • URL references - it uses the id-value of an element in the page being spoken.
  • CSS Selectors - it addresses the content being spoken in the page via class attribute (cssSelector property).
  • XPaths - it addresses the content being spoken in the page via XPaths (an XML view of the content).

Example: (using: Microdata / RDFa)

<metaitemprop ="cssselector"="" content=".title">
<metaitemprop ="xpath"="" content=" html=" "="" body=" " h3"="">
<metaitemprop ="url"="" content="https: www.ifourtechnolab.com=" "="" why-data-security-should-be-a-top-priority-for-businesses"="">

</metaitemprop></metaitemprop></metaitemprop>

Enter fullscreen mode Exit fullscreen mode

Article schema

Article schema markup is mainly used for news and blog posts; it’ll make your content easier to understand for search engines.

There are several types of article schema from which most commonly used are NewsArticle schema and BlogPostingschema.

NewsArticle schema is commonly used for a news article or a piece of investigative report or Newspapers. So, BlogPosting schema is recommended as it’s more specific to what the article is, the more specific your schema is the easier it gets for search engines to understand your site.

Example: (using JSON-LD)

<scripttype ="application="" ld+json"="">
{
   "@context": "http://schema.org",
 "@type": "BlogPosting",
 "mainEntityOfPage":{
 "@type":"WebPage",
 "@id":"https://www.ifourtechnolab.com/blog/why-data-security-should-be-a-top-priority-for-businesses"
   },
 "headline": "WHY DATA SECURITY SHOULD BE A TOP PRIORITY FOR BUSINESSES?",
 "image": {
 "@type": "ImageObject",
 "url": "https://www.ifourtechnolab.com/pics/Why_data_security.webp"
    },
 "datePublished": "2020-09-22",
 "dateModified": "2020-09-22",
 "author": {
 "@type": "Person",
 "name": "Colin Ma"
  },
"publisher": {
"@type": "Organization",
"name": "iFour Technolab Pvt. Ltd.",
"logo": {
"@type": "ImageObject",
"url": "https://www.ifourtechnolab.com/assets/images/logo/logo-ifour-software-company-logo.webp"
}
},
"description": " Data Security is always being a major concern for all domains, no matter whether it is a healthcare software development industry, finance software development industry, aviation software development industry or any other business sector.",
"articleBody": "<p>In previous years, 67 % of small businesses practiced a cyber-attack, and 58 % accomplished a data breach. In the era of the Internet, data security is one of the significant issues to correlate in business..."
}

</p>
</scripttype>

Enter fullscreen mode Exit fullscreen mode

Example: (using: Microdata / RDFa)

WHY DATA SECURITY SHOULD BE A TOP PRIORITY FOR BUSINESSES?

<metaitemprop ="description"="" content="data security=" "="" is=" " always=" " being=" " a=" " major=" " concern=" " for=" " all=" " domains,=" " no=" " matter=" " whether=" " it=" " healthcare=" " software=" " development=" " industry,=" " finance=" " aviation=" " industry=" " or=" " any=" " other=" " business=" " sector"="">
<metaitemprop ="articlebody"="" content="<p>In previous years, 67 % of small businesses practiced a cyber-attack, and 58 % accomplished a data breach. In the era of the Internet, data security is one of the significant issues to correlate in business...">



</metaitemprop></metaitemprop>

Enter fullscreen mode Exit fullscreen mode

Note: articleBody should contain entire body content of your article.

Types of schema markup.

As we already mentioned in this article, there are several types of schema markup or we can say data markup based on the type of your content. We also discuss some of them used by ifourtechnolab.com

Here we are going to discuss some of the commonly used schema markup types.

Person Schema Markup
The Person schema markup is used to describe an individual’s personal details, such as name, birthdate, education, address, and family members, etc.

Example: (search: Mark Zuckbery; organization: Facebook; using: JSON-LD)

<scripttype ="application="" ld+json"="">
{                                      {
"@context": "http://schema.org/",
"@type": "Person",
"name": "Mark Zuckerberg",
"jobTitle": "Founder and CEO",
"worksFor":{
"@type": "Organization",
"name": "Facebook"}
}

</scripttype>

Enter fullscreen mode Exit fullscreen mode

Example: (using: Microdata / RDFa)

<span itemscopeitemtype="http://schema.org/Person">
<meta itemprop="name" content="Mark Zuckerberg">
<meta itemprop="jobTitle" content="Founder and CEO">
<span itemprop="worksFor" itemscopeitemtype="http://schema.org/Organization">
          <meta itemprop="name" content="Facebook">
</span>
</span>

Enter fullscreen mode Exit fullscreen mode

Breadcrumbs Markup

Breadcrumbs schema markup describes the path links that lead to the current page on the website.

Example: (organization: Time; using JSON-LD)

<scripttype ="application="" ld+json"="">
{                  
{
"@context": "http://schema.org/",
"@type": "BreadcrumbList",
"itemListElement":[
   {
  "@type": "ListItem",
  "position":1,
  "item":{
  "@id": "http://time.com/money/section/travel/",
  "name": "Travel"
   }
},
{
  "@type": "ListItem",
  "position":2,
  "item":{
  "@id": "http://time.com/money/tag/tourism/",
  "name": "Tourism"
    }
}]
}

                </scripttype>


Enter fullscreen mode Exit fullscreen mode

Example: (using: Microdata / RDFa)

<metaitemprop ="position"="" content="1">

Travel



<metaitemprop ="position"="" content="2">

Tourism


</metaitemprop>
</metaitemprop>

Enter fullscreen mode Exit fullscreen mode

Video Schema Markup

It’s difficult for search engines to crawl video content. Video Schema Markup helps Google crawl to index the video on the website and helps your video to appear in Google video search.

Example: (organization: Time; using JSON-LD)

<scripttype ="application="" ld+json"="">
{                
  {
  "@context": "http://schema.org/",
  "@type": "VideoObject",
  "name": "How to Stamp Silver Spoons",
      "description": "How to Stamp Silver Spoons",
  "thumbnailUrl": "https://assets1.darbysmart.com/project_photos/photos/000/000/867/large/Stamped-Silver-Spoons-Lifestyle-2.jpg?1425429629",
  "uploadDate": "2016-06-13",
  "duration": "PT0MundefinedS",
  "publisher":{
  "@type": "Organization",
  "logo":{
  "@type": "ImageObject"
  }
  },
  "interactionStatistic":{
  "@type": "InteractionCounter",
  "interactionType":{
    "@type": "http://schema.org/WatchAction"
  }
  }
}

</scripttype>

Enter fullscreen mode Exit fullscreen mode

QAPage Schema Markup

As we discussed earlier in this article, QAPage schema markups are used for pages that answer and discuss a single question. Therefore, this is best suited for forum posts, or pages having a single question and multiple answers

Other schema markups

There are hundreds of other schema markups based on the type of content. For example, software application schema markup to enable rich snippets of an app, or Rating schema markups for highlight feature of other schema and so many.

Test your schema markups

Just like adding schema markup, it is also very important to test your structured data to monitor the health of your web page. And to check if your web page includes any of them.

There are several schema markup testing tools available, but two most popular tools are:

I. Google Structured Data Testing Tool

II. Rich Results Test

Google Structured Data Testing Tool

Enter given url in your browser: https://search.google.com/structured-data/testing-tool/u/0/

This will redirect you to Google’s structure data testing tool as given below.

Image description

Now for testing your structure data

You can either enter your web page url in which you implemented your structure data to the given textbox and “RUN TEST”

Image description

Or you can directly copy and paste your structure data code in the CODE SNIPPET section and “RUN TEST”.

Image description

After test ran successfully your result would look like this:

Image description

Here, it also lists all the schema markups that existon your web page along with their content type, under the Detected Section.

Also, you can run another test by clicking the button on the top right corner “NEW TEST”.

In case of any issue with your structure data, your test would result in an error.

Image description

But, don’t worry about it, along with displaying how many errors are there, schema testing tools are smart enough to show you where and what this error is about, here on the left side of the SDTT screen, it shows which line contains an error or warning. And as of that, it would be easyfor you to solve them.

If needed,you can also take a look at SDTT Error Guide to know more about some common errors and how to fix them.

Image description

Rich Results Test

By using Rich Results Test, you can test your structure data to see if it can generate rich results.

Enter the given URL in your browser: https://search.google.com/test/rich-results

This will open the Rich Results Test tool home screen asshown below.

Image description

Now for testing your structure data.

You can either “TEST URL”, this means the url of your web page which contains any type of schema markup.

Image description

Or you can “TEST CODE”, by pasting your schema markup structure data code.

Image description

If your structure data didn’t contain any error and followed all general structured data guidelines as well as guidelines specific to your structured data type, this means your page is eligible for rich results in Google search.

Also, you can check all the existing schema markup in your page lists as Detected items.

One Stop Solution for Software Development - Enquire Today

Image description

Always make sure that your structure data follows the general structured data guidelines, as well as guidelines specific to your structured data type; otherwise, your structured data might not be eligible for a rich result.

Image description

But there’s no need to worry, because the RRT would display your error type with line number which has an issue. Also, by clicking on the error message it will open your structure data code on the right side of the RRT screen like an image given below,so that you can make an adjustment in your structure data.

Image description

Conclusion

In this blog, we have covered the significant topics of Schema markups in SEO. From this article, you would learn how Schema markups would be helpful for SEO especially with the ranking factor and boost your website SEO with rich snippets. Apart from that, you would also get an idea about different types of Schema markups, testing tools, and rich result tests.These concepts would empower your domain knowledge and SEO tactics for your website.

Top comments (0)