Structured Data: Better SEO With Schema Markup

structured-data-better-seo

structured-data-better-seo

Structured data is a somewhat new way to optimize your website for on-page SEO.  It’s often looked over by webmasters because it’s new.. and also because it seems very confusing and difficult. However, after reading this guide you will be able to use schema markup on your website to gain position in the search engines.

What is structured data?

Google says, “Structured data refers to kinds of data with a high level of organization, such as information in a relational database. When information is highly structured and predictable, search engines can more easily organize and display it in creative ways.”

What is Schema?

Schema markup is a code snippet that you add in your HTML web pages to help search engines consume your data and display this data to searchers. You may not know it, but you have seen the results of using schema markup before. Here is an example of the results of including schema on your web page:

structured-data-google

As you can see from the listing, there are a few included rich snippets. They have included both a rating schema and a price schema that give more detail about the business or service. Having this data included in your listing will increase the CTR (click-through rate) of your web pages.

What is Schema.org?

Schema.org is a collaboration project between some of the biggest search engines (as well as other websites) to create a standardized structured markup. Schema.org contains documentation of every schema and available variables for each schema.

Some examples of schemas are:

  • Events
  • Organization
  • Local Business
  • Place
  • Product
  • Review
  • Book
  • Movie
  • Recipe

Types of Schema Syntax

  • JSON-LD: Javascript notation that is included in the <head> section inside a <script> tag.
  • Microdata: HTML tag attributes to name the properties you want to define as structured data.
  • RDFa: HTML5 extension that supports linked data with HTML tag attributes that correspond to user-visible content you want to define for search engines.

Currently, there is no widely accepted syntax as structured data is quite new. However, Google does recommend using JSOM-LD format in their docs.

Here are some examples of each type of syntax and what the code looks like.

JSDON-LD:

{
 "@context": "http://schema.org/",
 "type": "Person",
 "jobTitle": "CEO",
 "name": "Tyler Horvath",
 "telephone": "(913) 334-7715",
 "url": "https://www.tytonmedia.com"
}

Microdata:

<div itemscope itemtype="http://schema.org/Product">
 <span itemprop="name">Panasonic White 60L Refrigerator</span>
 <img src="panasonic-fridge-60l-white.jpg" alt="">
  <div itemprop="aggregateRating"
       itemscope itemtype="http://schema.org/AggregateRating">
   <meter itemprop="ratingValue" min=0 value=3.5 max=5>Rated 3.5/5</meter>
   (based on <span itemprop="reviewCount">11</span> customer reviews)
  </div>
</div>

RDFa:

<p vocab="http://schema.org/" typeof="Person">
   My name is
   <span property="name">Tyler Horvath</span>
   and you can call me at
   <span property="telephone">1-913-334-7715</span>
   or visit 
   <a property="url" href="https://www.tytonmedia.com">Website</a>.
</p>

What are rich snippets?

Rich snippets are detailed pieces of information added to search engine results to help users with specific queries.

rich-snippets

In this rich snippet, you can see detailed information about this carrot cake recipe like its rating, how long it takes to cook and even how many calories it is.

Currently, there are only 7 support rich snippet types:

  • Articles
  • Local Businesses
  • Music
  • Recipes
  • Reviews
  • TV & Movies
  • Videos

When building rich snippets be sure to provide as much data as possible so that you create a highly informative result in the search engines. This will result in better user engagement and better rankings.

How do you add structured data to your website?

Adding your structured data to your website can sometimes be a difficult task depending on how many pages your website is. If  you are running a WordPress site, you can install the WP SEO structured data schema plugin to automate the process of adding all these snippets to every page.

If not, you will have to manually put the markup on every page you wish to include the schema on. We created a structured data markup generator so you can easily create schemas for your web page.

schema-scructured-data-generator

Simply choose a schema type and fill in all the fields to generate both JSON-LD and microdata snippets. If you create a JSON-LD snippet, add it in the <head> section of your website.

Testing structured data schemas

Once you have successfully added your structured data schemas to your website, you must check if the data is formatted correctly. Google built a structured data testing tool that is great for checking if your structured data is formatted right. Simply enter the URL where you added your structured data and it will show you any errors.

Alternatively, you can also look at your google webmaster tools and choose search appearance->structured data in the left column. You can view all structured data on your website and any errors that Google has found.

