Google Structured Data - Schema.org Annotations

CCarter

Final Boss ®
Moderator
BuSo Pro
Boot Camp
Digital Strategist
Joined
Sep 15, 2014
Messages
4,357
Likes
8,863
Degree
8
So I've been playing around with more and more Google Structured data which helps Google identify and understand different elements of your website. I'm going to drop any schema codes I find extremely useful into this thread. I prefer the Schema.org mark ups since it's compatible with future platforms - other then search engines, so that should help me down the road with any other platforms.

This first round is the social profiles one. It takes a bit of work getting into the knowledge graph, I myself am just starting to explore the possibilities with it so there is a learning curve. I've seen people do it, so it's just a matter of having all the necessary elements and mark ups at some point. By properly tagging your social profiles that they are indeed yours, when you do obtain the knowledge graph you'll have them beautifully displayed like this:

beats_by_dre.jpg


This mark up is rather simple and it consist of just using the "sameAs" tag. I placed all these social icons in the footer of my site and simply used the following mark up so Google understands that my website's official social profiles are the ones I display. You can mark up anything that is an additional profile or entity you want your website to associate with, but that doesn't mean that Google will display it since it may not support that in the Knowledge Graph. My code:

Code:
<div itemscope itemtype="http://schema.org/Organization">
<link itemprop="url" href="https://www.serpwoo.com/">
<ul>
<li><a itemprop="sameAs" href="https://www.youtube.com/user/SERPWoo">YouTube</a></li>
<li><a itemprop="sameAs" href="https://twitter.com/serpwoo">Twitter</a></li>
<li><a itemprop="sameAs" href="https://www.facebook.com/SERPWoo">Facebook</a></li>
</ul>
</div>

^^ That associates my Youtube, Twitter, and Facebook profiles with the website https://www.serpwoo.com/.

More information on this structured data can be found here: https://developers.google.com/structured-data/customize/social-profiles

--

Another piece of structured data is the Website Organization. have you ever seen SERPs where the company or organization's name is in the SERPs in almost a grayed out scenario, that's the website's name markup.

website_name.jpg


I use the following code and simply place it in my footer in the copyright section:
Code:
<div itemscope itemtype="http://schema.org/WebSite">
    <a href="https://www.serpwoo.com/" itemprop="url"><span itemprop='name'>SERPWoo</span></a> &copy; 2013 - 2015
</div>

^^ That associates the name 'SERPWoo' with the website https://www.serpwoo.com/. More information about this structured data can be found here: https://developers.google.com/structured-data/site-name

Now you are asking yourself, can't Google figure this out - yes. But you'll have to pretty much wait till you are a mega brand if you want Google to notice you, or you can skip steps by giving them information in the formats they like. I found that giving them the data works well since at that point they just have to verify it, "yes this is indeed the company's online assets".

There is still tons I am exploring and do not know at the moment, like does the markups only have to show up on the home page, or on a majority of pages, or exactly every single page on the website? I assume just a majority of pages, but as I figure things out I'll continue updating this thread, as well as new code I've implemented on this journey toward the knowledge graph and structured data. If you have any insights of your own feel free to add them. :smile:
 
Twitter Cards - Enhanced Twitter Experience w/ Structured Data

Here is one that's for the twitter crowd - nothing to do with Google - Twitter Cards!

I use the "Summary with Large Image" card time. What twitter cards do is they give summaries and automatically add whatever image you designated for that page when people tweet your url, which is great for engagement. Example:

twitter_card.png

^^ The user simply linked to serpwoo's homepage (doesn't matter if it's a link shortener used) and the image was automatically added and as well the description pulled from the site without any additional input from the user - hence why this is the "Summary with Large Image" card.

Here is the code you add to your header between the <head></head> tags:

Code:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@SERPWoo">
<meta name="twitter:creator" content="@SERPWoo">
<meta name="twitter:title" content="Monitor The Whole SERPs | SERPWoo - Niche Tracker">
<meta name="twitter:description" content="Monitors the whole SERPs for your keywords and industry while utilizing our 3rd party integrations, social signals, and A.I. Bots to help you dominate your SEO and ORM campaigns.">
<meta name="twitter:image:src" content="https://www.serpwoo.com/img/gallery/screenshot-big-3-31-2015.png">

^^ I use PicoCMS to create inputs for twittercards on each page, so each URL tweeted will have a different image and description that I selected but if there is no twittercard image it defaults to the image you see above (This is done within my code - not through twitter). That way anytime anyone tweets any URL there is a nice images attached to the tweet like in the above example.

