Add semantic data to your WordPress site

Add semantic data to your WordPress site

Online by JSC0d3
October 8, 2016 | | 284 recognitions

Semantic data…sounds dry, right? Well, it’s one of the most exciting things happening under-the-hood of more and more of the websites you visit on a daily basis. And it’s something almost anyone can add pretty easily to their web pages. When you look at a website, you see a certain format, like a header area, navigation bar, maybe a sidebar, content area and a footer. You also see text, images, and video. All of that appears as it does thanks to code, called HTML. HTML basically tells the browser how your content should look – the size and color of the text, headers, etc. You don’t see the HTML code, just the final appearance of the site. Now site owners can add some more unseen code that identifies content as having certain meaning! Here’s how this would look in the code. If your web page says the following: <h1>Jane Apple</h1> a bot can know that that the text is important since it’s wrapped in H1 header tags, but can’t know for sure if the text refers to a person, a fruit, or a computer! But if you add tags to the content that tells a bot what type of content it’s encountering, it becomes “clear” that this is a person. The code with semantic tags would look like this: <div itemscope itemtype=”http://schema.org/Person”>

<div itemprop=”name”><strong>String text</strong></div></div>

The code above uses the schema.org semantic tagging vocabulary. There are many types of semantic data formats available, but recently the three major search engines announced that the vocabulary they prefer and most support is that of schema.org. The schema.org website has lots of information on the many types of semantic tagging available (i.e. people, events, recipes, products and more), and how to implement them in your code.

Why is semantic data important?

Basically, Google’s bots can’t understand the context behind content, yet Google wants to serve up the most relevant data to users. Until the bots achieve a level of artificial intelligence that allows them to accurately identify what content means, Google is basically asking us to help them by spelling it out. In particular, Google’s latest search algorithm update, has placed a strong emphasis on conversational semantic search, like the type of voice searches people execute from their mobile devices. Enriching your content with semantic data can help it appear more in relevant search results.

How can I add semantic data without having to recode my whole site?

The most difficult, yet most thorough way to to add semantic data to your site is to add it to the source code. In WordPress, this would mean adding it to your theme files. You can refer to the schema.org website for guidelines on how to properly add the tags. But for site owners who aren’t comfortable with code, or for those who want to implement semantic data quickly, here are some tools that can make it easier for you:

Schema Creator

Raven, a provider of online marketing management software, created a free service for generating semantic code for your site called Schema Creator. The generator can create semantic code for the following types of content:

  • Person
  • Product
  • Event
  • Organization
  • Movie
  • Book
  • Review

As you can see, it doesn’t cover all the types of content, including some major ones like Recipes. To use their tool, enter the information to be tagged in the form, and then copy-and-paste the code from the Code window into your site.

This isn’t the best approach for a dynamic website like one based on WordPress, but it could be good for marking up the content on a per-page basis. For example, you could use this for your contact page, or for an event you are organizing, or even your staff pages.

Google Structured Data Markup Helper

Google provides a free tool for generating structured data for your entire web page called the Structured Data Markup Helper. This tool allows you to choose the type of data to be tagged, then enter the URL of a page and tag it up by highlighting the various content types and tagging it. It’s a really user-friendly and seamless process.

The problem with this tool is that it generates semantic code per-page, which is good for a static HTML site, but not for a dynamic WordPress site. Luckily, Google also offers a tool that is more suited to dynamic sites…

Google Webmaster Tools Structured Data Tool

Google Webmaster Tools is a system that Google offers for free to website owners for analyzing the performance of a website. Within the system there are numerous useful tools, one of which is the Structured Data tool. You can find it under the Search Appearance section when you’re looking at a specific site within Google Webmaster Tools.

But it also allows you to tag your content with semantic data with the Data Highlighter tool. It works similarly to the Google Structured Data Markup Helper listed above, but instead of working on a per-page basis, it applies itself to groups of pages structured in a similar manner, like all individual blog post pages, or maybe the event pages in a calendar you may have. Once you have finished tagging your site, you submit the data to Google, and do not actually have to modify the code on your site itself. The way this works is both an advantage and disadvantage: it’s really easy to use so pretty much everyone can add semantic data to their site; but only Google will see your semantic data since it’s not actually implemented on the code level. Other search engines, screen readers and other parsers won’t see this data.

Yoast’s WordPress SEO plugin

Facebook, Twitter and Google+ all have their own semantic data that they would like you to add to your website: Facebook has Open Graph, Twitter has Twitter Cards, and Google+ has authorship. This data helps those networks better present your content when shared there. There are a number of tags that can be added, and you can see them all within the presentation above. Lucky for us WordPress users, there is a plugin that adds all necessary tags to your site if you want it too: Yoast’s WordPress SEO plugin. For more information on what type of data Yoast’s plugin can add, and how to configure it for your site, check out the presentation above. And for more on the awesome things Yoast’s plugin does under the hood of your WordPress website, check out my post on WPGarage: 6 reasons Yoast’s WordPress SEO plugin is even more awesome then you realize.

Making sure it all works

So now you’ve added all this data to your site, but how do you know you added it properly? There are a few tools to help you out with that:

  1. Facebook Debugger – this is a Facebook tool that allows you to enter the URL of a page, and get a report on what Facebook Open Graph data on your page is ok, what is not, and what is missing. Tip: if you have added semantic data to your page so that a specific image, title, description etc. appears when it is shared on Facebook, but it’s not working as you’d like, it may be a problem with an older cached version of your page stored in Facebook. By entering your URL in this tool, it also refreshes Facebook’s cache so your post will appear as it should when shared.
  2. Google Structured Data Testing Tool – this is yet another free Google tool. It analyzes the structured data on your page and tells you what’s ok and what’s not.

To wrap up

With tools that make it really easy to add semantic data to your website, you might as well add some today. If the above seems overwhelming, start tagging something small, like your contact page, or staff page, with the Google Webmaster Tools Structured Data tool. Once you’ve done that, you may feel more comfortable to take your journey with semantic data further!

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | April 1, 2019

Images are vital components of every website Before you start questioning the importance of images, just try to imagine your favorite blog or website...

Posted by | March 5, 2019

I’ve been loosely following the noise and #wpdrama surrounding Gutenberg for as long as it has been around and honestly for the most part I’ve...

Posted by | February 24, 2019

To ensure that your site ranks highly in Search Engine Result Pages (SERPs), you’ll need to make it easy for search engine ‘bots’ to explore...

Previous PostBackNext Post

Leave here an impression