A bit over a week ago I was invited to speak at the second WordSesh online conference. WordSesh is a full day of live WordPress presentations from all over the world. The presentations were live-streamed via Google Hangouts, and you can see my presentation and the video at the end of this post. I spoke about how WordPress site owners and developers can easily add semantic data to their websites.
What is semantic data?
Semantic data…sounds dry and unexciting, and super-techy, 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>Jane Apple</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?
Because Google said so
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, dubbed Hummingbird, 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. It’s important to note that Matt Cutts, Google’s voice-piece, has stated that adding semantic data won’t help your pages rank higher (video). But I think that we can understand that while a site might not appear higher for target keywords, it can appear more “broadly,” i.e. in more places and in more search results where it’s now clear that it’s relevant.
Because it can increase the click-through-rate to your site
I’m sure you’ve seen search results that have more to them than just text, like the search result below:
See the star-rating there? That’s rich data, which is also known as a “rich snippet” in Google jargon. Here’s another example:
See my smiling face? It’s appearing because the post is directly connected with semantic data to my Google+ profile, and my profile picture there. Also, note the breadcrumbs that show you where in the hierarchy of our site this page appears: illuminea.com > Our Blog. This type of search result is thanks to semantic data as well. Various studies have shown that users tend to click through more to richer search results. Since appearing in search results is only the first step, if you can make your site look more appealing to users, you can also increase your chances of reaching step 2, where a visitor actually lands on your site by clicking through from the search result. Twitter, Facebook and Google+ all have their own semantic data you can add to your site to tell their own parsers what content is the title, meta description, and thumbnail image. By adding this data, you can improve how your content appears when shared on social networks. The better it looks, the higher the likelihood that people will click through to read more on your site.
Because it makes your content more accessible to users
Disabled and limited users can get more out of your site through their screen readers with proper user of semantic data.
How can I add semantic data without having to recode my whole site?
Now to the practicalities. 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.
Schema Creator WordPress Plugin
Lucky for us WordPress users, Raven also created the Schema Creator by Raven WordPress plugin. Once installed on your site, it makes it really easy to add semantic code on a per-page basis, and even to your whole site.
On the plugin’s main settings page, you can choose to add itemprop and itemtype to the main body tag or content wrapper, which tags the whole article as an article type. This is useful since it’s a good idea for all blog posts and site pages to be marked as articles.
After installing and activating the plugin, you will notice a new button that will appear above the content editor for pages and posts.
When you click on it, it opens up a dialogue box where you can choose the type of semantic data you want to add, and fields to fill in with the information to be tagged.
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.
Check out this short screencast I made showing you how the tool works: [youtube=http://www.youtube.com/watch?v=DNfmpWrcGis&w=650] 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.
This area shows you how your site’s structured data is performing.
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:
- 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.
- 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!
Presentation and Video
Without further ado, here is my presentation and video from WordSesh.
[youtube=http://www.youtube.com/watch?v=J_zcgp31PwY&w=650]