To learn more go here: https://dev.twitter.com/cards/overview

Once you have the meta markup implemented you will have to Validate your site with twitter to test it, so they can make sure whatever you are doing is good, checking your markup automatically white-lists your site with twitter as well, link: https://cards-dev.twitter.com/validator

For you folks still messing around with Wordpress, this is the best plugin that I've tested: https://wordpress.org/plugins/jm-twitter-cards/
 
Facebook Open Graph w/ Structured Data

Alright here is another one, This time it's for Facebook. It's similar to the Twitter Cards, once a person posts a url it should pull this open graph data into Facebook for people to get an enhanced experience. Here is the code I utilize:

Code:
   <meta property="og:type" content="article" />
   <meta property="og:title" content="How To Find Parasites (Satellite Sites), Web 2.0s, and Social Platforms For SEO Within YOUR Niche" />
   <meta property="og:description" content="Grayhat guide to finding parasites, web 2.0, and social platforms competitors are using within your niche for SEO campaigns." />
   <meta property="og:url" content="https://www.serpwoo.com/blog/tutorials/finding-parasites-for-SEO" />
   <meta property="og:site_name" content="SERPWoo - Niche Tracker" />
   <meta property="og:image" content="https://www.serpwoo.com/img/blog/tutorials/2015/2/finding-parasites-for-seo.jpg" />

Here is more information about the Open Graph protocol: http://ogp.me/

And the official one for web: https://developers.facebook.com/docs/sharing/web

I'm going to double check cause it may have been updated with new new markups, I'm seeing things like app_id, and some header prefixes that were not there before.

Here is the official Facebook plugin for Wordpress: https://wordpress.org/plugins/facebook/

PicoCMS Plugin: https://github.com/ahmet2106/pico-opengraph
 
That twitter card thing.. hnnnggggg... I'll be in my bunk.

Can you define different cards for different pages?

::emp::
 
Yeah each page can have it's own card, image, and description.
 
Last edited:
...and I am done.

Great info, CC I had heard of the twitter cards but did not have the time to read it yet. Your summary was nice and timely.

Cheers,
::emp::
 
Person Structured Data

Alright things are getting close, I figured out the "Person" entity - for knowledge graph of people, this time I'm switching up the format from microdata to JSON-LD for my personal blog:

Code:
<script type="application/ld+json">// <![CDATA[
{ "@context" : "http://schema.org",
  "@type" : "Person",
  "name" : "CCarter",
  "url" : "http://www.moneyoverethics.com",
  "sameAs" : [ "https://twitter.com/mercenarycarter",
      "https://instagram.com/mercenarycarter/",
      "https://plus.google.com/u/0/107510098278976790199",
      "http://www.youtube.com/user/CCarterWF"]
}
// ]]></script>

Here is the same code in microdata, uses the sameAs like the first post:

Code:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">CCarter</span>
<link itemprop="url" href="https://www.moneyoverethics.com/">
<ul>
<li><a itemprop="sameAs" href="http://www.youtube.com/user/CCarterWF">YouTube</a></li>
<li><a itemprop="sameAs" href="https://twitter.com/mercenarycarter">Twitter</a></li>
<li><a itemprop="sameAs" href="https://instagram.com/mercenarycarter/">InstaGram</a></li>
<li><a itemprop="sameAs" href="https://plus.google.com/u/0/107510098278976790199">Google+</a></li></ul>
</div>

More information available here: http://schema.org/Person
 
Breadcrumbs Structured Data

Breadcrumbs also have a mark up, they are important since it helps Google understand the relationships of your pages. I implemented this a while back on SERPWoo and now in the search results we see the following with Breadcrumbs next to the main URL:

breadcrumbs.jpg


Here is the code, but here is the thing you have to really pay attention to the 'itemref' and 'id'. I'll explain below:

Code:
<div class="breadcrumbing">
<div id="a" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemref="b">
<i class="fa fa-home"></i> &nbsp;
  <a href="/" itemprop="url">
    <span itemprop="title">SERPWoo</span>
  </a> &nbsp; / &nbsp;
</div>
<div id="b" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child" itemref="c">
  <a href="/blog/" itemprop="url">
    <span itemprop="title">Blog</span>
  </a> &nbsp; / &nbsp;
</div>
<div id="c" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child" itemref="d">
  <a href="/blog/review/" itemprop="url">
    <span itemprop="title">Review</span>
  </a> &nbsp; / &nbsp;
