Our Awesome SEO Friendly Infographic


Step 1

The Landing Page

The infographic itself should be on its very own page with SEO friendly heading tags and Open Graph protocols in the meta data.

Code your infographic
Step 2

display with code

Code up your awesome design with HTML and CSS (using images only when you really, really, really have to).

HTML and CSS image
Tip icon

Tip: Use target = “_parent” in your link tags to keep external links from opening inside the iframe.

Step 3

Embed your Code

Most infographics are are just images on a page. For our infographic, we’re going to use an iframe to display our amazingly SEO friendly code as if it was an image.

To keep the parent page search-engine friendly, make sure to use a canonical tag pointing to your original code.

iFrame icon
Tip image

Provide a code snippet for others to share your infographic on their blogs. Here’s a nifty tool that will help you convert your embed code into characters to display on your site.

More Ideas

Yes, you can still pin it!

Use a screen capture tool to make an image of your better-than-an-image infographic.

Then simply upload the screen capture to your site and create a Pinterest widget.