I hope you enjoy reading our blog posts. If you want DCP to build you an awesome website, click here.

How to improve your website SEO using Schema Markup - Beginners Guide to Structured Data 2021

10-04-2021

Back

Schema markup is code that can be added to your website pages which helps search engines to understand the type of content on your website pages and better represent it on the (SERPs) search engine results page.

Throughout this article, I will aim to show you how schema markup (structured data) can improve your website SEO and why you should make it a part of your SEO strategy.

How to improve your website SEO using schema markup beginners guide

What are rich search results?

Rich results are experiences that can appear on Google search as carousels, images, video content, company information, FAQs and other content types.

The main goal of rich results in to enhance a search engine user's experience by displaying more useful information in a search result.

Example: Recipe markup includes data like time to prepare the dish, ingredients, user reviews and recipe images.

When you add Recipe markup to your page, you are telling the search engines:

The recipe takes 45 minutes to prepare
This is the list of ingredients required
Here is a picture of the dish
here are some user reviews

Example Recipe Rich Results

As you can see in the above image, not all the results returned are the same.

The listings that stand out the most have review stars.

The star ratings are part of the schema markup implemented on the website recipe page.

You can view more information about recipe snippet cards here: https://developers.google.com/search/docs/data-types/recipe

Rich search results tend to have a higher click through rate as they are displayed at the very top of Google search results.

Standard search engine result typically only includes a title, URL, and meta description. A rich snippet in a search result page might include additional useful information as shown in the above example recipe cards, the video snippet example below and the event snippet example below.

You may have searched for a "how to task" in Google search and a rich result is returned. YouTube often returns rich results for relevant video content which helps to answer a user's search query.

Below you can see an example of a YouTube rich result returned for a video I created on my YouTube channel.

Example YouTube Rich Result

A Google featured snippet (Rich Result) can greatly improve the visibility of content on your website and also external sites like YouTube and Facebook.

This is a link to the example video that is shown above which I uploaded to my YouTube channel: https://youtu.be/L5uVTEItvHo

Stats for the example YouTube video

As you can see, having a rich snippet (Rich Result) for your content can greatly improve exposure, click through ratios and visitor traffic.

Note: you can also add Video Schema Markup to embedded YouTube videos on your blog posts.

This can apply to content on your website and external content share on other web platforms.

One of the main goals of rich search results is to create a standardised markup (format) to highlight key information about a website page, which then allows a search engine to understand more accurately what that page contains or its purpose.

What is schema markup?

Using structured data (schemas) allows Google and other search engines to target your page content more accurately and serve that page content to fulfil a user's search query. After all, the main goal of all search engines is to serve a user the most relevant content for a given keyword search phrase to improve user experience.

Rich results are generated from specific code added to your website pages. There are 3 main types of code formats that can be used to add structured data to your website:

Schemas are used to markup the content of a web page in ways that can be easily understood by major search engines like Microsoft, Google, Yandex and Yahoo.

Schema markup helps machines like Alexa understand what kind of thing a piece of content is about.

You can view more information about Schemas here: https://schema.org/

Structured data (Schema markup) is a standardised markup format for providing key information about a specified page and categorising the page content.

For example, on an event page the structured data may contain the:

Event name
Start date and time
End date and time
The address location
Event images
Event description
URL link to the event page
Ticket price
Ticket price currency
Performers attending the event
Organiser of the event

Example Google search results for festival keyword

In the above image, you can see the results returned by Google search engine for the keyword Festival.

Google is displaying search results from different websites, in the above example you can see:

The festival event name
The date
The address
The location
An image / Logo

The most important thing to note is the all the listings are consistent.

They all contain the same structured data.

A few important notes:

Google returned search results based on my location.
- I was logged into my Google account when I did the search so Google already knows my location.
- Google can also use your IP address for the GEO location.
There are options at the top of the results to view Today, Tomorrow, This Week, This Weekend etc...
There is an option at the bottom of the results to search for more results.

This is a good example of how structured data (Schema Markup) can help search engines understand the content on a specific page. All pages which implement structured data have to follow a set of rules.

When I click on the first search result I can see more detailed information about the festival event.

Google detailed view of a specific festival

The detailed view as suggests contains specific information about this event. The "key" here is that all the events will contain the same or similarly structured data detailed view.

Rich snippets (RIch Results) often display in Google search results at position zero. A rich result will normally display above all other Google search listings, this also means if you create high-quality content then you can achieve a page 1 Google search result without having to compete with other pages 1 search results.

Rich snippets can be displayed on both desktop search results and mobile search results.

Example mobile rich result for a blog post