</div>
<div id="d" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" itemprop="child">
  <a href="https://www.serpwoo.com/blog/review/scam-reporting-sites-drop/" itemprop="url">
    <span itemprop="title">Declining Traffic to RipoffReport.com, Scam.com, and other Scam Reporting Sites - SERP Reviews</span>
  </a>
</div>
</div>

So the very first element in the breadcrumb I am using the absolute path to the homepage '/' (can be https://www.serpwoo.com/ as well) - that itemrprop is the url. Notice the 'title = SERPWoo' which tells Google that URL's title is SERPWoo.

Now look at the 2nd line of the code you see id="a". That tells the structure that THIS '/' (homepage) is the first id 'a' in the structure. But look at the very end of the line, itemref="b" - that tells it there is a child for the home page and too look for an id like that within this structure. So the very next element has the id="b" which the first element was referring. But since this is a child of the parent, there is a new element itemprop="child" added.

This confirms with Google that element B is indeed a child of something. The IDs increase by alphabet letters, and the pattern is extremely easy to spot once you see it.

Also note the very last element the one id="d" (since it's only 4 levels for my site) doesn't have a final itemref="XYZ" at the end of the line since it's the final child, and essentially SHOULD be the page the user is on.

The breadcrumbs might be a bit harder to implement since you have to know a bit of coding if you don't already have a plugin or theme that supports this. Maybe @Ryuzaki can implement some of this structured data into the next version of BuSo Lightening - this would be a great default one to implement.

More information on this: https://developers.google.com/structured-data/breadcrumbs
 
Just realised that I use a plug-in that enables dublin core, open graph and schema. For anyone using wordpress, this plugin is called add meta tags and cen be found here: https://wordpress.org/plugins/add-meta-tags/ . It also does the set-up for twitter cards, facebook profiles and google plus. Not sure if this of use to anyone, but I thought i would share it.
 
Enable Site Search Within Google

Next up, enabling Site Search. Ever see one of these search boxes within the sitelinks. There is a specific version that does a query from your own search, examples with results:

site_search.jpg


results.jpg


Here is the code for CDON's version:

Code:
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "http://www.simoahava.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "http://www.simoahava.com/?s={search_term}",
    "query-input": "required name=search_term" }
}
</script>

Here would be my SERPWoo implementation, pretty simple stuff:

Code:
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "WebSite",
  "url": "https://www.serpwoo.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://www.serpwoo.com/search/search.php?search=1&query={search_term}",
    "query-input": "required name=search_term" }
}
</script>
 
Full Organization Markup

Alright here is a good full organization mark up:

Code:
<script type="application/ld+json">
{ "@context": "http://schema.org",
"@type": "Organization",
"name": "[COMMON NAME OF COMPANY]",
"legalName" : "[LEGAL NAME OF COMAPNY]",
"alternateName": "[ANY AKA NAMES]",
"url": "[URL OF COMPANY WEBSITE]",
"logo": "[GOOD QUALITY ONSITE LOGO]",
"foundingDate": "[YYYY]", //MUST BE IN ISO 8601 FORMAT
"founders": [
{
"@type": "Person",
"name": "[NAME OF FOUNDER #1]",
"sameAs":["[URL OF SOCIAL PROFILE #1 (twitter)]"]
},
{
"@type": "Person",
"name": "[NAME OF FOUNDER #2]",
"sameAs":["[URL OF SOCIAL PROFILE #1 (twitter)]"]
} ],
"address": {
"@type": "PostalAddress",
"streetAddress": "[FIRST LINE OF ADDRESS]",
"addressLocality": "[TOWN/CITY]",
"addressRegion": "[STATE/COUNTRY]",
"postalCode": "[POSTCODE]",
"addressCountry": "[COUNTRY CODE]" //MUST BE IN ISO 3166-1 ALPHA 2 FORMAT
},
"contactPoint": {
"@type": "ContactPoint",
"contactType": "[TYPES OF CALLS THIS NUMBER ACCEPTS]", //LIMITED TO THE FOLLOWING: "customer support", "technical support", "billing support", "bill payment", "sales", "reservations", "credit card support", "emergency", "baggage tracking", "roadside assistance", "package tracking"
"telephone": "[PHONE NUMBER WITH COUNTRY CODE]",
"email": "[EMAIL ADDRESS]"
},
"sameAs": [
"[URL OF WIKIPEDIA ARTICLE]",
"[URL OF SOCIAL PROFILE #1]",
"[URL OF SOCIAL PROFILE #2]",
"[URL OF SOCIAL PROFILE #3]"
]}
</script>

Here is one I implemented at SW for comparison. I took out the phone number and address cause we are completely digital. Note with contactPoint you need a phone number OR url - that's required, no getting around that - I also redid some of the old code to remove redundancies, so you'll notice the sameAs for social profiles here as well:

