SEO : Guide to Structured Data and Schema Markup - Implementation

Here is an easy tutorial for Structured Data and Schema Markup concepts.

Organization Schema Markup

	<script type="application/ld+json">
	{
	"@context" : "http://schema.org",
	"@type" : "Organization",
	"legalName" : "Example Company Name",
	"url" : "http://example.com/",
	"contactPoint" : [{
	"@type" : "ContactPoint",
	"telephone" : "example-company-number",
	"contactType" : "customer service"
	}]
	"logo" : "http://example.com/images/logo.png",
	"sameAs" : [
	"http://www.facebook.com/my-company-page",
	"http://www.twitter.com/my-company-page",
	"http://plus.google.com/+my-company-page",
	"https://www.youtube.com/user/my-company-page",
	"http://www.linkedin.com/company/my-company-page",
	"https://www.wikidata.org/wiki/my-company-page"
	]
	}
	</script>

view raw organization-schema-markup hosted with ❤ by GitHub

Local Business Schema Markup

	<script type="application/ld+json">
	{
	"@context": "http://schema.org",
	"@type": "LocalBusiness",
	"address": {
	"@type": "PostalAddress",
	"addressLocality": "Phoenix",
	"addressRegion" : "Arizona",
	"streetAddress" : "My Company Street Address",
	"postalCode" : "85001",
	"addressCountry" : "United States"
	},
	"description": "My Company Meta Description",
	"name": "My Company Name",
	"openingHours": [
	"Monday-Saturday 10:00-18:00"
	],
	"telephone": "my-company-phone",
	"url":"http://www.example.com/"
	}
	</script>

view raw local-business-schema-markup hosted with ❤ by GitHub

Geo Co-ordinates Markup

	<div itemscope itemtype="http://schema.org/GeoCoordinates">
	<meta itemprop="latitude" content="my-business-latitude" />
	<meta itemprop="longitude" content="my-business-longitude" />
	</div>

view raw geo-co-ordinates-markup hosted with ❤ by GitHub

In order to get the latitude and longitude of your business perform following steps:

• Go to http://www.google.com/maps
• Enter your business address in the address box
• When the marker points the address in map, right click the marker and click on "What's Here ?"
• A card will appear at the bottom of the screen with more info. The last line of that card will display the latitude and longitude of the address.
• For more details visit this tutorial - http://www.wikihow.com/Get-Latitude-and-Longitude-from-Google-Maps 

Navigation Menu Markup

In order to implement this simply place the code of your navigation menu inside following tag:

	<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="">
	/* place navigation menu code here */
	</nav>

view raw navigation-menu-markup hosted with ❤ by GitHub

Services Markup

	<script type="application/ld+json">
	{
	"@context": "http://schema.org/",
	"@type": "Service",
	"serviceType": "Web Development",
	"provider": {
	"@type": "LocalBusiness",
	"name": "My Software Company Name"
	},
	"areaServed": {
	"@type": "State",
	"name": "Arizona"
	},
	"hasOfferCatalog": {
	"@type": "OfferCatalog",
	"name": "Custom Website Development",
	"itemListElement": [
	{
	"@type": "Offer",
	"itemOffered": {
	"@type": "Service",
	"name": "Custom Website Development"
	}
	},
	{
	"@type": "Offer",
	"itemOffered": {
	"@type": "Service",
	"name": "E-Commerce Website Development"
	}
	},
	{
	"@type": "Offer",
	"itemOffered": {
	"@type": "Service",
	"name": "PHP Website Development"
	}
	},
	{
	"@type": "Offer",
	"itemOffered": {
	"@type": "Service",
	"name": "AJAX Programming"
	}
	},
	{
	"@type": "Offer",
	"itemOffered": {
	"@type": "Service",
	"name": "Static Website Development"
	}
	}
	]
	}
	}
	</script>

view raw services-markup hosted with ❤ by GitHub

Product Markup

	<script type="application/ld+json">
	{
	"@context": "http://schema.org/",
	"@type": "Product",
	"name": "Cricket Software",
	"image": "http://www.example.com/images/products/cricket-software-logo.jpg",
	"url": "http://www.example.com/cricket_software-url.php",
	"description": "Meta description of your product goes here",
	"brand": {
	"@type": "Thing",
	"name": "My Company Name"
	}
	}
	</script>

view raw product-markup hosted with ❤ by GitHub

To add Search functionality for your website in Google Search Results

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

view raw search-schema-markup hosted with ❤ by GitHub

In order for this to work, your site should support searching by adding the search term in URL i.e. GET Request. For example - http://example.com/?s={search_term} . Contact your developer to get this done.

 

Breadcrumbs markup

	<ol itemscope itemtype="http://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://example.com/">
	<span itemprop="name">Home</span></a>
	<meta itemprop="position" content="1" />
	</li>
	>> //Breadcrumb separator
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://example.com/electronics/">
	<span itemprop="name">Electronics</span></a>
	<meta itemprop="position" content="2" />
	</li>
	>> //Breadcrumb separator
	<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="https://example.com/electronics/laptops/">
	<span itemprop="name">Laptops</span></a>
	<meta itemprop="position" content="3" />
	</li>
	</ol>

view raw breadcrumb-schema-markup hosted with ❤ by GitHub

TOOLS TO MAKE YOUR WORK EASY AND FAST

• Test your structured data with this tool from Google - https://search.google.com/structured-data/testing-tool
• You can also create structured schema for your webiste with the help of this tool - http://schema-creator.org/