add schema markup without plugin

How to Add Schema Markup in WordPress Without Plugin

When we search about something in google, we get search listings with stars or pictures. These results are more eye-catching than normal results.

They can look like this:

rich snippet example

The above result is Rich Snippets.

What are Rich Snippets?

 

Rich Snippets are normal Google search results with additional data displayed. This extra data is taken from Schema Markup or Structured Data found in a page’s HTML.

Rich snippets are also a way of distinguishing yourself in the SERPs and gain more clicks without having to improve your ranking.

Now, you know what are rich snippets. But, you might be wondering what is Schema Markup or Structured Data Markup.

What is Schema Markup or Structured Data?

 

Essentially, Schema Markup is the code that makes it easier for search engines to understand the context and structure of your site.

This markup style is maintained at schema.org. Schema.org is actually sponsored by the world’s leading search engines, Google, Microsoft, Yahoo and Yandex.

To sum it up in a way to remember the difference between Schema Markup and Rich Snippets, think of it like this:

  • Schema Markup or Structured Data Markup is for search engine bots.
  • Rich Snippets are for humans.

There are two ways to add schema markup and rich snippets to your site. The first method is by the help of a plugin and the second way is adding manually.

Implement the first method using this article.

In this article, we are going use the second method.

Schema Markup or Structured Data Formats:

 

Structured data can be added in several different formats. Let us see all the formats.

Microdata

Microdata is a specification for machine readable data to be embedded within the existing content of HTML documents.

JSON-LD

JSON-LD is a linked data format using JSON, which is used to create machine readable data, similar to microdata. It is actually Google’s recommended format for schema and I am going to use this method for adding schema.

Steps to Add Schema Markup in WordPress Without Plugin

 

I will use the articles schema as example to demonstrate the steps.

Step 1: In your WordPress Dashboard, go to any post or page you want to add schema to. Make sure that custom fields are checked in the Screen Options at the top.

Custom Fields

Step 2: In this step, I am going to create schema markup code using Google Structured Data Markup Helper. Follow the video to complete this process.

Step 3: Next, Scroll down to where you can see the custom field boxes and add a new custom field.

New Custom Field Addition

Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Article",
"name" : "Article Title (to be changed)",
"author" : {
"@type" : "Person",
"name" : "Author Name (to be changed)"
},
"datePublished" : "2018-07-20",
"image" : "image URL (to be changed)",
"articleSection" : "Article Category (to be changed)",
"description" : "A small description about the article",
"articleBody" : "You can paste the whole article over here.",
"url" : "Paste your article URL",
"publisher" : {
"@type" : "Organization",
"name" : "Your blog name"
}
}
</script>
view raw articleschema hosted with ❤ by GitHub

Add New Custom Field

Click Add Custom Field and scroll up to the top of the page and then click Update.

Step 4: Now open up your header.php file and paste the following code just before the tag.

<?php
$schema = get_post_meta(get_the_ID(), 'schema', true);
if(!empty($schema)) {
echo $schema;
}
?>
view raw header-php-code hosted with ❤ by GitHub

Save your header.php and then reload your page, you will see the schema markup just before the closing tag.

You can test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

What Types of Schema Are There?

There are a wide variety of schemas available, more than we can cover in this post. The Google supported schemas will be the one I will focus on in this post.

SCHEMA MARKUP FOR PRODUCT

Add schema markup to your product pages so Google can provide detailed product information in rich search results, helping to increase click through rates of your search listing.

Below is the example of product rich snippet.

Product Rich Snippet Example

This process is exactly the same as article schema. Go into your WordPress admin and navigate to the page that features your products. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Product",
"name" : "PENCIL",
"image" : "https://example.com/pencil1.jpg",
"description" : "(Description about your product.)",
"url" : "https://example.com/pencil/",
"brand" : {
"@type" : "Brand",
"name" : "(Your Brand Name)",
"logo" : "https://example.com/logo.png"
},
"offers" : {
"@type" : "Offer",
"url": "https://example.com/pencil",
"priceCurrency": "USD",
"price" : "25.00",
"availability": "https://schema.org/InStock",
},
"aggregateRating" : {
"@type" : "AggregateRating",
"ratingValue" : "4.4",
"ratingCount" : "51"
},
"review" : {
"@type" : "Review",
"author" : {
"@type" : "Person",
"name" : "Roy"
},
"datePublished" : "2019-05-05",
"reviewRating" : {
"@type" : "Rating",
"ratingValue" : "4.8",
"bestRating" : "5"
}
}
}
</script>
view raw product schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct product information.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

SCHEMA MARKUP FOR RECIPE

Add schema markup to your recipe content to provide rich results and host-specific lists for your recipes, such as reviewer ratings, cooking and preparation times, and nutrition information.

Below is the example of recipe rich snippet.