Code:
<script type="application/ld+json">
{ "@context": "http://schema.org",
"@type": "Organization",
"name": "SERPWoo",
"legalName" : "SERPWoo",
"alternateName": "SERP Woo",
"url": "https://www.serpwoo.com/",
"logo": "https://www.serpwoo.com/img/logo.png",
"foundingDate": "2014",
"founders": [
{
"@type": "Person",
"name": "CCarter",
"sameAs": ["https://twitter.com/mercenarycarter"]
},
{
"@type": "Person",
"name": "Jason Brown",
"sameAs": ["https://twitter.com/leanvertising", "https://twitter.com/eliquid"]
} ],
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer support",
"url": "https://www.serpwoo.com/contact/",
"email": "support@serpwoo.com"
},
"sameAs": [
"https://www.youtube.com/user/SERPWoo",
"https://twitter.com/serpwoo",
"https://www.facebook.com/SERPWoo"
]}
</script>
 
Thank you CCarter! It's great having all of this in one simple page to refer back to.
 
Another piece of structured data is the Website Organization. have you ever seen SERPs where the company or organization's name is in the SERPs in almost a grayed out scenario, that's the website's name markup.

@CCarter Please do correct me if I'm wrong, but doesn't the site name markup only ensures that the brand's name appears in the breadcrumb trail (instead of a homepage URL) within mobile search results?

I was always under the impression that the organisation's name (the greyed out one) within SERPs are automatically created by Google by using Wikipedia entries, as long as the organisation is somewhat popular.
 
@CCarter Please do correct me if I'm wrong, but doesn't the site name markup only ensures that the brand's name appears in the breadcrumb trail (instead of a homepage URL) within mobile search results?

I was always under the impression that the organisation's name (the greyed out one) within SERPs are automatically created by Google by using Wikipedia entries, as long as the organisation is somewhat popular.

You could very well be right. This is a journey in my exploration of all this since it's mostly new to me.
 
Dude this thread is fucking on point. So good if I could buy CCarter lunch & a beer I would.
 
http://schema-creator.org/ can be helpful if you're new to all this.

Especially if you run a local business, I'd recommend implementing schema markup to get an (albeit slight) advantage over your competitors as they are most likely not using it.

As an example, let's take a random plumbing business in LA that has this in the footer:
dNbx3iR.png

https://schema.org/LocalBusiness has everything we need to markup the above quite easily:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">1940 Riverside Drive</span><br>
<span itemprop="addressLocality">Los Angeles</span><br>
<span itemprop="addressRegion">CA</span><br>
<span itemprop="postalCode">90039</span><br>
<span itemprop="addressCountry">United States</span><br>
<span itemprop="telephone">(323)663-0258</span>
<span itemprop="faxNumber">(323)663-1389</span>
<span itemprop="email">info@kesslercrew.com</span>
</div>
</div>

If you happen to own a recipe site as well, schema markup can definitely improve your CTR.
Not hard to pick a winner between these two:
TYweeT3.png

Again, fairly straight forward process (https://schema.org/Recipe).
I can provide an example if needed.

Lastly, the search box within the SERPs that @CCarter mentioned is unfortunately not for everyone as you need to be eligible for it. You need to have a high volume of branded searches to have the normal search box appear by default (which is what you need first before improving upon it by adding the schema markup). What defines a "high volume of branded searches"? That's open for discussions but of what I've read it's at least a few thousands of branded searches each month. But even then it doesn't hurt to have the code implemented, just don't be surprised if the search box doesn't appear.
 
@Postmortis - Yeah I agree about the search box not appearing until you are somewhat an authority in Google's eyes. Most of this stuff will not appear until you hit certain trust factors in Google's eyes, but having the code implemented for the day that happens is just something else you can check off the list as you grow your brand.
 
Most schema creators forget about the sameAs property... missing in this tool as well.

::emp::
 
You need to have a high volume of branded searches to have the normal search box appear by default (which is what you need first before improving upon it by adding the schema markup).

While I agree with the comment of needing to be somewhat of an authority, I'm going to go ahead and say it doesn't necessarily need to be through branded search queries. I know of several sites, at least in the niches I run in, that do not have branded searches. However, they rank well for money terms with quality links.
 
I'd venture to say that schema markup IS an authority signal.

I have seen crappy MFA sites make it into the knowledge graph, specifically in the hummingbird style q&a boxes, with few links, mostly spam.

At the same time, they were the only site fully dedicated to the topic
 
Back