Loading...

Open Marketing

Marcia Kadanoff · Marketing Strategy + Execution for Tangible Results

Sunday, April 15, 2012

How to create embed code for your infographic

infographic on infographics
20 Flares Twitter 9 LinkedIn 4 Google+ 1 Facebook 5 Buffer 1 20 Flares ×

Source:  

http://ivancash.com/Infographic-of-Infographics

An emerging best practice with certain types of content — especially infographics — is to make that content available to share with embed code.

This ensures that people come back to your site to download the original content. In this example, we’re going to use the Noob’s Guide to Interactive Marketing – a fabulous infographic created by Unbounce, which is one of our technology partners. (We use Unbounce for landing page development and testing).

Step 1. Create two versions of your infographic.

The best practice that is emerging is to create two versions of your infographic generally in .png format:

  • Full Monty – 1800 pixels wide – all details are evident
  • Teaser – 600 pixels wide – some details not evident at this size

Generally speaking, the full-monty version with be 1800 pixels wide and as long as it needs to be to contain your content. The teaser version should be created no larger than 600 pixels wide. Ideally, you’ll want to create an infographic where some of the detail is not evident when viewed at 600 pixels wide. This encourages visitors to visit your site and download the full-monty version of your infographic.

Step 2. Create the embed code

While there are code generators floating around the web, code itself is really pretty simple. It’s a link and an image. Note that the image is the teaser while the link goes to the full-monty version of your infographic.

Here’s the generic format which you can copy and paste to customize for your infographic.

Step 3. Optimize the embed code for SEO purposes

Your intent here it to create traffic and links back to your site. So spend time on the following elements optimizing the following elements of your embed code.

For reference purposes here is the embed code from the Unbounce Infographic:

Note the elements you will want to optimize by using repetition:

The link to the infographic

Links to the full-monty version of the image.

The name of the teaser image

Note how the name of the image is benefit oriented

The alt text for the teaser image

The same as the name – helps with SEO

The title text for the teaser image

The same as the name & the link – helps with SEO

Link back to your Company

This appears underneath the embed code itself and credits the infographic back to your company

Results to Expect

If you follow the 3 steps listed above, your infographic will drive traffic back to your website, as people see the teaser on a bloggers’ site(s), get interested, and click through to download the full-monty version. Infographics have the potential to generate traffic to your website but do little to generate marketing-qualified leads. There is no name capture and unless you have visitor tracking and analytics software installed on your site, it is unlikely that you will know who is (anonymously) downloading your infographic.

Oh yes, here’s our example properly embedded:
The Noob Guide to Online Marketing - Infographic
Unbounce – The DIY Landing Page Platform

Source

http://ivancash.com/Infographic-of-Infographics

20 Flares Twitter 9 LinkedIn 4 Google+ 1 Facebook 5 Buffer 1 20 Flares ×

Posted in:  Agency · Content Marketing · How To · SEO (Findability | Search Visibility) by Marcia Kadanoff

  1. Comments
  2. |
    Apr 17, 2012
    |

    This is a great post! At Marketo, we find that infographics attract a lot of traffic through social media, so the ability to post one is a key part of an inbound marketing strategy. This kind of tutorial is extremely helpful.

    Your readers may be interested in some other inbound marketing tips. If so, here’s a tip we sheet we put together:

    http://spark.marketo.com/_includes/wp/toolkits/cms/wp-content/uploads//2012/02/inbound_marketing_tip_sheet.pdf

    Thanks again for the tutorial!

    Seth Resler
    Content Manager
    Marketo

    • |
      Apr 17, 2012
      |

      Thanks Seth! Appreciate your thoughtful comment. I think a lot of people don’t realize that if they don’t provide embed code, they’ll be creating traffic for other people versus for their own site.

  3. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  4. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  5. |
    Apr 27, 2012
    |

    Great tutorial and advice. If you are going to invest the time to develop an infographic, you definitely want to make sure it is helping to drive traffic to your site and improve your search engine ranking.

  6. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  7. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  8. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  9. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can help.4. QAs This is content that goes up on a QA site like Quora or the answers section of [...]

  10. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  11. [...] always post your infographic with hide code. Don’t know how to emanate hide code? Here’s a blog post that can [...]

  12. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  13. [...] #4. How to Create Embed Code For Your Infographic [...]

  14. |
    May 22, 2012
    |

    Nice advice, I do find teaser images quite frustrating though unless there’s enough extra content on the full version to make the click through worth it.

    Also, correct me if I’m wrong, but I think there’s still a debate surrounding the Longdesc variable and whether it’ll be used/important in HTML5.

  15. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  16. |
    Jul 18, 2012
    |

    Marketing and sales departments have alawys been doing content marketing it was much easier to sell your wares when you had customer testimonials, whitepapers, case studies, emails and other documentation to help educate the buyer. Now that content is searchable and shareable via the web, though, we had to come up with some kind of name for it Content Marketing. Because buyers are empowered to find the information themselves, content marketing is key because your content needs to be found in the searches and within the networks of those who are looking. Businesses of all sizes are beginning to realize how integral a solid content strategy should be to their marketing plans. Even major corporations like Coca-Cola are betting everything on an integrated content strategy. Via the post by Bluegrass

  17. [...] always post your infographic with embed code. Don’t know how to create embed code? Here’s a blog post that can [...]

  18. |
    Sep 26, 2012
    |

    Thank you so much for this great article. We just created our first infographic but I’m having a bit of a hard time understanding the process of embedding and posting. Here’s our article and infographic link: http://www.vitamedica.com/14-tips-on-plastic-surgery-preparation/

    So, when someone clicks on the infographic, I assume that links to the JPEG or PNG file. Then, it looks like I need to copy and paste the embed code under the infographic so that bloggers can give credit to our infographic. I use WordPress and I’m trying to figure out how to add the embed code. I saved as a text file so when the link is clicked, the html code can be copy and pasted.

    I’m not sure how the process of the blogger works. Do they copy the link for the JPEG file and then copy and paste the embed code underneath the post?

    I’m a bit confused on the steps. If you could clarify, that would be greatly appreciated.

    • |
      Sep 26, 2012
      |

      Yvette, see this article as a follow up – if you use WordPress this makes it wicked easy to create the embed code.
      http://openmarketing.com/agency/a-follow-up-how-to-embed-infographics/

      You’re asking bloggers who put up the Infographic to include the embed code and it is the embed code itself which calls the infographic. The embed code also includes a link back to your site which is SOOO important to drive traffic.

      You can see an example of this – created by the plugin BTW – here:
      http://openmarketing.com/blog/where-architects-fall-short-on-website-design-aia-sf-infographic/

      Hope this helps!

      • |
        Sep 26, 2012
        |

        Thanks so much for providing me with further information. I will review. BTW, are you from Boston? Not too many folks use “wicked” but since I’m from Bean Town perhaps you are too?

      • |
        Sep 27, 2012
        |

        Just a quick follow-up; we downloaded the plug-in from WordPress and it was great. Really made things easy. Thanks again for your help!

  19. [...] Create the embed code for your infographic. It should have the following components as well: [...]

 
Add a Comment