The Problem With Infographics and SEO (and How to Fix It)
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:
- 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.
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.
- I created the infographic at http://blog.raventools.com/google-reader-alternatives/. Feel free to view and learn from the source code.
- I created a post on Raven’s blog at http://raventools.com/blog/best-google-reader-alternatives and used Yoast’s WordPress SEO Plugin to make the canonical link point to http://raventools.com/google-reader-alternatives/
- I used Google’s Screen Capture Chrome extension to turn the infographic into an image so it can be shared on image based social networks like Pinterest.
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!