If you are thinking of building your website this year, keep in mind that you would have to compete with other sites on the internet.
There are several methods that sites like The Outline and Nomadic Matt implemented to keep themselves at the top of the search engines – schema markup was one of them.
We know that since search engines are increasingly making the most of the structured data, so users now have a lot of tools and markups to help them rank better in the search results automatically. We sure can call it unfair but the fact is Schema markup is significant because the search engines serve their users and not necessarily the webmasters. So displaying rich snippets, and incorporating markups mean better service.
In this article, I will discuss how you can apply schema markup to your webpage. Aside from that, we will talk about what it is and why it is essential.
Before that, do watch the video below as to why you should make a website for your business:
What is schema markup?
As explained in the Search Engine Journal, this form of microdata was developed as a result of collaboration between the top search engines. It includes Google, Yahoo, Bing, and Yandex.
They were able to make a group that can be responsible for developing and maintaining all schemas through Schema.org.
It was invented around the idea to identify the content within an HTML tag to add context to any webpage, an important aspect that led to how search engines function today.
For example, let’s look at the following HTML tag:
This is an example paragraph. After this, I will describe how I will discuss the difference between browsers using schemas and without schemas. Do read it carefully.
Without schemas, most browsers only know that they should display the tag above using the paragraph format. With that in mind, no one would be able to learn whether the paragraph was talking about schemas.
Benefits of having schema markup
Once you apply schema markup on your website properly, you can gain the following:
- Increased visibility on search engine result pages
- Better click-through rates
- Improve page visibility based on your content
- Highlight your page on google search results
Relevant: Rank or Rent Websites
Steps on how to apply schema markup
Now that we learned what schema markup is and its benefits to improve your website’s visibility, let us learn how you can apply it.
In this article, I will discuss two types where you can add them to your pages.
Manual
In this method, all you need is access to your website’s files and an application that would let you edit them.
Step 1. Open your website’s file
Using applications such as Windows Notepad or Notepad++, you should open the page you want to edit. Make sure only to edit your webpage’s HTML file.
At this step, it will be wise to save a copy of the most recent version of this webpage. Doing this will help you have a backup just in case you edited the wrong part.
Step 2. Find a part you want the Schema added
After that, let’s look for a section on your website. Make sure that it is not hidden in
For this tutorial, let’s say that you want to change this part of your website:
Step 3. Add the Schema markup
Once you have something to add schema markup to, you can start by adding the term itemscope – like in this example, the goal is to indicate that it is talking about a movie:
Avatar
✋ Stop worrying about SEO and have me do it for you
PS: Ready to work with the 0.01% of all SEOs worldwide? Click here.
Director: James Cameron
Science fiction
Then, you should also add details about the section:
Step 4. Save your changes
After adding the schema markups in your section, you can save your work. If it does not work correctly, check your website through a snippet testing tool.
Also Read: Wix or Squarespace?
Automated Schema markups
Unlike the previous method, I will introduce a tool that you can use that will help you add schema markups to your website. This will be helpful if you want to update your site right away.
Step 1. Go to Google’s Structured Data Markup Helper
Since Google themselves lent a hand in developing schema markups for all websites, they have made their free tool that you can use to generate the right labels for any of your websites automatically.
Step 2. Choose the data for the data markup tool
Once you load the tool on your browser, the first step is to select whether you are adding the schema markup to add content for your website or email. Then, you have to choose one of the choices available.
Step 3. Fill in the URL of the website or HTML content you want to have a Schema markup
After choosing what type of schema markup you need to add to your content, the next step is to add in the website or HTML snippet of the part you need.
If you opted to add it to a website, you could choose to enter your URL. You can add in the source HTML tags too.
Meanwhile, if you want to add it to your email, you can only add the HTML tags to the tool.
After adding those in, click “Start Tagging” to proceed to the next step.
Step 4. Select which items on the website or email you want to have a Schema markup
The next page looks like the picture below. On the left is the original content that you want to add schema markers to. The right part is a tracker of which information on the page has been filled up for schema markup.
Said tracker would change depending on the data you selected in Step 2.
After that, your next step is to choose which elements need a schema markup and identify the type needed. In this example, you can start by selecting the title then clicking on the “Name” from its tooltip to apply it on the side panel.
After selecting the relevant information on the website or email, you can click the “Create HTML” button to proceed to the next step.
Step 5. Copy the generated schema markup to your Website using CMS.
The next page you will come across will look something like the screenshot above. Notice that on this screen, the content of the right panel is different.
It contains the necessary HTML result that includes the correct schema markup based on what you have done in the previous step.
There are two ways where you can add it to your website. The first method involves selecting the HTML source from your browser and copy-pasting it to a CMS. Meanwhile, you can click the “Download” at the top of the page and add it to your website.
Once you are done, the tool shows you a list of steps that you can take to improve your site in this context.
Step 6. Make use of a structured data testing tool to preview your changes.
Being one of the steps you can take after getting the schema markup is to test it. Google has its schema markup tool, where you can check your current codebase.
Once you navigate to the site, you are asked to fill in the URL or the HTML code snippet before continuing.
For this example, let’s use Neil Patel’s schema markup site. Once you enter the URL into the specified box, you will then be shown the screen below.
On the left is the HTML codebase of the website. Next to it on the right is the schema markup that is present in the codebase. If you click on any of its entries, it will automatically go to the line in the codebase that indicates that exact label.
You can then proceed to edit the content on the left and click the play button to validate the edited schema markup.
Step 7. Save and publish your modified website
Once you are satisfied with your changes in both the data testing tool and the schema markup tool, you can edit your website to reflect these changes right away.
If you are using a paid hosting service for your website, you can send them the file and ask them to update your website this way.
Alternatively, you can manually edit your website’s files in a CMS program such as Microsoft Notepad or Notepad++. Then, you can copy and paste the modified contents inside.
Conclusion
In this article, we explored what schema markups are and how important they are for your websites to stay on top of search results.
We also learned that there are two ways to perform this task. One of the methods involves you manually referring back to Schema.org and editing your website using a CMS. Alternatively, you can use Google’s Data Markup Tool and its Data Testing Tool.
Did this article help you set your website up for success? Check out these other articles to help you even more:
Comment below on your tips on applying schema markups to a website.