In the mobile view example above is the rich result is for a blog post I created here: 30 essential tips for improving your web design in 2021

Below you can see an example of the rich result from Google desktop view.

Example desktop rich result for a blog post

Below you can see the schema markup in JSON-LD format for the above blog post.

Important Note: It is not a requirement to create structured data (schema markup) like above in order for your website content to appear in Google search results as a rich result.

The goal of creating the schema markup is to give Google more specific information about the content on your website page.

If your website pages already have a good structure then Google can generate a rich result without the need of adding schema markup.

The advantage of using schema markup is you can tell Google more specific information about the content on your website page and provide additional metadata like your organisation name, organisation logo, date the articles for created, date the article was modified, a specific image for the article and much more.

There is the potential to improve your search engine rankings if you implement structured data (schema markup) on your website, however, adding markup does not mean that Google or other search engines will show your content as a rich snippet. The most important factor is the actual content on your website pages.

Here is an example explanation from Schema.org

Most webmasters are familiar with HTML tags on their pages. Usually, HTML tags tell the browser how to display the information included in the tag. For example, <h1>Avatar</h1> tells the browser to display the text string "Avatar" in a heading 1 format. However, the HTML tag doesn't give any information about what that text string means—"Avatar" could refer to the hugely successful 3D movie, or it could refer to a type of profile picture—and this can make it more difficult for search engines to intelligently display relevant content to a user.

As you can see in the above image, the Schema project was Founded by Google, Microsoft, Yahoo and Yandex. These are the biggest search engines on the planet working together which is rather surprising!

The main reason why these search engines are working together is simple, data needs to be structured in a specific way to allow search engines to interpret the content on a website page. If all the major search engines decided to use different structures then the web developers are business owners would have to work extra hard to markup content differently for each search engine.

Thank god the "big boys" can play together sometimes :)

Why is schema important?

Schema markup (structured data) allows you to tell the search engines more about your business and what type of content can be found on different pages on your website(s).

Here is a list of the most common types of schema markup

Structure Data Type	Notes	Additional Documentation
Local Business	Business details displayed in the Google knowledge panel, including open hours, ratings, directions, and actions to book appointments or order items.	Click Here
Article	News, sports, or blog article displayed with Top stories carousel and rich result features, such as headline text and larger-than-thumbnail images.	Click Here
Book	Book actions that enable users to buy the book that they find directly from Search results.	Click Here
Breadcrumb	Rich results that display in a sequential list or gallery from a single site. This feature must be combined with one of the following features: Recipe, Course, Restaurant, Movie.	Click Here
Course	Educational courses that appear in a provider-specific list. Courses can include the course title, provider, and a short description.	Click Here
Critic review	A snippet from a longer review article that a single editor has created, curated, or compiled for a publisher. Critic reviews can be about Book, Movie, and Local business.	Click Here
Dataset	Large data sets that appear in Google Dataset Search.	Click Here
Employer Aggregate Rating	An evaluation of a hiring organization compiled from many users that are displayed in the job search experience on Google.	Click Here
Event	An interactive rich result that shows a list of organized events, such as concerts or art festivals, that people may attend at a particular time and place.	Click Here
Fact Check	A summarized version of a credible site's evaluation of a claim made by others.	Click Here
FAQ	A Frequently Asked Question (FAQ) page contains a list of questions and answers pertaining to a particular topic.	Click Here
Home Activities	An interactive rich result where people can discover online activities that they can do from home.	Click Here
How-to	A How-to walks users through a set of steps to successfully complete a task, featuring video, images, and text.	Click Here
Image License	In Google Images, the Licensable badge tells people that license information is available for the image, and provides a link to the license in the Image Viewer, which offers more detail on how someone can use the image.	Click Here
Job Posting	An interactive rich result that allows job seekers to find a job. The job search experience on Google can feature your logo, reviews, ratings, and job details.	Click Here
Job Training (beta)	An interactive rich result that helps job seekers and prospective students find a job training program.	Click Here
Logo	Your organization's logo in search results and Google knowledge panel.	Click Here
Math solvers	Help students, teachers, and others with math problems by adding structured data to indicate the type of math problems and step-by-step walkthroughs for specific math problems.	Click Here
Movie	The movie carousel helps users explore lists of movies on Google Search (for example, "best movies of 2019"). You can provide details about the movies, such as the title of each movie, director information, and images.	Click Here
Estimated salary	Salary estimate information, such as salary ranges and region-based salary averages for job types, displayed in the job search experience on Google.	Click Here
Podcast	Enable your podcast to appear in Google Search with a playable link, or in other Google Podcasts platforms such as the Google Podcasts app, Google Assistant, and more.	Click Here
Practice problems	Help students, teachers, and parents with education by adding structured data to your practice problems in math and science subjects.	Click Here
Product	Information about a product, including price, availability, and review ratings.	Click Here
Q&A	Q&A Pages are web pages that contain data in a question and answer format, which is one question followed by its answers.	Click Here
Recipe	Recipes that display as an individual rich result or part of a host carousel.	Click Here
Review snippet	A short excerpt of a review or a rating from a review website, usually an average of the combined rating scores from reviewers. A review snippet can be about Book, Recipe, Movie, Product, Software App, and Local business.	Click Here
Sitelinks Search box	A search box that is scoped to your website when it appears as a search result.	Click Here
Software App (beta)	Information about a software app, including rating information, a description of the app, and a link to the app.	Click Here
Speakable	Allow search engines and other applications to identify news content to read aloud on Google Assistant-enabled devices using text-to-speech (TTS).	Click Here
Subscription and paywalled content	Indicate paywalled content on your site to help Google differentiate paywalled content from the practice of cloaking, which violates our guidelines.	Click Here
Video	Video information in search results, with the option to play the video, specify video segments, and live-stream content.	Click Here