This process is same as product schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Party Coffee Cake",
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"author": {
"@type": "Person",
"name": "Mary"
},
"datePublished": "2019-03-10",
"description": "This coffee cake is awesome and perfect for parties.",
"prepTime": "PT20M",
"cookTime": "PT30M",
"totalTime": "PT50M",
"keywords": "cake for a party, coffee",
"recipeYield": "10 servings",
"recipeCategory": "Dessert",
"recipeCuisine": "American",
"nutrition": {
"@type": "NutritionInformation",
"calories": "270 calories"
},
"recipeIngredient": [
"2 cups of flour",
"3/4 cup white sugar",
"2 teaspoons baking powder",
"1/2 teaspoon salt",
"1/2 cup butter",
"2 eggs",
"3/4 cup milk"
],
"recipeInstructions": [
{
"@type": "HowToStep",
"text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
},
{
"@type": "HowToStep",
"text": "In a large bowl, combine flour, sugar, baking powder, and salt."
},
{
"@type": "HowToStep",
"text": "Mix in the butter, eggs, and milk."
},
{
"@type": "HowToStep",
"text": "Spread into the prepared pan."
},
{
"@type": "HowToStep",
"text": "Bake for 30 to 35 minutes, or until firm."
},
{
"@type": "HowToStep",
"text": "Allow to cool."
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "18"
},
"video": [
{
"@type": "VideoObject",
"name": "How to make a Party Coffee Cake",
"description": "This is how you make a Party Coffee Cake.",
"thumbnailUrl": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"contentUrl": "http://www.example.com/video123.mp4",
"embedUrl": "http://www.example.com/videoplayer?video=123",
"uploadDate": "2018-02-05T08:00:00+08:00",
"duration": "PT1M33S",
"interactionCount": "2347",
"expires": "2019-02-05T08:00:00+08:00"
}
]
}
view raw recipe schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct recipe information.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

event schema example

SCHEMA MARKUP FOR EVENT

Adding schema markup to your events makes it easier for users to discover and attend youe event. You can add all types of events through markup from performances by famous artists, to a neighborhood salsa class.

Below is the example of event rich snippet.

This process is same as recipe schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

{
"@context": "https://schema.org",
"@type": "Event",
"name": "Jan Lieberman Concert Series: Journey in Jazz",
"startDate": "2025-01-01T19:30",
"endDate": "2025-01-01T23:00",
"location": {
"@type": "Place",
"name": "Santa Clara City Library, Central Park Library",
"address": {
"@type": "PostalAddress",
"streetAddress": "2635 Homestead Rd",
"addressLocality": "Santa Clara",
"postalCode": "95051",
"addressRegion": "CA",
"addressCountry": "US"
}
},
"image": [
"https://example.com/photos/1x1/photo.jpg",
"https://example.com/photos/4x3/photo.jpg",
"https://example.com/photos/16x9/photo.jpg"
],
"description": "Join us for an afternoon of Jazz with Santa Clara resident and pianist Andy Lagunoff. Complimentary food and beverages will be served.",
"offers": {
"@type": "Offer",
"url": "https://www.example.com/event_offer/12345_201803180430",
"price": "30",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"validFrom": "2024-10-20T16:00"
},
"performer": {
"@type": "PerformingGroup",
"name": "Andy Lagunoff"
}
}
view raw event schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct event information.

Things to consider in event schema are dates, places and timing.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

local business schema icon

SCHEMA MARKUP FOR LOCAL BUSINESS

Adding schema markup to your local business helps in telling Google about your business hours, different departments within a business, reviews for your business, and more.  

Below is the example of local business rich snippet.

This process is same as event schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "LocalBusiness",
"name" : "Pen Company",
"image" : "https://yoursite.com/pen.png",
"telephone" : "012456789",
"email" : "example@example.com",
"address" : {
"@type" : "PostalAddress",
"streetAddress" : "Simpson Street",
"addressLocality" : "Chen",
"addressCountry" : "IN",
"postalCode" : "600000"
},
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday"
],
"opens": "11:30",
"closes": "22:00"
},
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Wednesday",
"Thursday",
"Friday"
],
"opens": "11:30",
"closes": "23:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday",
"opens": "16:00",
"closes": "23:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Sunday",
"opens": "16:00",
"closes": "22:00"
},
"url" : "https://example.com/",
"aggregateRating" : {
"@type" : "AggregateRating",
"ratingValue" : "4",
"bestRating" : "5",
"ratingCount" : "25"
}
}
</script>

Note: Edit the values in the code snippet so it contains your correct business information.

Things to consider in local business schema are address, contact and timing.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

Book schema icon

SCHEMA MARKUP FOR BOOK

Adding schema markup to Book helps google in discovering books and authors, enabling Search users to quickly buy the books that they find directly from Search results. As a provider of e-books, you can provide a feed of data to Google using schema.  

Below is the example of book rich snippet.

Book rich snippet example

