PostHeaderIcon 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. :-) ).

Web Developer's Cheatsheet for SEO and the Open Graph

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:

Cheatsheet SEO Tags

And some sample Open Graph tags:

Cheatsheet 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!


Similar Posts:

The In-Content Ad Leader Buy and Sell text links Health and Beauty Store

Article Source: The Only Yard For The Internet Junkie
If you like all this stuff here then you can buy me a pack of cigarettes.

Comments are closed.

Free premium templates and themes
Add to Technorati Favorites
Free PageRank Display
Categories
Archives
Our Partners
Related Links
Resources Link Directory Professional Web Design Template