Infographic Embed Codes: Get Natural Anchor Text With JavaScript for SEO

121 Flares 121 Flares ×
Infographic Embed Codes: Get Natural Anchor Text with JavaScript for SEO

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. 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.

Demo of code (refresh to randomize, click in textarea to set your own values):


You can also check out a live demo of the infographic embed script here.

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

<script language="JavaScript" 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 infographic\nwhen 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.

Infographic Embed Codes: Get Natural Anchor Text with JavaScript for SEO

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.

About Paul Shapiro

Paul Shapiro is a search marketer that loves to take both a technical and creative approach to SEO. Currently an Organic Search Manager for Catalyst in New York City, Paul likes to dabble in other areas digital marketing, especially social media. He is an amateur programmer and is very fond of horror movies.

Drop Comments, Not Bombs

Drop a Comment or if you prefer, a beat.

121 Flares Twitter 65 Google+ 39 Facebook 8 LinkedIn 4 StumbleUpon 1 Buffer 4 121 Flares ×