The above are some of the most common markup types, but there are hundreds of more structured data types.

You can use Schema.org to search for specific structured data types (schema types).

The schemas are a set of 'types', each associated with a set of properties. The types are arranged in a hierarchy.
The vocabulary currently consists of 779 Types, 1390 Properties 15 Datatypes, 81 Enumerations and 437 Enumeration members.

Schema.org also gives you the ability to browse the full hierarchy list of types.

It should be noted that using schema markup could potentially improve your website search engine rankings.

How to use schema markup on your website

For basic schema markup, you can use the Google Structured Data Markup Helper Tool.

1. Go to the Google Structured Data Markup Helper website

2. Select a data type

On the Google Structured Data Markup Helper website, there are options to markup different types of content as follows:

Articles
Book Reviews
Datasets
Events
Job Postings
Local Businesses
Movies
Products
Questions & Answers Page
Restaurants
Sofware Applications
TV Episodes

In this tutorial, I will select Articles.

3. Paste in the website page URL you want to markup

In this tutorial, I will paste in the following URL: https://www.dcpweb.co.uk/blog/30-essential-tips-for-improving-your-web-design

Select the "blue" Start Tagging button

4. A new page will load the Google structured markup tool

You’ll see your web page on the left side, and the markup data items on the right side.

5. Select content on your page to add to mark up fields

On the right-side panel you will see the following fields:

Field Name	General Notes
Name	Title of the article or blog post
Author	Name of the article or blog post author
Date Published	Date article or blog post published
Image	Image thumbnail for article or blog post
Article Section	Category of the article or blog post
Article Body	This field can contain the whole article/blog post or a specific section
URL	Website link to the article
Publisher	Company name
Aggregate rating \| Rating value	Average rating value from 1 to 5
Aggregate rating \| Best rating	Best rating value from 1 to 5
Aggregate rating \| Worst rating	Worst rating value from 1 to 5
Aggregate rating \| Count	The total amount of ratings

To simplify the process, I will use only the fields highlighted in blue in the above table.

5.1. Populate the "name" tag field

To populate the name field simply select the article or blog post title with your mouse as shown below, once the text is selected a pop up will display and then select the "name" field.

5.2. Populate the "Author" tag field

To populate the "author" field I will need to scroll to the bottom of the page and select my name as shown below.

5.3. Populate the "Date Published tag field

To populate the date published field simply select the article or blog post date with your mouse as shown below, once the text is selected a pop up will display and then select the "date published" field.

5.4. Populate the "Image" tag field

I have a thumbnail on the blog post and I will use this image to populate the "image" field as shown below.

5.5. Populate the "Article Section" tag field

The "article section" field should be populated with the category for this blog post, I will need to populate the field manually as shown below. I will update my website to display the article category to make this step easier in the future as I will be able to select the text rather than manually entering information.

5.6. Populate the "Article Body" tag field

The "article body" field can be the full article or a section of the article, I will select the intro section of the blog post as shown below.

5.7. Populate the "URL" tag field

For the "URL" field I will simply paste in the website address for the blog post manually as shown below.

5.8. Populate the "Publisher" tag field

For the "Publisher" field I will select my company's name at the bottom of the article.

6. Create HTML

Select the red "Create HTML" button located in the top right corner.

7. Structured data as JSON-LD markup

Google will generate the structured data in JSON-LD format.
Select all the text and paste it into notepad or another text editor.