This process is same as product schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Book",
"name": "The Title of Book",
"author": {
"@type":"Person",
"name":"Author Name"
},
"url" : "http://www.example.com/book",
"bookFormat": "http://schema.org/EBook",
"datePublished": "2015-05-01",
"image": "coverImage.jpg",
"inLanguage": "English",
"isbn": "00000000",
"numberOfPages": "234",
"offers": {
"@type": "Offer",
"availability": "http://schema.org/InStock",
"price": "9.99",
"priceCurrency": "USD"
},
"publisher": "Kson Publishing",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4",
"reviewCount": "12"
}
}
</script>
view raw book schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct book information.

This code works well for regular books as well as eBooks. 

Things to consider in book schema are format of the book, language and price.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

software application icon

SCHEMA MARKUP FOR SOFTWARE APPLICATION

Adding schema markup to Book helps google in telling the users about the operating system, version and category of the application or game. 

Below is the example of software application rich snippet.

This process is same as recipe schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

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

Note: Edit the values in the code snippet so it contains your correct application information.

Change the application category according to your needs(game or multimedia). 

Things to consider in application schema are operating system, category and price.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

SCHEMA MARKUP FOR RESTAURANT

Adding schema markup to your restaurant helps google in telling the users about the opening and closing time, menu and location of the restaurant. 

Below is the example of restaurant rich snippet.

This process is same as local business schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Restaurant",
"name": "Roys Tavern",
"image": "https://example.com/photos/1x1/photo.jpg",
"address": {
"@type": "PostalAddress",
"streetAddress": "900 Linton Blvd",
"addressLocality": "Delray Beach",
"addressRegion": "FL",
"postalCode": "33444",
"addressCountry": "US"
},
"review": {
"@type": "Review",
"reviewRating": {
"@type": "Rating",
"ratingValue": "4",
"bestRating": "5"
}
},
"url": "http://www.example.com",
"telephone": "+12122459600",
"servesCuisine" : "American",
"openingHoursSpecification": [
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Monday",
"Tuesday"
],
"opens": "11:30",
"closes": "22:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": [
"Wednesday",
"Thursday",
"Friday"
],
"opens": "11:30",
"closes": "23:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday",
"opens": "16:00",
"closes": "23:00"
},
{
"@type": "OpeningHoursSpecification",
"dayOfWeek": "Sunday",
"opens": "16:00",
"closes": "22:00"
}
],
"menu": "http://www.example.com/menu",
"acceptsReservations": "True"
}
</script>
view raw restaurant schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct restaurant information.

Things to consider in restaurant schema are timings, menu and table reservation.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

organization schema icon

SCHEMA MARKUP FOR ORGANIZATION

Adding schema markup to your organization helps google in telling the users about the company, office locations, contact information and social media profiles. 

Below is the example of organization rich snippet.

organization rich snippet example

This process is same as local business schema. Go into your WordPress admin and navigate to the particular page. Next, add a new custom field. Now, give the name value as ‘schema’ and add the following code as value.

<script type="application/ld+json">
{ "@context": "https://schema.org",
"@type": "Organization",
"name": "Example Strategies",
"legalName" : "Example Strategies Llc",
"url": "http://www.example.com",
"logo": "http://example.com/logo.png",
"foundingDate": "2009",
"founders": [
{
"@type": "Person",
"name": "Roy"
}
],
"address": {
"@type": "PostalAddress",
"streetAddress": "900 Linton Blvd Suite 104",
"addressLocality": "Delray Beach",
"addressRegion": "FL",
"postalCode": "33444",
"addressCountry": "USA"
},
"contactPoint": {
"@type": "ContactPoint",
"contactType": "customer support",
"telephone": "[+561-526-8457]",
"email": "info@example.com"
},
"sameAs": [
"http://www.freebase.com/m/0_h96pq",
"http://www.facebook.com/elitestrategies",
"http://www.twitter.com/delraybeachseo",
"http://pinterest.com/elitestrategies/",
"http://elitestrategies.tumblr.com/",
"http://www.linkedin.com/company/elite-strategies",
"https://plus.google.com/106661773120082093538"
]}
</script>
view raw organization schema hosted with ❤ by GitHub

Note: Edit the values in the code snippet so it contains your correct organization information.

Things to consider in organization schema are office locations, contact information and social media profiles.

Add the Custom Field and update your page. Test your URL using Google’s Structured Data Testing Tool, to check if there are any errors.

There are some new types of schema coming up. The recent ones are FAQ, Q&A and HowTo.

Now It's Your Turn

 

Now I would like to turn it over to you

Are you going to add schema markup to your WordPress website using the above method?

Or maybe you have a question about something you read.

Either way, let me know by leaving a comment below right now.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

ARE YOU IN?

Learn about the exclusive wordPress tips and insights. join and stay ahead of the pack.

get exclusive wordpress tips & tricks

Learn about the exclusive wordPress tips and insights. join and stay ahead of the pack.

Share
Tweet
Share
WhatsApp