webmaster-tools-structured-data

What pages should I add structured data on?

You should add structured data on every page that you can to increase the available data for search engines. You can even have multiple snippets of structured data on a single web page. For example, when validating Tyton Media with Googles structured data tool, you can see we have 3 different snippets on our homepage.

structured-data-testing-tool

We have snippets for webpage, website and local business. You can even select the snippet and see exact details of the data for each snippet.

local-business-structured-data

Does structured data improve SEO?

It has been widely believed that having structured data on your website does not directly effect your rankings but new comments have proved otherwise. Google state that it may add structured data markup to its ranking algorithm.

This means that having structured data, will in fact, increase your rankings… as well as create a better CTR and experience to your users (which also helps SEO).

Example Schema Markup

Organization Schema Markup

An organization can be a corporation, school, NGO, club, etc.

<script type="application/ld+json">
      {
      "@context": "http://schema.org/",
      "@type": "Organization",
      "name": "Tyton Media",
      "url": "https://www.tytonmedia.com/",
      "logo": "https://www.tytonmedia.com/logo.png" 
      }
</script>

WebSite Schema Markup

This schema can be used for a website on any and every page containing any potential actions.

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "https://www.tytonmedia.com/",
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://www.tytonmedia.com/blog/?&q={query}",
      "query-input": "required"
    }
}
</script>

Site Navigation Schema Markup

This markup explains the navigation elements of the page.

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
  <li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/">Tyton Media</a></li>
<li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/about/">About</a></li>
<li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/contact/">Contact</a></li>
<li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/blog/">Blog</a></li>
<li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/services/managed-website/">Managed Websites</a></li>
<li itemprop="name"><a itemprop="url" href="https://www.tytonmedia.com/services/web-development/">Website Development</a></li>
</ul>

Breadcrumbs Markup

Google uses breadcrumb markup to categorize the information in the search results.

Here is an example of how Google uses this data:

breadcrumb-markup

The JSON-LD code is pretty simple.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://www.tytonmedia.com/tools/",
    "name": "Tools"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://www.tytonmedia.com/tools/google-analytics-url-builder/",
    "name": "Analytics URL Builder"
   }
  }
 ]
}
</script>

Schema Product & Offer Markup

If you have an online ecommerce store using the product schema is super vital for good SEO. You can give Google detailed information about your products that is used to display rich results to searchers. These snippets can include price, availability, review ratings, etc.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
  "aggregateRating": {
    "@type": "AggregateRating",
    "bestRating": "99",
    "ratingCount": "26",
    "ratingValue": "90"
  },
  "image": "samsung-30in-lcd.jpg",
  "name": "Samsung 30\" LCD Monitor",
 ,
    "offers": {
      "@type": "Offer",
      "price": "4399 p."
    }
 ]
  }
}
</script>

Schema Software Application Markup

If you have a software app, you can use the software app markup to display your app details more richly in Google results. Here is an example of the results with rich data…

software-apps

and the code…

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "SoftwareApplication",
 "name": "Angry Birds",
 "operatingSystem": "ANDROID",
 "applicationCategory": "http://schema.org/GameApplication",
 "aggregateRating": {
 "@type": "AggregateRating",
 "ratingValue": "4.6",
 "ratingCount": "8864"
 },
 "offers": {
 "@type": "Offer",
 "price": "1.00",
 "priceCurrency": "USD"
 }
}
</script>

Video Schema Markup (in microdata)

Google suggests using the video schema markup on any pages containing video. This will allow Google and other search engines to rank and display your videos in search.

<div itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Title</span></h2>
  <meta itemprop="duration" content="T1M33S" />
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg" />
  <meta itemprop="contentURL" content="http://www.example.com/video123.flv" />
  <meta itemprop="embedURL" content="http://www.example.com/videoplayer.swf?video=123" />
  <meta itemprop="uploadDate" content="2011-07-05T08:00:00+08:00" />
  <meta itemprop="expires" content="2012-01-30T19:00:00+08:00" />
  <meta itemprop="height" content="400" />
  <meta itemprop="width" content="400" />
  <object ...>
    <param ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

Schema Rating Markup (in microdata)

