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:

[code lang="php"]genesis();[/code]

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:

[code lang="php"]require('genesis-schema-helper-functions.php');[/code]

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:

[code lang="php"]
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 );
[/code]

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 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.

Coming up next!


37 Responses to Schema.org & Genesis 2.0

  1. Dennis
    Dennis  • 11 years ago

    Wow great article and like your blog information

  2. Dorothea
    Dorothea  • 11 years ago

    Wonderful publish, maintain the truly amazing analysis!

  3. Josh Brancek
    Josh Brancek  • 11 years ago

    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????

  4. Furqan Hameed
    Furqan Hameed  • 12 years ago

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

  5. Hindi Series
    Hindi Series  • 12 years ago

    i found Schema very useful.

  6. Bolivar
    Bolivar  • 12 years ago

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

  7. Mukesh Mali
    Mukesh Mali  • 12 years ago

    Waiting for wordpress 3.6 & genesis 2.0 stable version.

  8. Toney
    Toney  • 12 years ago

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

  9. Rednasil
    Rednasil  • 12 years ago

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

  10. Riaan Kruiwa
    Riaan Kruiwa  • 12 years ago

    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

  11. Chirag
    Chirag  • 12 years ago

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

  12. Isaac
    Isaac  • 12 years ago

    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.

  13. Norcross
    Norcross  • 12 years ago

    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.

  14. Ruairi Phelan
    Ruairi Phelan  • 12 years ago

    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!

  15. Ruairi Phelan
    Ruairi Phelan  • 12 years ago

    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!

  16. Glen Craig
    Glen Craig  • 12 years ago

    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!

  17. Merlijn
    Merlijn  • 12 years ago

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

    Cheers!

  18. Brad Dalton
    Brad Dalton  • 12 years ago

    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.

  19. Rajesh
    Rajesh  • 12 years ago

    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.

  20. Arafin Shaon
    Arafin Shaon  • 12 years ago

    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 Gardner
      Brian Gardner  • 12 years ago

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

      • Denrrou
        Denrrou  • 12 years ago

        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 Gardner
          Brian Gardner  • 12 years ago

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

  21. Eli
    Eli  • 12 years ago

    Looks like you lost your favicon in the transition.

    • Joost de Valk

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

      • tony greene
        tony greene  • 11 years ago

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

      • Blake Denman
        Blake Denman  • 12 years ago

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

        • Eli
          Eli  • 12 years ago

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

  22. Shaan Nicol
    Shaan Nicol  • 12 years ago

    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

  23. James Thrasher
    James Thrasher  • 12 years ago

    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!

  24. Alex
    Alex  • 12 years ago

    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

    • Brock
      Brock  • 12 years ago

      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

      • ODG
        ODG  • 12 years ago

        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.

    • Joost de Valk

      What kind of theme are you looking for Alex?

  25. Dale Reardon
    Dale Reardon  • 12 years ago

    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.

  26. Bill Erickson
    Bill Erickson  • 12 years ago

    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’].

    • Joost de Valk

      Good call, fixed that!