Schema.org & Genesis 2.0

About a week ago, we “migrated” Yoast.com to Genesis 2.0, in the process we switched to their new HTML5 / Schema.org code and we slightly updated our design, making the header shorter and making improvements to our responsive design. This was a bit of work, but not even half as much as that sounds like and that is due entirely to the fact that Genesis 2.0, and especially it’s schema.org functionality, rocks. Let me elaborate.

Why implement Schema.org markup?

Let me start with explaining why you should be bothered with schema.org if you weren’t convinced yet. Not just Google uses schema.org, all 4 major search engines, Google, Yahoo!, Bing and Yandex use it for several different purposes. Yandex recently started doing something that’s way cooler than Google’s rich snippets, you should check that out. But it’s not just them. Recently, Pinterest joined the party by announcing support for Product, Recipe and Movie schema’s through their Rich Pins effort.

So, in my opinion, schema.org markup is a must for everyone serious about their websites optimization.

General service warning: what follows is rather geeky. If you’re not a developer but you do use Genesis or are considering it, feel free to forward this to your developer.

Schema.org enhancements

This site runs a custom Genesis child theme. Most of the CSS and Genesis work for that was done by the awesome Bill Erickson, but I took quite some time after he’d finished to add in all sorts of schema.org goodness to pages. I want my site to be a living example of what is possible from a rich snippets perspective in the SERPs and I use it to experiment with things all the time.

We have a few different post types here on Yoast, which each have their own Schema.org counterpart. Take, for instance, my speaking page. I have a post type for speaking events, and the speaking page is actually the post type archive for that post type. If you test that page with the Structured Data Testing Tool Google provides, you’ll see it’s marked up with cool Event schema’s, which will show up in the search results too:

Speaking Page - Showing event schema markup

There are various ways you could reach this with Genesis, I do it by creating a file, archive-speaking_event.php, where “speaking_event” is the name of the post type. Basically, to get this file to display the post type archive, all it needs to have is the following code:

genesis();

But in our case, we want to do a bit more. We need to mark up each individual post as an Event type and link them to the appropriate URLs for the individual events. Also, there’s all sorts of output that we’ll need to gather, like dates, location names, addresses and countries. Let’s start with the easy bits:

Changing the Schema type of an entries output

First of all, add this file to your child theme by including it from your functions.php. If you simply add it to the same directory it’s as simple as adding this to the end of that file:

require('genesis-schema-helper-functions.php');

That file contains helper functions we’ll need to do all the work. Now remember, this used to take all sorts of extra divs to do well or you were required to rewire the base framework. With Genesis 2.0 though, it’s as simple as adding this before the genesis() call:

add_filter( 'genesis_attr_entry', 'yoast_schema_event', 20 );
add_filter( 'genesis_attr_entry-title', 'yoast_itemprop_name', 20 );
add_filter( 'genesis_attr_entry-content', 'yoast_itemprop_description', 20 );
add_filter( 'genesis_post_title_output', 'yoast_title_link_schema', 20 );
add_filter( 'genesis_attr_content', 'yoast_schema_empty', 20 );

This does the following:

  • turn the schema type of each individual entry on the page into an event;
  • replace the normal “headline” itemprop for the entry title with “name”, as required by this specific schema;
  • change the itemprop of the entry content to “description”, instead of “text”, which is the default for a blog post;
  • make sure the link in the headline has the itemprop=”url” needed;
  • remove the overall schema.org type of the page as that would confuse the search engine.

The basic work is now done, of course we need all the meta data, and we’ll need to retrieve that in the conventional way. The code I used for that can be found in the gist I created for this file.

This bit of work replaced hundreds of lines of ugly code with easily readable and easily applicable code which as a bonus actually has less of a need for extra divs etc in the output. I absolutely love it. If you want to see more examples of pages on this site with cool Schema markup, check these:

  • my Genesis review, which itself has beautiful review markup, as you can see here.
  • my plugin pages, for instance my WordPress SEO plugin page, which has product + review markup, see here.
  • this, or any other post, which has the default Genesis 2.0 blogposting markup.

