- Joined
- Sep 15, 2014
- Messages
- 4,341
- Likes
- 8,855
- Degree
- 8
Warning: This requires html knowledge and borders on the intermediate to advance level of editing html.
Today we are going to go over some basic Schema.org Markup. Basically what the markups do is allow your brand exposure in search engines and on platforms which read the schema markup and "Enhance" Your exposure within them. What? Basically this:
^^ Example of breadcrumbs within the search engine results pages due to schema markup.
Certain places like Pinterest only support the pure Schema markup instead of JSON-LD versions, so before you decide on either or (I suggest both by the way - just not overlapping), make sure you've done market research and know where your competitors are generating their traffic from.
If a majority of your competitors are generating traffic from Pinterest, then you'll want to go with the normal schema.org markup so Pinterest can turn your content into rich pins. (You will need to test it out within their Pinterest Rich Pins Validator: https://developers.pinterest.com/docs/rich-pins/validator/)
Google has a great rich media snippet validator which will showcase what data it found on the site you inputted, use this for ALL testing as you go along: https://developers.google.com/structured-data/testing-tool/
It may not be obvious but you need to be able to edit the html of your website, edit the theme you are using from your CMS (Wordpress), or you can use Google Tag Manager to slickly insert JSON-LD version of this: Using Google Tag Manager to Add Schema.
Organization Markup: sameAs
Let's get into it, I'm going to show you the two types of Schema markup, the pure markup which edits your html elements and the JSON-LD, which is script code, similar to javascript which is for displaying JSON data. This can simply be placed anywhere on a page and doesn't require editing any html elements which could possibly screw up some code. Using A simple organization markup with html editing we get this:
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>
<li><a itemprop="sameAs" href="https://www.linkedin.com/company/serpwoo">LinkedIn</a></li>
</ul>
</div>^^ That associates my Youtube, Twitter, Facebook, and Linkedin profiles with the website https://www.serpwoo.com/.
This is the same code using JSON-LD:
Code:
<script type="application/ld+json">
[{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://www.serpwoo.com/",
"name": "SERPWoo",
"sameAs": [
"https://www.youtube.com/user/SERPWoo",
"https://twitter.com/serpwoo",
"https://www.facebook.com/SERPWoo",
"https://www.linkedin.com/company/serpwoo"
]}]
</script>Now you'll have a choice to use either one, but for some platforms like Pinterest you can only use the first one to get within their rich media validation graces.
The desired end result of sameAs is the following within Google:
^^ Your brand and it's social accounts properly credited within the Google Knowledge Graph. Note this will not get you into the knowledge graph, but once your brand has enough authority it will properly credit the social profiles and etc. (Quick write up: Getting into the Knowledge Graph).
--
Organization Markup: Local Business Markup
Code:
<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>End results from on page implementation:
--
Organization Markup: Full Organization Markup EXAMPLE
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>-
Organization Markup: SERPWoo Example
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>Since it's JSON-LD code (hidden except from search engines and bots), there is no end html preview.
--
Article/Content (Blogpost) Markup
Code:
<script type="application/ld+json">
[{
"@context": "http://schema.org",
"@type": "Article",
"author": { "name": "CCarter", "sameAs": ["https://twitter.com/MercenaryCarter"] },
"name": "ORM Goggle Mode (Online Reputation Management)",
"headline": "ORM Goggle Mode (Online Reputation Management)",
"datePublished": "2015-07-29",
"image": ["https://www.serpwoo.com/img/learning-center/guide/orm-goggle-mode/Homer-Simpson-doh.png"],
"description": "Learn how to enable/disable ORM Goggle mode, and the benefits of being able to visualize the SERPs in tagged color."
}]
</script>^^ For your blogposts and content mark that sucker up.
--
Enable Site Search Within Google
Resulting in:
^^ Search boxes within SERP Results are also possible with schema markup.
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>--
Recipe Markup
Code:
<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"
}]
</script>This implementation would result in Google SERPS looking similar to this:
^^ Recipes sites NEED the recipe markup, which Pinterest uses as one of their Rich Pins. If you don't know about that pinterest traffic, well...
--
Person Structured Data
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
^^ This is great for bloggers who aren't an organization, but keep a personal blog.
--
Breadcrumbs
This is probably one of the more difficult ones to implement so I'm going to lift the content I already wrote about in another post about this from (Google Structured Data - Schema.org Annotations):
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:
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>
<a href="/" itemprop="url">
<span itemprop="title">SERPWoo</span>
</a> /
</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> /
</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> /
</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.
More information on this: https://developers.google.com/structured-data/breadcrumbs
--
Various
There are various markups you can implement onto your site, after some time, and with enough authority, visitors may start seeing results like this when searching (success):
^^ Quick answers to questions These type of queries are considered "conversational searches".
@MercenaryCarter
