The Problem With Infographics and SEO (and How to Fix It)

SEO

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.

Mahalo

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

Related Posts Plugin for WordPress, Blogger...

Filed under:
SEO

Tell us what you think

  • Pingback: How to Make Your Infographic Content Go Viral | I've Tried That()

  • http://raventools.com Jon Henshaw

    Jon, the example I made sucks. All you did was point it out ;) I did the best I could do under time constraints and not having access to a designer :D

  • http://www.ephricon.com/ Jon Payne

    Hi Jon,

    I like the thinking here, and indeed I can see some applications with CSS-based infographics that aren’t fully images. That said, your example is basically a list so it works out okay. But take something that is a process or what have you, images make it much more practical to design a process with arrows and whatnot to make it more visually engaging. I know with unlimited time a good designer can do anything with CSS, but as a practical matter I see a lot of times still where an image is going to do a better job with much less development work.

    Plus, less potential duplicate content filtering of the pages that are linking to you?

  • http://www.opticempire.com.au Tarik

    Ah, didn’t notice that, thanks for the good write up!

  • http://raventools.com Jon Henshaw

    Yes, and I mention that in the article. That’s why the embed code has the backlink located outside of the iframe. You can view the embed code at the bottom of the Google Reader Alternatives infographic example I made.

  • http://www.opticempire.com.au Tarik

    Wouldn’t the backlinks inside the iframe be of no value link wise?

  • http://raventools.com Jon Henshaw

    Surely this depends entirely on what you’re trying to achieve.

    Can’t argue with that comment. Doesn’t everything?

    This is the SEO argument/statement I’m trying to make: What good is a backlink that goes to a page on your site with the exact same image? The destination page needs to be text-rich if it’s going to have a chance to perform well in the SERPs. That’s why I use SEO Book as an example of a site that is at least doing it right in regards to the content on the page. My method is simply an ideal – the ultimate version of a contextualized infographic.

  • http://www.twitter.com/MartinOddy Martin

    Surely this depends entirely on what you’re trying to achieve.

    If your goal is increased search engine visibility, an infographic’s primary objective is to obtain links and social shares and bring value to its parent domain. Being search engine readable HTML/CSS isn’t a prerequisite, making the business case for the additional costs associated with conversion from image to code tough to justify.

  • http://raventools.com Jon Henshaw

    The biggest difference that I see is that they still have you embed the image instead of the page, so you lose any interactivity when it’s shared.

  • http://www.convergentmedia.co Alistair Lattimore

    The first example I saw using this technique that I thought was well done was the conversion rate optimisation one by SEOgadget. When I first viewed it, I instinctively assumed it was a standard image based on the complex layout, interconnecting lines/arrows and then realised it was HTML/CSS and was impressed someone put the effort in to create a layout as complex as that.

  • http://raventools.com Jon Henshaw

    Heather, it definitely takes a little more work. Especially if you go the interactive route. My example is actually pretty basic (no frills HTML and no absolute positioning of objects) and it didn’t have the help of an actual designer. It didn’t take me very long, so it still may be within a smaller client’s budget (I dunno).

    However, with CSS’ absolute positioning and a good designer, there’s no reason why this type of infographic couldn’t look similar to other infographics that look like they could only be done as an image. But I agree, that would definitely cost more and be out of reach for clients with a tight budget.

  • http://www.heatherphysioc.com Heather

    Nice, Jon! Love it. I plan to team up with my favorite designer and put one together sometime in the future.

    It also got me thinking about smaller, lower budget clients with more limited resources and how this may [seem|be] unattainable to them (for now), and how even just breaking up the usual old infographic into multiple, smaller images could be slightly better than one giant beast of an image. Could be a slightly less crappy and an extremely rudimentary way to make it just a touch more SEO-valuable. And possibly more social share-friendly, too, since it wouldn’t be a tall/skinny thumbnail, but instead could be a more thumbnail-proportioned, eye-catching graphic when it pulls into social sites.

    I’d still go with an interactive infographic over that any day of the week, but just thinking out loud on how to persuade small clients to meet in the middle and evolve over time.