Schema.org Markup for WordPress – Part 1

Posted on March 7, 2017March 7, 2017 by Andy under WordPress

Tagged: html5 markup schema seo wordpress
You can follow any response to this post though the RSS feed

I’ll start by saying…

There’s a lot more to be said on this subject, but I’ll summarise by saying that the best ideas implemented in the worst way possible are what keep us in business as web developers.

How anyone can possibly work out how to apply schema markup to their own website without a week of nothing else to do is beyond me. It’s not that it’s complex, but the lack of information on the topic, particularly the website that’s supposed to be the authority on this makes it a real journey.

Anyway, after several hundred Google searches, we’re not sure if we feel enlightened or not.

The goal…

We recently made a decision to mark up our own site with schema microdata, so we figured we’d document some of our experiences here.

For now, this snippet will get you started if you’re using WordPress.

In particular, it will help search engines, scrapers & robots identify the differences between the types of content on your site. At this stage we’re only identifying pages, such as the difference between a technical article, a contact page or a portfolio. Individual page elements will have to wait for another day.

So there’s two steps here…

1) Place the function below into your functions.php file of the currently active theme…

/**
 * Sets up schema.org markup sitewide
 * 
 * The following is an example from our own site.
 * If you have no need for Technical articles
 * or "Creative" works then you can ditch those
 * And simply reference the alternatives located
 * here >> http://schema.org/CreativeWork
 *
 */
if ( ! function_exists( 'twentyonedesigns_schema_dot_org_markup' ) ) :
function twentyonedesigns_schema_dot_org_markup() {

	$schema = 'http://schema.org/';

	if ( is_single() ) {
		$type = "Article";
	}

	if ( is_author() ) {
		$type = 'ProfilePage';
	}

	if ( is_search() ) {
		$type = 'SearchResultsPage';
	}

	if ( is_page( 124 ) ) {
		$type = 'ContactPage';
	}

	if ( is_singular( 'snippets' ) ) {
		$type = 'TechArticle';
	}

	if ( is_singular( 'portfolio' ) ) {
		$type = 'Creative';
	}

	if ( is_singular( 'testimonials' ) ) {
		$type = 'Review';
	}

	if ( is_page() || is_archive() ) {
		$type = 'WebPage';
	}

	echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';

}
endif;

/**

* Sets up schema.org markup sitewide

* The following is an example from our own site.

* If you have no need for Technical articles

* or "Creative" works then you can ditch those

* And simply reference the alternatives located

* here >> http://schema.org/CreativeWork

if ( ! function_exists( 'twentyonedesigns_schema_dot_org_markup' ) ) :

function twentyonedesigns_schema_dot_org_markup() {

$schema = 'http://schema.org/';

if ( is_single() ) {

$type = "Article";

}

if ( is_author() ) {

$type = 'ProfilePage';

}

if ( is_search() ) {

$type = 'SearchResultsPage';

}

if ( is_page( 124 ) ) {

$type = 'ContactPage';

}

if ( is_singular( 'snippets' ) ) {

$type = 'TechArticle';

}

if ( is_singular( 'portfolio' ) ) {

$type = 'Creative';

}

if ( is_singular( 'testimonials' ) ) {

$type = 'Review';

}

if ( is_page() || is_archive() ) {

$type = 'WebPage';

}

echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';

}

endif;

Step 2) Add the following function call to the <HTML> tag in the header.php file located in your currently active theme.

// Find the line in your header.php file that looks like this...
<html <?php language_attributes(); ?>>

// ...and change it to this...
<html <?php twentyonedesigns_schema_dot_org_markup(); ?> <?php language_attributes(); ?>>

// Find the line in your header.php file that looks like this...

// ...and change it to this...

Obviously we’re just referencing our function from step 1, so rename both the function and the call in steps 1 and 2 to whatever you like.

In our case, we’re inserting the function into the <html> tag, however there’s no right way to do this. Using the <body> tag, or a lower level element would be perfectly suitable in some situations.

In fact the more specific you are, the better the results. An example might be a page that contains multiple element types, such as articles, portfolios, blog entries and so on, like a home page. In situations like this, you may find that your markup will vary from most other pages on your site.

We’ll follow up shortly with another post showing how we identified some of the major elements throughout the site, such as navigation, headers, footers and so on.