Below is a copy of the code Google structured data markup tool generated for my blog post.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"name" : "30 essential tips for improving your web design in 2021",
"author" : {
    "@type" : "Person",
    "name" : "Pankaj Shah"
},
"datePublished" : "2021-03-23",
"image" : "https://cdn.dcpweb.co.uk/userfiles/ckeditor/blog/essential-tips-for-improving-your-website-design/30-essential-tips-for-improving-your-website-design-in-2021.jpg",
"articleSection" : "Website Design",
"articleBody" : "The above question is probably one of the most frequent questions I am asked by my web development clients. It is not a simple question to answer as every client website project is different, but there are some common aspects of web design which all business can take advantage of.</P>nn<P>So, you are probably thinking that the content below is a lot to think about, especially if you are new to business or website design.</P>nn<P>Not to worry, my goal in the article is to breakdown each point and clearly explain why each point is an important factor for improving your website.",
"url" : "https://www.dcpweb.co.uk/blog/30-essential-tips-for-improving-your-web-design",
"publisher" : {
    "@type" : "Organization",
    "name" : "DCP Web Designers"
}
}
</script>

8. Testing Structured data as JSON-LD Markup

Before adding any code to your web pages, it is advisable to test the code.
We can test the structured data markup manually by using the Google Rich Results Testing Tool: https://search.google.com/test/rich-results

Note: At present we do not have the code added to our web page so we need to select the "<> Code" option as shown below.

Select the "<> code" option and paste in the code which you generated using the Google Structured Data MarkupTool.
Select the orange "Test Code" button.

9. Testing structured data results

In the image below we can see the code has validated successfully.

Page is eligible for rich results!

Note: You can see 1 warning as there is a missing field "heading", but this field is optional.

We can fix this warning by simply adding the missing field into our markup code.

The additional "Headline" field is code is highlighted in green below.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"name" : "30 essential tips for improving your web design in 2021",
"headline" : "30 essential tips for improving your web design in 2021",
"author" : {
"@type" : "Person",
"name" : "Pankaj Shah"
},
"datePublished" : "2021-03-23",
"image" : "https://cdn.dcpweb.co.uk/userfiles/ckeditor/blog/essential-tips-for-improving-your-website-design/30-essential-tips-for-improving-your-website-design-in-2021.jpg",
"articleSection" : "Website Design",
"articleBody" : "The above question is probably one of the most frequent questions I am asked by my web development clients. It is not a simple question to answer as every client website project is different, but there are some common aspects of web design which all business can take advantage of.</P>nn<P>So, you are probably thinking that the content below is a lot to think about, especially if you are new to business or website design.</P>nn<P>Not to worry, my goal in the article is to breakdown each point and clearly explain why each point is an important factor for improving your website.",
"url" : "https://www.dcpweb.co.uk/blog/30-essential-tips-for-improving-your-web-design",
"publisher" : {
"@type" : "Organization",
"name" : "DCP Web Designers"
}
}
</script>

We can now re-test our new markup code as shown above by following step 8 above.

Below we can see the new tag for the "headline" field highlighted in yellow.
The warning has also been removed.

10. Improving structured data with additional tags

We can improve the structure data by manually adding the following additional tags for the publisher website URL and the publisher logo.

Below I have added some additional structure data which is highlighted in green colour.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"name" : "30 essential tips for improving your web design in 2021",
"headline" : "30 essential tips for improving your web design in 2021",
"author" : {
"@type" : "Person",
"name" : "Pankaj Shah"
},
"datePublished" : "2021-03-23",
"image" : "https://cdn.dcpweb.co.uk/userfiles/ckeditor/blog/essential-tips-for-improving-your-website-design/30-essential-tips-for-improving-your-website-design-in-2021.jpg",
"articleSection" : "Website Design",
"articleBody" : "The above question is probably one of the most frequent questions I am asked by my web development clients. It is not a simple question to answer as every client website project is different, but there are some common aspects of web design which all business can take advantage of.</P>nn<P>So, you are probably thinking that the content below is a lot to think about, especially if you are new to business or website design.</P>nn<P>Not to worry, my goal in the article is to breakdown each point and clearly explain why each point is an important factor for improving your website.",
"url" : "https://www.dcpweb.co.uk/blog/30-essential-tips-for-improving-your-web-design",
"publisher" : {
"@type" : "Organization",
"name" : "DCP Web Designers",
"url": "https://www.dcpweb.co.uk",
"logo": {
"@type": "ImageObject",
"url": "https://cdn.dcpweb.co.uk/userfiles/ckeditor/dcp-web-designers-logo/dcp-logo-01.jpg"
}
}
}
</script>

In the updated code above we have added additional tags for my main website URL and my company logo under the publisher tags section.

