in Search Engine Optimization

Get “Natural” Anchor Text from Infographic Embed Codes using JavaScript

State of Infographics and SEO?

Infographics are an excellent part of a well-diversified content marketing arsenal, and although it should not be the sole reason for their creation, offer a great many SEO benefits to your website. In a 2012 interview with Eric Enge, Matt Cutts, Google’s head of webspam, went on foray about infographics:

“There are ways that infographics can be created and that represent an OK form of promotion […] I would not be surprised if at some point in the future we did not start to discount these infographic-type links to a degree. The link is often embedded in the infographic in a way that people don’t realize, vs. a true endorsement of your site.”

Needless to say, the interview made people second guess the SEO value of infographics. Matt Cutts’ statement however, isn’t all that bad and shouldn’t be perceived as an omen that spells the imminent demise of clever data visualization. It can also be interpreted as an affirmation that a correctly managed (non-spammy) infographic campaign will continue to be effective in the future, even if only with a slightly discounted link value.

Anchor Text in Embed Codes as a Problem

Alt attributes too…

It is a common practice to publish an infographic with an embed code alongside it encouraging visitors to share the infographic on their website.

The problem with this is that we end up a whole bunch of webpages with the same infographic, the same alt attribute, and the same anchor text all pointing to the same place (your website).

Due to the static nature of these embed codes, the links created from them don’t look natural.

Google likes naturally occurring links and dislikes spammy, unnatural links which can get your website penalized. Let’s give the search engines what they want and make the embed codes a little more dynamic!

How to Get More Natural Anchor Text From Infographic Embed Codes

With some simple JavaScript, we can really enhance the value of our infographic embed codes and make them more dynamic. The below script accomplishes this in a couple of ways:

  1. The script allows the user who wishes to embed the infographic to easily change both the anchor text and alt attribute when they go to copy it. Upon clicking in the textarea, the user is prompted with the question of “What would you like to name this infographic when you embed it on your site”? The user designates the anchor text (this is duplicated in the alt attribute) for the infographic and it is updates accordingly in textbox and then auto-selected so he can copy & paste the html into a webpage. This anchor text will be very natural because it is written by real, unique individuals who will all write differently.
  2. Since people may not take the time write something unique when prompted by the embed code, you can set multiple default values which will be displayed if the user chooses to leave the prompt empty or clicks cancel. Any quantity of these default values can be set within the script (the more the better). Upon page load or refresh, the script will randomly rotate between the default values (with different anchor text and different alt attribute value) that are displayed to user in the embed code (set in the script). This will create variation in the anchor text for your infographic (looks more natural) even if the people opt for the default values provided in your embed code.

Click here to check out a live demo of the infographic embed script here.

The JavaScript (can be placed in the page’s <body> or <head>):

<script type="text/javascript">
var message=new Array();
message[1] = "<a href="http://example.com/infographic-link/"><img src="http://example.com/images/infographic.png" alt="decription of infographic courtesy of website" title="infographic about something" width="600" height="2831" /></a><br/><a href="http://example.com/link/">Infographic courtesy of website</a>";
message[2] = "<a href="http://example.com/infographic-link/"><img src="http://example.com/images/infographic.png" alt="variation of alt text" title="infographic about something" width="600" height="2831" /></a><br/><a href="http://example.com/link/">Variation of Anchor Text</a>";
message[3] = "<a href="http://example.com/infographic-link/"><img src="http://example.com/images/infographic.png" alt="this alt text is different" title="infographic about something" width="600" height="2831" /></a><br/><a href="http://example.com/link/">Source: Website Name</a>";
message[4] = "<a href="http://example.com/infographic-link/"><img src="http://example.com/images/infographic.png" alt="insert your own alt text" title="infographic about something" width="600" height="2831" /></a><br/><a href="http://example.com/link/">Infographic about something by Website</a>";

var x = 4; // represents the number of rotating embeds (message)
var rand = Math.floor(Math.random()*x)   1;

