Last week we mentioned Google retiring authorship program with a post on the end of the rel=author experiment.
While we’ve also discussed the value of Microformats and Schema markup in previous blog posts the level of the discussion was far from technical and we know that some of our clients would like to know how to make the needed changes to their templates/pages.
So lets take a moment right now and look at some simple examples of a ‘BlogPosting‘ markup which is a specification of the ‘Article‘ markup.
Ideally you should be as specific as possible; In the case of this actual post I’m crafting, selecting a ‘TechArticle‘ schema vs. ‘BlogPosting‘ would be more specific and accurate. As with any work you do for your website, you should stop to consider how feasible your plans are and how much value there is in the added work.
This blog post’s markup officially starts with:
<div class="clsPost">
In WordPress a blog post container typically starts with:
<div class="clsPost"><div id="main" class="wrapper">
We want to include markup on this container to explain that it holds a blog post by adding this attribute:
itemscope itemtype="http://schema.org/BlogPosting"
For our page the result would be:
<div class="clsPost" itemscope itemtype="http://schema.org/BlogPosting">
Now that the container is marked up we can put schema on the elements inside.
Title
Titles are indicated by adding :
itemprop="headline"
In our blog this would be attached to the title inside the H2 tag. On WordPress it is very similar:
<h1 class="entry-title" itemprop="headline">Blog Post Title Goes Here</h1>
Author
Titles are indicated by adding :
itemprop="author"
In our blog this would be attached to the ‘clsAuthor’ div. On WordPress it is inside a span with the class “author vcard”:
<a class="author vcard" href="http://site.com/?author=1" rel="author" itemprop="author">J.Doe</a>
Date
Dates are indicated in the BlogPosting schema by adding :
itemprop="datePublished"
In our blog this would be a ‘clsDateCreated’ div. On WordPress it is inside a span with the class “entry-date“:
<time class="entry-date" datetime="2014-09-05T21:50:14+00:00" itemprop="datePublished">September 5, 2014</a>
Category:
Breaking posts into categories can really help with indexing and sorting so you really want to make sure these elements are tagged properly. For a Caorda blog post this would be the ‘clsTags’ div and in WordPress it would vary based on theme.
Regardless of tracking down the element in your theme, the Schema markup to add will always be :
itemprop="category"
Images
Image elements have great mark-up attributes on them already but the BlogPosting schema supports them using the following :
itemprop="image"
In a Caorda blog this would be attached to each <img … >. On WordPress the same applies:
<img class="alignnone" src="/wp-content/uploads/2014/09/Pic.png" itemprop="image">
Body
We already flagged the container for the whole post/article but we should also mark-up the start of the content:
itemprop="articleBody"
For a Caorda blog post this would get added to the ‘clsContent’ div and on WordPress it is the ‘entry-content’ div:
<div class="entry-content" itemprop="articleBody">
Reviews, Ratings, Votes
Schema.org has multiple methods of adding review and rating mark-up. Depending on your choices for your blog/articles you may or may not have comments that include the needed data.
For the ‘BlogPosting’ I would expect most users to be seeking an ‘aggregateRating’ which supports:
itemprop="ratingValue"itemprop="ratingCount"
If you allow individual reviews, with an author name, and more complex values, that’s also supported if you dig into the Schema.org documentation.
Social Media Markup
There’s also support for social media likes/follows/etc. via meta tags like these:
<meta itemprop="interactionCount" content="UserTweets:11"/><meta itemprop="interactionCount" content="UserComments:33"/>
With so many different Schema types to explore there’s certainly a lot more we could discuss and document if there is interest beyond the information that we have provided here. Let us know?