I am sure you have seen review rich snippets when searching in Google. Most likely, you clicked on that result because including rating and review structured data on your page will create high CTR listings in the search engines.

<div itemscope itemtype="http://schema.org/Review">
 <div itemprop="itemReviewed" itemscope itemtype="http://schema.org/Restaurant">
 <img itemprop="image" src="seafood-restaurant.jpg" alt="Catcher in the Rye"/>
 <span itemprop="name">Legal Seafood</span>
 </div>
 <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
 <span itemprop="ratingValue">4</span>
 </span> stars -
 <b>"<span itemprop="name">A good seafood place.</span>" </b>
 <span itemprop="author" itemscope itemtype="http://schema.org/Person">
 <span itemprop="name">Bob Smith</span>
 </span>
 <span itemprop="reviewBody">The seafood is great.</span>
 <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
 <meta itemprop="name" content="Washington Times">
 </div>
</div>

Schema Article Markup

Marking up your articles with structured data provides more details about it like the headline, images, when it was published, and the description.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage": {
 "@type": "WebPage",
 "@id": ":https://www.tytonmedia.com/blog/structured-data-seo-schema-markup/"
 },
 "headline": "Structured Data: Better SEO With Schema Markup",
 "image": {
 "@type": "ImageObject",
 "url": "https://www.tytonmedia.com/wp-content/uploads/structured-data-better-seo-1.png",
 "height": 500,
 "width": 800
 },
 "datePublished": "2015-10-05T08:00:00+08:00",
 "dateModified": "2015-10-05T09:20:00+08:00",
 "author": {
 "@type": "Person",
 "name": "Tyler Horvath"
 },
 "publisher": {
 "@type": "Organization",
 "name": "Tyton Media",
 "logo": {
 "@type": "ImageObject",
 "url": "https://www.tytonmedia.com/logo.jpg",
 "width": 600,
 "height": 60
 }
 },
 "description": "Better SEO With Schema Markup"
}
</script>

 

Schema Local Business Markup

Local Business schema is for any business or branch of an organization with a physical location. This includes restaurants. banks, medical practice, clubs, bowling alleys, etc. Including this data on your pages will result in better local seo results.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "LocalBusiness",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Overland Park",
    "addressRegion": "KS",
    "streetAddress": "5601 west 136th tr"
  },
  "description": "Full service web solutions including web design, management, SEO and hosting.",
  "name": "Tyton Media",
  "telephone": "913-961-8446"
}
</script>

Event Schema Markup

Event markup explains the details of a organized event. Google uses this data to show relevant event information when they search. For example… if you are searching for a famous musician, you might see an event with that musician listed in the search engine.

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "MusicGroup",
 "name": "311",
 "url": "http://www.311.com/",
 "event": "http://www.311cruise.com/"
}
</script>

Recipe Schema Markup

When you use the recipe schema, you provide rich cards of data that include information like ratings, cooking and prep times and even nutritional information like we showed before.

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Recipe",
  "author": "John Smith",
  "cookTime": "PT1H",
  "datePublished": "2009-05-08",
  "description": "This classic banana bread recipe comes from my mom -- the walnuts add a nice texture and flavor to the banana bread.",
  "image": "bananabread.jpg",
  "recipeIngredient": [
    "3 or 4 ripe bananas, smashed",
    "1 egg",
    "3/4 cup of sugar"
  ],
  "interactionStatistic": {
    "@type": "InteractionCounter",
    "interactionType": "http://schema.org/Comment",
    "userInteractionCount": "140"
  },
  "name": "Mom's World Famous Banana Bread",
  "nutrition": {
    "@type": "NutritionInformation",
    "calories": "240 calories",
    "fatContent": "9 grams fat"
  },
  "prepTime": "PT15M",
  "recipeInstructions": "Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.",
  "recipeYield": "1 loaf",
  "suitableForDiet": "http://schema.org/LowFatDiet"
}
</script>

Schema Person Markup

A person can be anyone alive, dead, undead or fictional. This could include a player on a sports team like Peyton Manning. It could even include Oprah or Abe Lincoln.

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Person",
  "name": "Tyler Horvath",
  "sponsor": 
  {
    "@type": "Organization",
    "name": "Tyton Media",
    "url": "https://www.tytonmedia.com/"
  }
}
</script>

Structured Data Tools

Comments