Genesis 2.0 is still in beta, and I’ve been discussing several possible changes with Nathan Rice, Genesis’ Lead Developer, that would make some of this work even easier. This is where the future lies though: more and better markup for pages with a theme that allows you to easily add the metadata you need. I’m considering adding some Genesis specific functionality to WordPress SEO to make all this even easier, I’d love to know your thoughts and what you’d like to do with all this.

Tags: , ,


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

37 Responses

  1. Bill EricksonBy Bill Erickson on 28 May, 2013

    Great tutorial! I’ll definitely be referring back to this as I build out client sites. And thanks for the mention :)

    I noticed one small typo. In yoast_schema_empty(), you have $attr['itemtype'] listed twice and are missing $attr['itemprop'].

  2. Dale ReardonBy Dale Reardon on 28 May, 2013

    Hi,

    We use Genesis and absolutely love it. Their support is what makes it even better as they are prepared to help out people.

    Please add code to your WordPress plugin – we use both your Video and Local SEO plugins so anything to make things easier.
    Dale.

  3. AlexBy Alex on 28 May, 2013

    I am interested Ina genesis framework for my next website, however I’ve been to the Genesis website and cannot find a Genesis theme or child theme that appeals to me. They seem somewhat limited in their available themes.

    What alternative sites can you recommend that have themes that are WordPress and Genesisi framework compatible, that provide a larger and more diverse child theme inventory to select and purchase from.

    Thank you, in advance, for suggested websites to select from.

    Alex

    • Joost de ValkBy Joost de Valk on 29 May, 2013

      What kind of theme are you looking for Alex?

    • BrockBy Brock on 30 May, 2013

      Hey Alex,

      The overall aesthetic of Genesis child themes is a little lacking compared to some of the other major theme libraries (Woo Themes, for example) – although some child themes, like Balance, are beautiful.

      That said, Genesis is worth it for everything else, and you can customize your theme to make it look nice. Also, they just hired a new creative director, and I imagine the Genesis 2.0 child themes will be gorgeous!

      -Brock

      • ODGBy ODG on 10 June, 2013

        Genesis, until late, has been mainly catering to the developers. The child themes you purchase do not have all the “admin” customizations you might find at Woo. The child themes they sell are great starter kits, with good, clean code…nothing else. All their themes will require some knowledge of CSS to customize.

  4. James ThrasherBy James Thrasher on 28 May, 2013

    As someone who uses your plugins and the Genesis framework, I would love to see deeper integration. I currently use another plugin that adds a few more schema options, so if you could wrap all of that into yours, that would be one less plugin I have to worry about!

  5. Shaan NicolBy Shaan Nicol on 29 May, 2013

    Fantastic article, I can’t wait for the 2.0 upgrade, and looking at using some of this for my clients tour dates and speaking engagements. Would be a great benefit to me if part of WordPress SEO

  6. EliBy Eli on 29 May, 2013

    Looks like you lost your favicon in the transition.

    • Joost de ValkBy Joost de Valk on 29 May, 2013

      Well… Depends on your browser. Apparently Chrome can’t handle the favicon format we have… Looking at a fix now :)

      • Blake DenmanBy Blake Denman on 29 May, 2013

        I’m running Chrome and the Yoast favicon is loading just fine on my end!

        • EliBy Eli on 29 May, 2013

          Yeah, here too. It was showing shortly after I made the comment.

      • tony greeneBy tony greene on 23 June, 2013

        The favicon for your site is showing up fine for me in the latest dev of Chrome.

  7. Arafin ShaonBy Arafin Shaon on 29 May, 2013

    Waiting for wordpress 3.6 & genesis 2.0 stable version. :) Lot of work to be done with my custom child theme specially implementing htm5 markup :(

    • Brian GardnerBy Brian Gardner on 29 May, 2013

      When the time comes for you to implement the markup, you might find the HTML5 Markup Comparison I wrote to be helpful.

      • DenrrouBy Denrrou on 30 May, 2013

        Hey, Brian!

        I’m already using the latest version with html5 support. Did all the stuff with my old css and it looks cool now.

        Just having a bad time with my hooks. I used to have them with the simple hooks plugin but now they all are gone.

        Will you update that amazing plugin to be compatible with genesis 2?

        Thanks!

        • Brian GardnerBy Brian Gardner on 7 June, 2013

          We’ll be updating the Genesis Simple Hooks plugin with the new HTML5 Loop Hooks once Genesis 2.0 is officially out.

  8. RajeshBy Rajesh on 29 May, 2013

    Really great, eagerly waiting for Genesis 2.0, rich snippets help a lot to get more traffic. Thanks a lot, will wait until you update your great SEO plugin.

  9. Brad DaltonBy Brad Dalton on 30 May, 2013

    Just updated the old XHTML markup to HTML 5 in my child theme using Brian Gardners HTML 5 comparison table.

    Took less than 30 minutes.

  10. MerlijnBy Merlijn on 30 May, 2013

    And thanks again Joost for this explanation. We’re definitely going to give this a try.

    Cheers!

  11. Glen CraigBy Glen Craig on 30 May, 2013

    I was already eager to see what Genesis 2.0 had in store but after hearing you have input in it Yoast I’m really stoked!

  12. Ruairi PhelanBy Ruairi Phelan on 31 May, 2013

    Thanks Yoast
    After reading your review of Genesis’ SEO and then this article, I decided to go with the Genesis Framework for my new website that l have just started building today. I will be configuring the schema as directed – all I need now is tour-dates! You can follow my progress at cyberdesigncraft.com if you like.

    @Alex The Epik child theme is fantastic – I am using it – as I find it impossible to design a website for myself!

  13. Ruairi PhelanBy Ruairi Phelan on 31 May, 2013

    Thanks Joost
    After reading your review of Genesis’ SEO and then this article, I decided to go with the Genesis Framework for my new website that l have just started building today. I will be configuring the schema as directed – all I need now is tour-dates! You can follow my progress at cyberdesigncraft.com if you like.

    @Alex The Epik child theme is fantastic – I am using it – as I find it impossible to design a website for myself!

  14. NorcrossBy Norcross on 1 June, 2013

    Glad to see schema getting some love! But I know you’re already on board with it, Yoast. A tip for anyone who’s not using Genesis or your plugin (which is strike one and two, but that’s besides the point) I developed a plugin along with RavenTools to help with getting schema markup on your site. The standard types are there, with more planned in the near future.

    The Schema Creator plugin is available in the repository here.

  15. IsaacBy Isaac on 6 June, 2013

    Anyone that cares a bit about SEO knows that Genesis rocks but i love the fact they keep raising the bar and I just can’t wait to see 2.0 goes live.

  16. ChiragBy Chirag on 8 June, 2013

    Hey Thanks For That Great Deep Explanation !
    Must say I envy your writing skills !
    cheers on another great post ! :)

  17. Riaan KruiwaBy Riaan Kruiwa on 8 June, 2013

    as long as it helps me conquer the world. Muhahahahaha!

    On a different note: I just had the opportunity to work on someone’s Joomla install. What a nightmare! I used to be able to build themes for that system. Things have changed indeed.
    One of the missions, while struggling through the Joomla system, was trying to find a comprehensive free SEO plugin. It’s doing exercises like that, that make me appreciate guys like you, Yoast, giving us something like WordPress SEO. And no, that doesn’t mean I’m giving you a donation. ;-P

  18. RednasilBy Rednasil on 13 June, 2013

    I would love to add music info like duration, album name etc..

  19. ToneyBy Toney on 14 June, 2013

    Great, very informative, i plan on bookmarking this site, well written and just downright enjoyable

  20. Mukesh MaliBy Mukesh Mali on 14 June, 2013

    Waiting for wordpress 3.6 & genesis 2.0 stable version.

  21. BolivarBy Bolivar on 15 June, 2013

    Very good info, I will go ahead and try these genesis out, I heard great things about it..

  22. Hindi SeriesBy Hindi Series on 16 June, 2013

    i found Schema very useful.

  23. Furqan HameedBy Furqan Hameed on 17 June, 2013

    I found Genesis really useful I’m going to try this framework.

  24. Josh BrancekBy Josh Brancek on 23 June, 2013

    Been thinking of switching to Genesis theme cause the old theme I am using mainly (Thesis) is becoming kinda obsolete. Just wanted to ask if there are some awesome skins for the new Genesis theme????

  25. DorotheaBy Dorothea on 23 June, 2013

    Wonderful publish, maintain the truly amazing analysis!

  26. DennisBy Dennis on 24 June, 2013

    Wow great article and like your blog information