In this competitive digital era everybody wants to get more exposer and high ranking in search results. Actually there is no other better, long lasting solution to get business than this. Google is one of the major source to get more visitors and making sales through your site. Here I am going to discuss another next big thing in SEO, Schema, which is nothing to do with search ranking (currently), but it gives you power to customize your result and appear on SERPs distinctly to grab attention of users.
By using schema on your web pages you can stand out from others and can attract more visitors to your site by providing a glimpse of what your page offering. It is the new way to make your search appearance interesting rather than regular dull results. According to Google, using it actually increases click through rates and it will indirectly benefits your website SEO.
What is schema?
For many years search engines have used meta tags such as title, description, keywords to display the content on SERPs (search engine result pages). And people tried their best to be creative by making the title compelling and description as an advert, which is still essential. But there are more you can do to customize your result.
Meta tags are based on W3C standards, but schema is not standardized by this. It is actually a collaboration project of big companies in this area like Google, Bing, Yahoo and Yandex. They created this new standard and listed it in schema.org to provide much more contextual results and more information about the page within the SERPs. These are also known as rich snippets.
So how to implement this schema in your webpage based on your requirement? Actually there are many types of schema type is available there such as Local Business, person, product etc. You can check the full list of supported type here to match your requirement and implement it. Google also provided a list of schemas that they supports and examples to help people to implement it.
There are 3 ways to implement schema in your page, Microdata, RDFa, and JSON-LD. Where microdata and rdfa works with HTML5 and you need to change few markup of your website theme to implement it. In other hand json-ld is the way where you need not to look into the markup of your theme, you can just simply put it in <script> tags and use it as you would add any JavaScript code in your theme.
I, personally prefers JSON-LD method to implement the rich snippet and throughout this tutorial I’ll show you this method of implementation. You can test those data in Structured Data Testing Tool provided by Google.
Do WordPress support schema by default?
Yes, but none of these formats mentioned above. If you look into official WordPress themes, then you can notice a HTML class with hentry and it actually hAtom microformat. If you check official Twenty Seventeen theme, then you can find that class and if you test it on Google’s Structured Data Testing Tool, then can see that it actually supports this format and recognize all its properties.
But here we are not going focus on it, as it is mainly used to markup blog posts. It is interesting and helpful to know that your page contents are getting wrapped up by few schema markups.
Implementing Schema with JSON-LD
This method is very easy to implement and it is also recommended format by Google. In WordPress admin you can create a custom metabox for each post and pages and include the metabox code in header.php or footer.php. In other sites which are not in WP, they can include the code in the pages header or footer part as they include other js scripts.
Local Business Schema Markup
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Restaurant",
"address": {
"@type": "PostalAddress",
"addressLocality": "Sunnyvale",
"addressRegion": "CA",
"postalCode": "94086",
"streetAddress": "1901 Lemur Ave"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4",
"reviewCount": "250"
},
"name": "GreatFood",
"openingHours": [
"Mo-Sa 11:00-14:30",
"Mo-Th 17:00-21:30",
"Fr-Sa 17:00-22:00"
],
"priceRange": "$$",
"servesCuisine": [
"Middle Eastern",
"Mediterranean"
],
"telephone": "(408) 714-1489",
"url": "http://www.dishdash.com"
}
</script>
Local businesses have several specific types listed on schema.org such as
- Restaurant
- Dentist
- Store
- ShoppingCenter
- Library
- TravelAgency
Here I have shown you restaurant type. If your business is not in the specific type local business list then you can use LocalBusiness in @type field.
Product Schema Markup
Here is an example of product rich snippet shown on google. Also you can specify product price, availability by schema markup.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Executive Anvil",
"image": "http://www.example.com/anvil_executive.jpg",
"description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
"mpn": "925872",
"brand": {
"@type": "Thing",
"name": "ACME"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.4",
"reviewCount": "89"
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "119.99",
"priceValidUntil": "2020-11-05",
"itemCondition": "http://schema.org/UsedCondition",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": "Executive Objects"
}
}
}
</script>
Person Schema Markup
Person schema is useful when maybe you are running a tech review or movie review site, and the person reviewing it you can provide his/her details through this schema. Also if you are running your own personal site like I am doing it is useful there as well.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "Pradip Debnath",
"description": "I am a web enthusiast, who makes his living by playing role of a WordPress developer and SEO specialist, independently.",
"jobTitle": "WordPress Developer & Digital Marketer",
"birthDate": "1991-05-23",
"email": "itzpradip@gmail.com",
"telephone": "+91-8981009500",
"gender": "Male",
"nationality": "Indian",
"url": "https://www.pradipdebnath.com/"
}
</script>
Review Schema Markup
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Review",
"itemReviewed": {
"@type": "Thing",
"name": "Super Book"
},
"author": {
"@type": "Person",
"name": "Joe"
},
"reviewRating": {
"@type": "Rating",
"ratingValue": "7",
"bestRating": "10"
},
"publisher": {
"@type": "Organization",
"name": "Washington Times"
}
}
</script>
Breadcrumbs Schema Markup
Breadcrumbs navigation is a great way to make users understand where, in which category they are going to visit by clicking the link. Also you can provide ancestor links of the page on the snippet itself.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"item": {
"@id": "https://example.com/books",
"name": "Books",
"image": "http://example.com/images/icon-book.png"
}
},{
"@type": "ListItem",
"position": 2,
"item": {
"@id": "https://example.com/books/authors",
"name": "Authors",
"image": "http://example.com/images/icon-author.png"
}
},{
"@type": "ListItem",
"position": 3,
"item": {
"@id": "https://example.com/books/authors/annleckie",
"name": "Ann Leckie",
"image": "http://example.com/images/author-leckie-ann.png"
}
},{
"@type": "ListItem",
"position": 4,
"item": {
"@id": "https://example.com/books/authors/ancillaryjustice",
"name": "Ancillary Justice",
"image": "http://example.com/images/cover-ancillary-justice.png"
}
}]
}
</script>
So this is it.
Here I have shown you a few schema markup and how to implement them by JSON-LD format. It may be helpful for you to create few rich snippets soon on your projects.
Share your thoughts & experience about this.
