The Web Developer's Interactive Cheatsheet for SEO and the Open Graph

The Web Developer’s Interactive Cheatsheet for SEO and the Open Graph

Posted by Ray Grieselhuber

This post was originally in YouMoz, and was promoted to the main blog because it provides great value and interest to our community. The author’s views are entirely his or her own and may not reflect the views of SEOmoz, Inc.

A couple of months ago, I came across Danny Dover's excellent Web Developer's Cheatsheet for SEO. It was great for web developers whether or not they had experience with SEO because there is inevitably something that you end up Googling if you don't use it on a daily basis.

After spending a little time with Danny's cheatsheet, I realized that I wanted something interactive so that I could play with the different snippets it offered. So, I decided to build an interactive cheatsheet that lets you enter in the values for the page title, keyword, URLs for links, etc. and would automatically populate the relevant tags for your HTML document.

The finished product is the Web Developer's Interactive Cheatsheet for SEO and the Open Graph. (Finished may be too strong of a word because there is more that I'd like to do with it. ).

In addition to the traditional metadata recommendations included in pretty much every SEO guide, I wanted to also make sure people had an easy way to start including Open Graph tags on their pages. Ensuring that these tags are set up and structured correctly has a big impact on the shareability of your content across social networks, especially Facebook. This, in turn, has an impact on SEO. So, in the cheatsheet, I also automatically generate correctly formatted Open Graph tags.

So, the way it works is this: you specify the desired values in the form at the top of the page. Some of the fields, such as title and meta description have a character counter that automatically decrements as you enter your text. This gives you a simple way to ensure that you're exceeding the recommended characters for each one of those fields.

I've also been using this tool to explain to beginners how to set up metadata and the importance of optimizing for search engine crawlers and social sharing.

Once you've set up your fields, just scroll down and copy-paste the metadata you want into your own HTML document.

Here is an example of the HTML tags that are generated:

And some sample Open Graph tags:

There are few things that didn't make it into this original release, but things that I plan to add soon. These include:

• More explanation on each of the fields / tags
• Ability to download a boilerplate HTML5 document populated with your data
• More explanation around other related topics such as setting up redirects, etc.

I'd love to hear from people with suggestions for improving this tool. Thanks for checking it out!

Sign up for The Moz Top 10, a semimonthly mailer updating you on the top ten hottest pieces of SEO news, tips, and rad links uncovered by the Moz team. Think of it as your exclusive digest of stuff you don’t have time to hunt down but want to read!