You might have recently heard some fellow SEOs at the water cooler chatting about structured data, web page markup, and schema.org. However, you’ve never really delved into those topics yourself.
Now is the time to change that.
Why? Because you can take your SEO efforts to the next level with the proper use of structured data on your website.
Simply put: structured data gives Google and other search engines more information about your site. The search engines love that additional information because they use it to better categorize your site and display the information collected from it in the results pages. That gives you more exposure while people who use the search engines have a better experience. Everybody wins.
If you want to see what structured data can do for your site right now, head over to Google and search for “the girl with the dragon tattoo.” In the results list, you’ll see a couple of listings (such as the iMDB listing) that also feature a rating for the movie.
Where did Google get that rating? From structured data on the website.
Visit the iMDB page for The Girl With the Dragon Tattoo and view source. Search for “AggregateRating” on the page. You should see something that looks like this:
<div class=”ratings_wrapper”>
<div class=”imdbRating” itemtype=”https://schema.org/AggregateRating” itemscope=”” itemprop=”aggregateRating”>
<div class=”ratingValue”>
<strong title=”7.8 based on 325,834 user ratings”> <span itemprop=”ratingValue”>7.8</span></strong><span class=”grey”>/</span><span class=”grey” itemprop=”bestRating”>10</span> </div>
<a href=”/title/tt1568346/ratings?ref_=tt_ov_rt”> <span class=”small” itemprop=”ratingCount”>325,834</span></a>
<div class=”hiddenImportant”>
<span itemprop=”reviewCount”>630 user</span>
<span itemprop=”reviewCount”>514 critic</span>
</div>
</div>
What are you looking at here? It’s structured data defined by the schema.org vocabulary. That markup provides Google with additional information about what’s on the web page.
Pay particular attention to this element: <div class=”imdbRating” itemtype=”https://schema.org/AggregateRating” itemscope=”” itemprop=”aggregateRating”>
See the “itemtype,” “itemscope,” and “itemprop” attributes? Those are markup elements.
In this case, the code is telling Google that the element contains an aggregate rating (an “average” rating, really).
What’s the value of that aggregate rating? You can find that in a child element: <span itemprop=”ratingValue”>7.8</span>
And, sure enough, if you look at the Google search results, that 7.8 value is exactly what you’ll see there.
Armed with that additional information about the aggregate rating, Google is able to display the rating score to its users in the search engine results pages (SERPs) so that they don’t even have to click a link to understand the average rating of the movie.
That’s what structured data can do for you. It gives your site additional authority in the SERPs while also providing Google’s users with a better experience.
Don’t take my word for it. Here’s what Google has to say about the importance of structured data:
Not every type of information in schema.org will be surfaced in search results but over time, you can expect that more data will be used in more ways. In addition, since the markup is publicly accessible from your web pages, other organizations may find interesting new ways to make use of it as well.
What, Exactly, Is Schema.org?
What is schema.org and what is its relation to structured data?
You can think of structured data as the way in which the data itself is presented to Google. That’s the coding mechanism you use to inform Google about what’s on the web page. Think of it as a programming language.
However, even with the programming language you still need a vocabulary. That’s where schema.org comes in. It defines that words that you’ll use in the markup to give Google the additional data.
Marking Up Your Site
Now that you’ve got the high-level picture of markup and schema.org, you’re probably asking yourself: “How do I go about adding markup to my website?”
Fortunately, it’s not that complicated at all.
For starters, if you’ve already delegated the development of your website to a team of professionals, they should be able to do it for you.
If you’re running a WordPress website, you’ll be happy to know that you don’t even need a development team to handle the task. You can install a plugin that adds the necessary markup to your site.
If you’re running a website that’s not WordPress or using another CMS, you can still add the markup to your website with relative ease.
Before you do that, though, you have to forget what you saw above.
Why? Because the example cited above uses Microdata and not JSON-LD.
JSON-LD
It’s understandable that iMDB would use the sub-optimal version of markup. That’s because the site is as old as the hills and when its developers first started using markup, Microdata was probably the best choice.
Nowadays, though, another format is preferred: JSON-LD.
JSON-LD stands for “JavaScript Object Notation – Linked Data.” It’s a way to markup your site without actually touching the elements used to display information on the site itself.
If you look at the markup above, you’ll see that it’s embedded directly into the HTML that shows the user the aggregate rating. It can get a bit ugly when you’re trying to show something to users while simultaneously explaining to Google what you’re showing them.
Enter JSON-LD. It describes the information on your site in its own section so as not to disturb the elements that define what the user sees.
JSON-LD, as the name implies, is presented in JavaScript format. That’s why it can easily be included in the header or footer of the page itself, far away from the visual content.
Speaking of that, though, it’s important that you don’t add markup about information that your site’s visitors can’t see. For example, if your visitors can’t see an aggregate rating, you shouldn’t include it in the markup. Google might view that as an attempt to manipulate the search engines and penalize your site.
Here’s an example of JSON-LD markup:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Organization”,
“url”: “https://www.your-company-site.com”,
“contactPoint”: [{
“@type”: “ContactPoint”,
“telephone”: “+1-401-555-1212”,
“contactType”: “customer service”
}]
}
</script>
Pay particular attention to the “@type” attribute above. In this case, you can easily see that the type is set to “Organization.” That tells Google that the markup here defines an organization. That organization can be a business or some type of non-profit entity.
If you look just below the “@type” attribute, you’ll see the “url” attribute. Unsurprisingly, that attribute’s value is the URL of the organization’s website.
Do you see how easy this is? Markup is easy for both humans and computers to read. That’s why it won’t be too difficult for you to add it to your website yourself.
Important Types
As we’ve seen, schema.org defines an “Organization” type that you can use to tell the search engines all about your business. That’s a great place to start if you’re looking to begin with schema.org markup.
For example, you can tell Google where to find your logo. All you have to do is add a simple URL value to the “logo” attribute. It should look something like this:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Organization”,
“url”: “https://www.example.com/”,
“logo”: “https://www.example.com/logo.png”
}
</script>
Local Seo
Keep in mind that if you’re practicing Local SEO, it’s a good idea to use the LocalBusiness type to provide further information to Google about your business. You can use the markup for the LocalBusiness type to inform Google about your hours of operation, address, the types of payment you accept, and other important information. Here’s an example of the markup:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “LocalBusiness”,
“address”: {
“@type”: “PostalAddress”,
“addressLocality”: “Mexico Beach”,
“addressRegion”: “FL”,
“streetAddress”: “3102 Highway 98”
},
“description”: “A superb collection of fine gifts and clothing to accent your stay in Mexico Beach.”,
“name”: “Beachwalk Beachwear & Giftware”,
“telephone”: “850-648-4200”
}
</script>
If your site has a search box use the SearchAction Type
If you’ve got a site search box, you can tell Google all about that as well. You do that with the SearchAction type. Keep in mind that SearchAction, unlike logo, is not a child of Organization. You’ll have to specify SearchAction as its own type. Here’s what it looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “WebSite”,
“url”: “https://example.com/”,
“potentialAction”: {
“@type”: “SearchAction”,
“target”: “https://example.com/search?&q={query}”,
“query-input”: “required”
}
}
</script>
Pay particular attention to the “target” attribute in the code above. You’ll see a URL followed by a “q” request parameter and “{query}”. That informs Google about how searches are conducted on your site.
For e-commerce sites, use the Product type.
If you’re running an e-commerce website, you’ll especially like the Product type. That’s the type you’ll use to describe each of the products that you’re selling. The markup looks like this:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Product”,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “3.5”,
“reviewCount”: “11”
},
“description”: “0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.”,
“name”: “Kenmore White 17\” Microwave”,
“offers”: {
“@type”: “Offer”,
“availability”: “https://schema.org/InStock”,
“price”: “55.00”,
“priceCurrency”: “USD”
}
</script>
It’s important to note here that the markup actually uses two types, not just one. The Product type describes the product itself. But the Offer type, which is a child of the Product type, describes the price.
Review Types
The Review type is also typically a child of some other type, such as Product. As the name implies, it describes a review of the parent type. It’s typical to have several review children to one parent because usually there are several reviewers for a specific product or brand. Here’s what the Review markup looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Product”,
“aggregateRating”: {
“@type”: “AggregateRating”,
“ratingValue”: “3.5”,
“reviewCount”: “11”
},
“description”: “0.7 cubic feet countertop microwave. Has six preset cooking categories and convenience features like Add-A-Minute and Child Lock.”,
“name”: “Kenmore White 17\” Microwave”,
“offers”: {
“@type”: “Offer”,
“availability”: “https://schema.org/InStock”,
“price”: “55.00”,
“priceCurrency”: “USD”
},
“review”: [
{
“@type”: “Review”,
“author”: “Ellie”,
“datePublished”: “2011-04-01”,
“description”: “The lamp burned out and now I have to replace it.”,
“name”: “Not a happy camper”,
“reviewRating”: {
“@type”: “Rating”,
“bestRating”: “5”,
“ratingValue”: “1”,
“worstRating”: “1”
}
}
</script>
Does your site utilize video’s? Use the Video Markup
You’ll be happy to learn that you can also markup video that you embed on your website. That will give Google more information about the video apart from what it can discern from the embed code. Here’s what the video markup looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “VideoObject”,
“name”: “Light at the End of the Tunnel”,
“@id”: “https://videolectures.net/iswc2013_guha_tunnel/”,
“datePublished”: “2013-11-28”,
“author”: {
“@type”: “Person”,
“name”: “Ramanathan V. Guha”
}
</script>
BreadcrumbList
Your website probably has breadcrumbs so that people can easily see where they’re at and where they’ve been. You can mark that up as well using the BreadcrumbList type. Here’s what that looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “BreadcrumbList”,
“itemListElement”:
[
{
“@type”: “ListItem”,
“position”: 1,
“item”:
{
“@id”: “https://example.com/dresses”,
“name”: “Dresses”
}
},
{
“@type”: “ListItem”,
“position”: 2,
“item”:
{
“@id”: “https://example.com/dresses/real”,
“name”: “Real Dresses”
}
}
]
}
</script>
Provide Additional Article Information with the Article Markup
If you’re doing content marketing (and you should if you’re not), you’ll certainly want to make use of the Article type. That gives Google a little more information about your article besides what it can glean from the content itself. Here’s what that markup looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”: “Article”,
“author”: “John Doe”,
“interactionStatistic”: [
{
“@type”: “InteractionCounter”,
“name”: “How to Tie a Reef Knot”
}
</script>
Event Type
Finally, if you host events from time to time, you’ll certainly want to make use of the Event type. That’s a great way to optimize your event for the search engines. Here’s what that markup looks like:
<script type=”application/ld+json”>
{
“@context”: “https://schema.org/”,
“@type”: “Event”,
“name”: “The Missoula Marathon”,
“sponsor”: {
“@type”: “Organization”,
“name”: “Run Wild Missoula”,
“url”: “https://www.runwildmissoula.org/”
},
“startDate”: “2016-07-10T06:00”,
}
}
</script>
Wrapping It Up
The schema.org vocabulary helps you inform Google about the what, where, when, and how regarding anything associated with your business. It’s easy to implement on your website and is an indispensable part of contemporary SEO. If you haven’t added markup to your site already, why not get started today?