You view a full list of available article markup tags here: https://schema.org/Article

13. Fixing errors and warnings

If the Google Rich Results Testing Tool reports errors then these should be fixed before adding structured data to your website page.

Simply review your markup code and fix the error.

Note: I would suggest you create a basic JSON-LD markup first, then test the code to see if it validate correctly first. You can then save this code as your master file.

Next, you can start to add additional markup tags and validate. If the code validates OK then you can save this as a new file.

Continue to add more structured data tags, if you receive an error after testing then you can compare the previous valid saved file with the new markup code which is showing errors.

This will help you to find where the errors are and fix them.

12. Adding structured data to your website

The method used for adding structured data to your website is dependent on the CMS (Content Management System) you are using.

For WordPress websites I would recommend using one of the following plugins:

The above plugins are probably the simplest method of adding structured data to your website pages. Most of the WordPress plugins will automate a lot of the markup but provide limited coverage of the available schema data structures.

I would suggest it is better to have a good understanding of creating your own schema markup and adding the code directly into your WordPress pages for optimum markup.

Note: You can place the schema structured data markup in JSON-LD format into the <HEAD> or <BODY> of your HTML.

If you have a custom build CMS system, then you can use the Google Tag Manager to inject JSON-LD markup into your pages. Google also recommending using GTM as one of the official options for adding schema markup.

Here are some useful blog posts for using Google Tag Manager for structured data implementation:

Some Shopify themes also support schema markup or you can use a few available apps like JSON-LD for SEO or SEO Manager.

For Squarespace check out this useful article: https://www.briancurb.com/how-to-add-schema-to-squarespace-websites/

Wix you will need to paste in your code under the SEO (Google) option: https://support.wix.com/en/article/adding-structured-data-to-your-site

For WooCommerce website design solutions you can use Yoast WooCommerce SEO plugin

For my blog, I will simply paste the code into the body of the blog post.

It should be noted that if you have access to a good web designer then it should be possible to automate the adding of structured data to your website pages, after all the markup is just a case of filling in different variables with exiting data or using static variables where required.

13. Monitoring your structured data

Google search console does provide some monitoring of structured data. You will need to sign up to Google search console here: https://search.google.com/search-console/about

Once you have verified your website you will be able to see structured data markup validation as shown below.

If I select the "Reviews Snippets" in the menu I will see the results returned.

14. Useful schema markup resources

Website	Link
Schema.org	Here you can find the full vocabulary used for different types of schema markup.
Google Developers	On this website page, Google gives you a basic understanding of how structured data works.
Google Developers	Here you can find the Google search gallery with examples of schema markups.
Google Developers	On this web page, you can learn the fundamentals of structured data by following steps in a Google code lab.
Ahrefs	This is a useful blog post that covers some of the aspects of schema markup and how to use it for SEO.
Yoast	This blog post is especially useful if you are using WordPress and want to learn more about Schema markup.
Yoast	Read this blog post about how Yoast unlisted structured data blocks for schema markup.
Neil Patel	Mr SEO himself covers how schema markup can boost your SEO.
Merkle	This is one of my favourite go-to tools for starting a custom schema markup for a web page.
Video Schema	This is a great tool to use if you want to markup embedded YouTube videos on your website. pages

Article created by: Pankaj Shah | DCP Web Designers

Tell Us Your Thoughts

Releated Posts

26-06-2023

Types of Link Building to Boost Your SEO Ranking

More than half of all online journeys begin with a search, and SEO drives 1000%+ more traffic than social media. And in the world of search engines, Google rules. You probably already know this if you are a marketer or running your business site. Think of the number of companies that invest in link-building year after year. Why else would they go through all that trouble if it didn't bring results?

11-09-2018

Top tips for creating SEO content that ranks high in Google Search Engine

Creating website content that ranks high in search engines is not difficult if you are following best practice. The key here is that Google wants to give a user the best search results for their query. Your goal is to create awesome optimised content which can answer a question, promote a product or service.

19-10-2023

Improve Your SEO with Website Localisation

Thanks to advances in technology, people from all corners of the world can connect and reach global audiences more easily than ever. As businesses expand their ventures beyond borders, one crucial strategy stands out for enhancing online visibility and driving organic traffic: website translation and localisation.

19-07-2022

11 Expert SEO Tips for Small Businesses in 2022

SEO is constantly changing, and if you want your small business to stay ahead of the competition in 2022, you must be up-to-date on the latest trends. In this blog post, we will discuss some expert SEO tips so that your business ranks higher on search engine results pages (SERPs). Follow these tips, and you'll significantly improve your website's visibility and organic traffic.