August 7, 2015

Textual description of firstImageUrl

How To Add Schema Structured Data Markup To WordPress Site

|
Learn how to add structured data markup to WordPress sites so that more online searchers will click on your rich snippets from the search engine results pages.

In short, to improve your click-through rate.

Anyway, for non-techies, the technical term structured data markup can be intimidating.

When you try to read about this structured data markup stuff, you come across jargon that include: schemas, micro-date, JSON-LD,  RDFa, itemscope, itemtype, itemprops and whatever.

Don't bother to find out more from schema.org 

You will find it more confusing.

how to add structured data markup to WordPress site

Let me explain to you in the simplest way possible.

Structured data markup is just information (tags) added into your web page html.

By adding these additional tags to the HTML of your web pages, you tell the search engines precisely what it is all about.

When the search engines read them, they have a better understanding the content of your web pages.

As a result, your web page shown in the search results page, will has a more accurate and relevant or "richer" descriptions.

That's what they called it a rich snippet.

add structured data markup to WordPress sites

A rich snippet is the the one that displays attractive data such as images and star ratings in search engine results. (the second one in the image below)


Basically structured data is what makes search results look better.

When your web page with more detailed descriptions appeared in the search results page, it will definitely attract searchers to check out what your web page is all about.

So, there is a better chance, they will click on your web page.

In short, with structured data markup in your blog post or web page, it will have better click-through rates.

How To Add Schema Structured Data Markup To WordPress


Here is an easy-to-follow tutorial on how to set up schema markups in your WordPress site.

Step One: Find Out Whether Your Blog Posts Have Structure Data Markup

Before you do anything, I want you to test any of your blog posts to check whether it has been formatted with structured data markup. 

1. Go to Google Structured Data Testing Tool.

2. Paste your blog post URL in the space "Enter a URL".

3. The click on the "RUN TEST" button.

Note: For Chrome users, you can install this add-on called "OpenLink Structured Data Sniffer".

It can check your current page’s structured and semi-structured data as well.

Step Two: How To Add Schema.org Markup to Your WordPress Site

Note: Before you proceed, make sure you have already backup your WordPress site. 

Let's get started.

You need to add or edit markup to the following templates of your WordPress theme:

header.php
index.php
single.php
page.php
footer.php
sidebar.php


Header Template (header.php)

1. Go to your header.php template and make the following changes:

2. Look for this:

<body <?php body_class(); ?>>
Delete it and replace with this:

<body <?php body_class(); ?> itemscope="itemscope" itemtype="http://schema.org/WebPage">
3. Look for this:

<header id="masthead" class="site-header" role="banner">
Delete it and replace with this:

<header id="masthead" class="site-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
4. Look for this:

<h1 class="site-title">
Delete it and replace with this:

<h1 class="site-title" itemprop="headline">
5. Look for this:

<h2 class="site-description">
Delete it and replace with this:

<h2 class="site-description" itemprop="description">
6. Look for this:

<nav id="site-navigation" class="main-navigation" role="navigation">
Delete and replace with this:

<nav id="site-navigation" class="main-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">
Homepage Template (index.php)

1. Look for this:

<main id="main" class="site-main" role="main">
Delete and replace with this:

<main id="main" class="site-main" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
2. Look for this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Delete and replace with this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
3. Look for this:

<h2 class="entry-title">
Delete and replace with this:

<h2 class="entry-title" itemprop="headline">
4. Look for this:

<div class="entry-thumb">
Delete and replace with this:

<div class="entry-thumb" itemprop="image">
5. Look for this:

<time class="entry-time published" datetime="<?php the _time('c'); ?>>
Delete and replace with this:

<time class="entry-time published" datetime="<?php the _time('c'); ?>" itemprop="datePublished">
6. Look for this:

<span class="author-link">
Delete and replace with this:

<span class="author-link" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="author">
7. Look for this:

<span class="author vcard">
Delete and replace with this:

<span class="author vcard" itemprop="name">
8. Look for this:

<div class="entry-summary">
Delete and replace with this:

<div class="entry-summary" itemprop="text">
9. Look for this:

<div class="entry-content">
Delete and replace with this:

<div class="entry-content" itemprop="text">
Post Template (single.php)

1. Look for this:

<main id="main" class="site-main" role="main">
Delete and replace with this:

<main id="main" class="site-main" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
2. Look for this:

<h1 class="entry-title">
Delete and replace with this:

<h1 class="entry-title" itemprop="headline">
3. Look for this:

<div class="entry-content">
Delete and replace with this:

<div class="entry-content" itemprop="text">
4. Look for this:

<time class="posted-on published" datetime="<?php the _time('c'); ?>>
Delete and replace this:

<time class="posted-on published" datetime="<?php the _time('c'); ?>" itemprop="datePublished">
5. Look for this:

<span class="author-link">
Delete and replace this:

<span class="author-link" itemscope="itemscope" itemtype="http://schema.org/Person" itemprop="author">
6. Look for this:

<span class="author vcard">
Delete and replace with this:

<span class="author vcard" itemprop="name">
7. Look for this:

<div class="entry-thumb">
Delete and replace with this:

<div class="entry-thumb" itemprop="image">
8. Look for this:

<div class="entry-content">
Delete and replace with this:

<div class="entry-content" itemprop="text">

Page template (page.php)

1. Look for this:

<main id="main" class="site-main" role="main">
Delete and replace with this:

<main id="main" class="site-main" role="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">
2. Look for this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Delete and replace with this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">
3. Look for this:

<h1 class="entry-title">
Delete and replace with this:

<h1 class="entry-title" itemprop="headline">
4. Look for this:

<div class="entry-content">
Delete and replace with this:

<div class="entry-content" itemprop="text">
Footer Template (footer.php)

1. Look for this:

<footer id="colophon" class="site-footer" role="contentinfo">
Delete and replace with this:

<footer id="colophon" class="site-footer" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">
Sidebar Template (sidebar.php)

1. Look for this:

<div id="secondary" class="widget-area" role="complementary">
Delete and replace with this:

<div id="secondary" class="widget-area" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
Note: Some of you might not be able to find what all I've shown above.

Some of the main content part of your template might be called by another php file name.

You should check for: content.php, content-single.php and content-page.php files and make the changes there.

After you have done, test your markup with Google Data Testing Tool.

This is another site where you can get your Structured Data Test.

Note: You can also add schema structured data markup to WordPress with a plugin.

Related Tips:

* How To Add Structured Data Markup For Blogger Template

* How To Fix Missing Required hCard Author Error For WordPress

* How To Fix Missing Required Field Updated For WordPress

* How To Fix Missing Required Field Entry-title For WordPress