How Can You Add Schema Markup To Your Page?

07 Jun 2022

How Schema Blog-featured blog image-2

In a previous blog, we discussed what schema markup is and how it can help your company display prominently on the first page of search results. We highly recommend reading that article before continuing here.

Schema Markup and How it Can Help Your B2B Company

As a quick reminder in case you didn’t read the previous blog, Schema markup was created to have a “common language” between search engine crawlers and webpages. This allows search engines to understand the content of each page and serve better results to searchers. In addition, this markup can make your pages eligible to be featured as rich snippets, or enhanced display results. These rich snippets have been proven to drive up CTR and bring more relevant people to your page.

Now that you have the basics down of what Schema markup can do for you, let’s discuss how you can implement it across your B2B website. 


How Do You Implement Schema Markup?

Before we dive into the how of adding Schema markup to your page, it’s important to mention that there are three types of Schema code language:

  • Microdata - Microdata makes your data easily readable to search engines but can get messy during implementation since they need to be implemented alongside each HTML tag on a page
  • Resource Description Framework in Attributes (RDFA) - RDFA - Similar to Microdata but with a slightly different vocabulary.
  • JavaScript Object Notation for Linked Data (JSON-LD) - JSON-LD is the most widely used Schema language and is the language Google prefers to see. It is also the easiest to generate and implement as it can be placed anywhere in the HTML of a page. We recommended using JSON-LD.

To start with, you should know that there are various plugins and platforms, such as Schema Pro and Yoast, that can auto-generate Schema for your pages. While this is much better than not having Schema at all, we have seen better success when Schema was manually added to our pages. 


The great thing about adding the markup manually is it’s not difficult and you don’t need a deep knowledge of coding or website development to implement it. In fact, if you have access to the backend of your website, you can simply and easily do it yourself without any developers. And writing the Schema is even simpler!

How do you write Schema markup?

Thankfully, there are multiple tools that assist you in writing your markup. These tools allow you to add your relevant content into predefined fields and the tool will then spit out the complete HTML code needed to add to your code. Our favorite tools are Merkle and RankRanger. They cover most of the available options and make it very easy to implement, test, and verify your data. 


In the example below you can see how we implement an “article” schema for one of our blogs. 


  1. Choose the type of schema you want to add from the dropdown menu. In this case, we’re choosing “Article” for our blog. You’ll see a template load on the page

  2. You can narrow down the type of “Article” that you have. In this case, we choose “Blog Posting”. 
  3. Input the relevant information in the open field questions; this includes the URL, title, description, date published, author, and more. As you fill in the fields, you will see the template update on the right. You do not need to fill all the fields.

  4. Test your code - When you’ve added all the content, copy your code and head to the Schema Structured Data Testing Tool (you can get there by clicking the Google button on the top right of the page). Paste your code and click the play button. This will tell you how Google will “read'' your code and highlight any warnings or errors that you have. The testing tool conveniently highlights the places where you have an error on the left and on the right side, and goes into some more details. The explanation on the right side usually tells you what the error is but doesn’t always tell you exactly how to fix it or where it is. You may need to play around and try a few things but in our experience, the error can often be a missing quotation (“) at the beginning or end of a line of the code, a missing comma (,), or curly brackets “{“. These can many times be accidentally erased when inputting your data or when copying and pasting. It can sometimes be frustrating to find the small detail but don’t worry, it’s usually a pretty simple fix.

  5. Add the code to your page - This is obviously dependent on your site hosting. We will show an example on HubSpot and on WordPress. 

HubSpot 

  1. On HubSpot, it is quite simple to add the code to your page. Once you are on your “landing page” or “website page”, go to the “settings” tab, and scroll down and open “advanced settings”. 
  2. Here, you can add the code to either the header or footer section of your code. We suggest putting it in the header so that the search engine can “read” it as soon as possible, but if you want to put it in the footer for page speed reasons, that is fine. 

WordPress

With WordPress, things are always a little more tricky. As we mentioned in our last post, you can use plugins that will give you an option to add Schema such as WP SEO and All-in-One Schema. You can also have your developers create a dedicated field where you can add your markup that will automatically be placed into the header.


Another option would be to add your markup manually on your pages by utilizing the “custom fields” option and the code into the header.php. In this case, your developer (or maybe you don’t have one), needs to then take that code and add it to the header.php. While this may sound simple, if you somehow delete or accidentally change something in the header.php, this can cause your site to break. It is because of this that we strongly recommend working with your developer to add schema markup to your WordPress site if you're not using a 3rd party tool to either build you a dedicated field (where you will then be able to copy & paste any code in the future) or if you utilize the “custom field” option. 


After you add the code to your page you should then test your page to make sure that search engines are reading the markup correctly. You can do this using the same Schema markup generator as before. This time, click “new test” and choose the “fetch URL” option, put in the URL of your webpage and test. Hopefully, everything comes back all right, if not, then there was a mistake when you copied and pasted your code into your webpage. You can use the same method as previously discussed to find and fix your mistake. 


Conclusion

The hardest part about implementing your Schema markup correctly is making sure that you have a proper place to add it. Once you have this capability, it is super simple to start improving your organic results on the SERP and making strides in your SEO strategy. 


 

Written by Guest Author: Daniel Stroh

Daniel Stroh is a seasoned Digital Marketer with a specialization in SEO

Subscribe For
Curated Content
on B2B Inbound Marketing, Revops, & More.