Add itemprop=“image” to WP Content Images

Search engines like Google, Bing, Yahoo, and Yandex want to be in the know. They want to know what your content means, not just what it says. As a result, Google, Microsoft, and Yahoo came together in June, 2011 to announce a collaboration to create and support a standard set of schemas for structured data markup on web pages. The site they developed is Schema.org.

Schema markup is one of the latest evolutions in Search Engine Optimization (SEO). Schema markup is a vocabulary—a semantic vocabulary. It is code that you put on your website to help search engines return more illuminating results for users. These vocabularies represent entities, and the relationships between entities and actions. Schema markup can easily be extended through a well-documented extension model.

Why Good Schema Markup is Important

Websites that use schema markup rank better on Search Engine Results Pages (SERPs) than sites without markup. One study published by Searchmetrics determined that websites with markup rank an average of four positions higher in the SERPs than those without schema markup. This evidence may turn out to be anecdotal though and these results should be treated with caution. While there is apparently some correlation, it is not entirely clear that this higher result is due to the markup alone. However, if I can rank my sites four positions higher than my competitors by having proper schema markup, I'll take that any day of the week.

WordPress and Schema.org

There's no doubt that WordPress is the world's most popular web platform. Unfortunately for the millions of WordPress powered websites, it does not directly support schema markup. However, WordPress can be extended to include schema markup through plugins, or themes, or popular theme frameworks such as the Genesis Framework.

Genesis and Schema.org

Just as WordPress is the world's #1 web platform, the Genesis Framework is the #1 professional web developers' tool for building custom themes. There's good reason for its wide spread support. It's code is progressive, tight, and fast executing. It generates the latest standards of schema markup, and as of the Version 2.2.2 release, is fully Section 508, WCAG 2.0, and A11Y compliant. This means your content, when processed through the Genesis Framework, is accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

So What Problem Are We Trying To Solve?

While Genesis is superior in every way when it comes to adding schema markup to your content, there is one thing it doesn't do. It might be best to let Genesis lead developer Nathan Rice explain:

Images that are inserted into the content of a post will need to have that property [itemprop=“image”] added manually. Genesis doesn’t generate the markup for anything in the post content, so that bit is up to you.

With that being said, if you are using the Genesis Framework on your site, you have three options.

1. You can edit all of your posts and pages to manually add the schema markup to every one of your image tags.
2. You can update the wp_posts table directly with SQL to add the schema markup to your content's image tags
3. You can add the little snippet of code below to your theme's functions.php file and not worry about it again

/**
 * Add itemprop image markup to img tags
 * @author Victor M. Font Jr.
 * @link //victorfont.com/
 */
add_filter('the_content', 'vmf_add_itemprop_image_markup', 2);
function vmf_add_itemprop_image_markup($content)
{
	//Replace the instance with the itemprop image markup.
	$string = '<img';
	$replace = '<img itemprop="image"';
	$content = str_replace( $string, $replace, $content );
	return $content;
}