function changeText() {
    document.change.embed.value=message[rand];
    changeText();
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
        if (oldonload) {
            oldonload();
        }
        func();
        }
    }
}

addLoadEvent(function() {
    changeText();
});

function customAnchor(){
    var anchor=prompt("What would you like to name this infographicnwhen you embed it on your site?","");
    var usertext="<a href="http://example.com/infographic-link/"><img src="http://example.com/images/infographic.png" alt="" anchor "" title="infographic about something" width="600" height="2831" /></a><br/><a href="http://example.com/link/">" anchor "</a>";

    if (anchor==""){
        return false;
    } else if (anchor!=null){
        document.change.embed.value=usertext;
    } 
}
</script>

The infographic embed html (i.e., <textarea> form):

<strong>Embed this infographic</strong>
<form name="change">
<textarea onClick="customAnchor();select();" rows="5" cols="75" class="test" name="embed" wrap="virtual"></textarea>
</form>

Since I recommend creating as many variations of the default loading anchor text as possible, I recommend utilizing something such as the Latent Semantic Index Keyword Research Tool to help.

It is necessary to escape the characters appropriately within the javascript for each default embed code value created. You can write the html as you normally would in a text editor (or preferred method) and then paste it into the HTML to JavaScript Converter. With “Output as series of document.write statements” selected, click the “Convert to JavaScript syntax” button to get the properly escaped output (note: you only want the value within the parentheses).

Or, Don’t Inlcude an Embed Code…

Another option for creating natural looking links from infographics is to not include any embed code at all. You can be assured that if the infographic is any good that someone will eventually steal it and publish it on their website even without including an embed code. After you publish it, you can find out who published your infographic on you their site by running a TinEye search or a reverse image search in Google Images. After identifying websites who re-published your infographic without permission, simply reach out to them ask that they credit you with a link back to your website.

reverse google image search

If anyone ultimately ends up utilizing my infographic embed script, even if in a modified form, or derivation of concept; Please let me know in the comments below or Tweet me at @fighto.

Write a Comment

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  1. It takes a little bit of work to create those 3 or 4 static, alternative wordings but, overall, what a smart way to handle infographic embeds! Thanks so much for sharing it! The only modification I made to your code was to call the bulk of the script from off-page:
    http://www.atlantahealth.com/brain-eating-ameba-facts.php

    Since creating the infographic took quite a bit of work, I attached a text version below my infographic to make it readable by the search engines. Do you have any thoughts on this? I am surprised at how rarely I see other sites do this.
    Thank you again!

    • Awesome job man! I think it’s a good move the add the javascript to an external file. You could even block it in robots.txt to search engines to keep them from reading the alternating default text (I don’t think this is much of an issue, but as a precaution, it doesn’t hurt).

      As far as including a plain text version of your infographic for search engines to read, people really should be including something that is readable; If not the full-text of the infographic, than at least a summary.

      Something neat I sometimes see, is that people will cut up their infographic into smaller images, and then describe each one in a traditional paragraph format. Then they include the full infographic (along with sharing buttons and embed code) at the bottom of their post.

      Cheers!

      • Thanks Paul,
        I’d thought about blocking the js file using robots.txt so, since you mentioned it, I’ll do that.
        Ya… being a person with good eyesight, I often forget about the importance of web accessibility for the visually impaired. So, regardless of the SEO benefits, including a text version of the infographic seems to make sense.
        One other point in your post that I thought was brilliant, but I forgot to mention in my earlier comment, was using TinEye to find sites that display our infographic without including the link. Following up with those sites was a great suggestion.
        Thanks again,
        Randy

  2. Hi Paul,

    Any idea why the “random message generator” section of your embed script causes Internet Explorer 11 to get hung up on the page load and then throws the following error message in IE’s Developer Tools panel?

    “Could not complete the operation due to error 80020101.”

    (At first, I thought it may have been a js conflict just on my pages but I see that it is happening for your live demo page as well: http://searchwilderness.com/infographic-embed-demo/ )

    Thanks!
    Randy