When it comes to SEO, infographics suck. They always have.

It’s not because they’re overused, or done poorly (though some of that is true). It’s not because Matt Cutts warned about devaluing links. It’s because they are giant-ass images!

Infographics are the anti-SEO.

Luckily, they don’t have to be. I’m going to show you how to fix the problem with infographics and SEO and make a search engine-friendly infographic.

The Less Crappy Way

The same fundamental SEO rules that apply to video and audio recordings also apply to infographics: Always use text to describe and/or transcribe the object.

Unsurprisingly, SEO Book gets it right when they do infographics. For example, its Google’s Collateral Damage infographic also includes a short article related to the infographic. It provides context and value to the giant image, and thus to the page.


Unfortunately, the less crappy way still uses a giant image, thus it remains somewhat crappy. To totally uncrappify it, we need to ditch the giant image and get a little fancy.

The Kick Ass Way

1. Create an infographic landing page

When I say create an infographic page, I don’t mean slap an infographic on a blog entry. Instead, create a page that is specifically made to contain an infographic. The page should include:

  • Heading/title
  • Short description
  • Infographic with text and images (part of step 2)
  • Embed code (part of step 3)
  • Open Graph META data
  • Links using target=”_parent” (to open outside the iframe)

2. Make the infographic using HTML, CSS and images

It will take a lot more effort to convert your infographic image to HTML, CSS and images, but it’s well worth it. It’s the most search engine friendly, because it makes the text in the image plain text that can be read by bots.

While it may not be possible to render every possible design and layout, you can still create something very attractive that’s supported by all modern browsers. CSS has come a long way. If you doubt me, check out these infographic examples. And with a little bit of JavaScript, you can make a static infographic into an interactive one.

3. Use an iframe with the embed code

Most infographic embed codes link to an image, but we can’t do that since it’s a page. To get around this, the embed code needs to use an iframe instead.

4. Embed the infographic and use a canonical tag

Finally, create your blog entry, and then copy and paste the embed code. Since the blog entry is basically a copy of the infographic, and it’s also using an iframe – something bots generally don’t follow or crawl – you will want to add a canonical tag that points to the infographic page. I recommend using Yoast’s WordPress SEO Plugin to override the canonical tag that WordPress automatically creates.

The Proof: My Real-Life Example

To prove that I’m not just making this up, I created an infographic using this exact method.

Of course, with the embed code the infographic can be published anywhere. The infographic I created below isn’t just published on Raven’s blog, it’s also published on Infographic Journal.

So here it is in all its glory!

Google Reader Alternatives Infographic created by Raven Internet Marketing Tools