Wednesday, July 4, 2012 SEO Friendly Gists

Recently I converted the code samples on my blog to use GitHub Gist.

Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.

Although I'm a big fan of Gist I was concerned that, because JavaScipt is used to render gists, my code samples would not be indexable by Google. I researched this and, although I couldn't find a conclusive answer, the consensus seemed to confirm my suspicion that Google does not index content rendered using JavaScript.

Gist also has a couple of other drawbacks:

1. anyone viewing my blog with JavaScript disabled will not see the code samples.
2. if Gist is ever taken offline my code samples would be lost.

Fortunately there is a solution to these problems. SEO Friendly Gists is a tool created by Rob Hurring. Quite simply you enter the id of your gist, click 'Generate', and the tool will create some HTML for you. The HTML includes the usual Gist JavaScript embed code followed by the code sample itself provided as noscript content. This HTML can then be dropped into your website.

Although Google doesn't index content rendered using JavaScript it does index noscript content. Also, anyone now viewing my blog with JavaScript disabled will see the noscript content. Finally, I have a backup of all my code samples on my blog so if Gist is ever taken offline my code can be recovered.

I think this is a great solution, but there are a couple of gotchas to look out for:

1. if you ever amend a gist you'll need to re-generate the embed code to ensure the noscript content is correct.
2. inside the noscript tag you'll need to add a pre tag to format your code nicely.

Tags

Comments

Be the first to add a comment!