Advanced SEO for Affiliate Marketing Links

Affiliate marketing is primarily about two things: (1) acquiring traffic, and (2) converting that traffic. In my experience, I find that affiliate marketers typically focus more of their time on the conversion rate/click-through rate side of things. However, since I don’t know a damn thing about conversion rates, this article will address the “traffic acquisition” side of things by discussing some advanced SEO techniques I’ve developed specifically for affiliate marketers. Some of this information can be applied to banner advertising-based sites as well.

This article is going to get a bit technical. You’ll need to analyze my code examples and customize them to suit your needs. It’s not completely necessary to know JavaScript, but it will certainly help if you do. If you’re hoping to skim through this article in a few minutes…forget it. You won’t get anything out of it. If you’re hoping for some advanced SEO techniques for affiliate marketers that can minimize PageRank loss and make your pages load a lot faster, then you’re in the right place…but you’ll need to really pay attention. Grab a cup of coffee and then proceed.

Update: I wrote another post about the techniques mentioned in this post. It addresses the question of whether or not these techniques are permitted by the Google Webmaster Guidelines. Check it out: Using JavaScript to Hide Links from Google

Also, when I wrote that second post, I created a diagram of the SEO techniques mentioned in this post. If you are more of a visual learner, then I recommend you check it out: lazy-loading affiliate marketing anchors

Common SEO Issues of Affiliate Marketers

Let’s start by looking at a couple of SEO-related topics that are relevant to a large percentage of affiliate marketing websites–PageRank and page speed.

PageRank

There are a couple of different ways in which PageRank can affect the performance of your affiliate website’s rankings in Google’s search results. For one, you can hinder your rankings by bleeding your site’s PageRank through outbound links to affiliate URLs. Even if your affiliate links contain the rel="nofollow" attribute, there’s still a strong possibility that Google factors them into the calculation of the followed links’ PageRank. In other words, just because the nofollowed links don’t pass PageRank to your affiliate URLs, that doesn’t necessarily mean your remaining links (i.e. the ones without the rel="nofollow" attribute) get a bigger slice of the PageRank pie. The mere presence of nofollowed affiliate links on your web pages might result in an overall loss of site-wide PageRank, a concept some of you may know as “PageRank evaporation.”

The second way that PageRank might affect affiliate marketing sites is less common, but much more severe, and it has to do with Google’s Webmaster Guidelines. One of the things Google (i.e. Matt Cutts) has said repeatedly is that paid links must not pass PageRank. Now granted, paid links are not exactly the same as affiliate links, because theoretically (according to Google’s stupid reasoning) paid links are definitely NOT unbiased, editorial-grade endorsements of the linked content, whereas affiliate links might be. Personally, I’d rather avoid the issue entirely, by making sure none of my affiliate links pass PageRank.

Page Speed

As most of you know, Google has incorporated page speed into its ranking algorithm. This is bad news for any affiliate sites that rely heavily on image links and ad banners, because these resources typically slow down the loading time of your pages.

Affiliate Link Optimization

Here are the basic goals I set for myself when developing my super-advanced SEO technique.

Don’t Lose PageRank

As an SEO–the best in the world, as a matter of fact–my primary concern is avoiding the potential “evaporation” of PageRank that might occur as the result of nofollowed affiliate links in my page content. Therefore, my super-advanced SEO solution must NOT rely on the use of the rel="nofollow" attribute.

Don’t Pass PageRank

In order to comply with Google’s Webmaster Guidelines, my extremely-advanced SEO solution must prevent search engines from crawling my affiliate links or passing PageRank through them.

Follow the FTC Guidelines

The Federal Trade Commission published their Guides Concerning the Use of Endorsements and Testimonials in Advertising, an 80-page document that can be summarized in 3 words: disclose paid endorsements. At least I think that summarizes it…honestly, I didn’t read any of it. My extra-super-advanced SEO solution should automatically identify affiliate links by applying some kind of unique styling or visual aid.

Don’t Slow Down My Page Speed

Affiliate-related content (links, images links, banner ads, etc.) must not delay the loading of my page content…at all.

Make it Degrade Gracefully

If you haven’t guessed yet, my über-advanced SEO solution is going to rely on JavaScript. Therefore, it should degrade gracefully in browsers that don’t have JavaScript enabled. Also, it shouldn’t negatively affect accessibility. So to all you SEOs and affiliate marketers out there who are rockin’ screen readers or whatever…don’t worry, I gotcha covered.

Make it Easy to Use

A small percentage of my dear readers are actually “advanced SEOs”–or advanced anything, for that matter–and I can publish a loosely-defined solution, confident that they will tweak my code or improve on it, in order to meet the specific needs of their website. However, the majority of you have the cognitive abilities of a small piece of driftwood, and for your sakes…my solution should be reasonably easy to implement.

My Incredibly-Advanced SEO Solution

Alright then, Woody, let’s dig in!

What You’ll Need

Here is a generalized list of the various files and page elements that we’ll be working with:

1. external JavaScript file (e.g. scripts.js)
2. external stylesheet (e.g. styles.css)
3. robots.txt file (e.g. robots.txt)
4. a web page that contains affiliate links

Step 1: Create the JavaScript

Paste the following JavaScript code into your external .js file. I have made lots of comments throughout it, in order to help you understand (and/or customize) the code.

Attribution: My code uses a utility function, called hasClass(), which is from the book JavaScript: The Definitive Guide, 5th Edition, by David Flanagan. Copyright 2006 O’Reilly Media, Inc. (ISBN: 0596101996).

/**
  * Advanced SEO Technique for Affiliate Marketing Links
  * Copyright 2010, Darren Slatten, http://www.SEOmofo.com/
  * 
  * The following code consists of 2 functions. The first 
  * function is a utility function that requires 2 parameters:
  * an element name and a CSS class name. It checks to see if
  * the specified element (e) is a member of the specified class (c),
  * and returns true or false. The element name can be either an
  * id or a tag name. The class name can either be the only class
  * assigned to the element OR it can be one of several CSS classes
  * assigned to the element. This function is used by the second
  * function.
  * 
  * The second function finds all <span> elements that have "affiliate"
  * as one of their CSS classes and then turns them into affiliate
  * links.
  * 
  */



// Utility function for checking if an element (e) is a member of CSS class (c).
function hasClass(e, c) {

// If we passed the function a string, then get the element with that id.
	if (typeof e == "string") e = document.getElementById(e);

// Declare the variable "classes" as the text value of our element's CSS classes.
	var classes = e.className;

// If our element doesn't have any CSS classes assigned to it, return false.
	if (!classes) return false;

// If our element has exactly one class and that class is (c), return true.
	if (classes == c) return true;

// If our element has multiple classes and one of them is (c), return true.
	return e.className.search("\\b" + c + "\\b") != -1;
};



// Function for rendering affiliate links in a way that won't pass PageRank.
function affiliateLinks(){

// Declare local variables.
	var theURL, theAnchorText, theTitle;

// Declare the variable "spans" as the collection of all <span> elements.
	var spans = document.getElementsByTagName('span');

// Perform the following steps for every <span> element.
	for (var i = 0; i<spans.length; i++){

// If the <span> element is part of the "affiliate" class...
		if (hasClass(spans[i], 'affiliate')){

// Use the content between the <span> tags as our affiliate link's anchor text.
// Example: <span class="affiliate" title="Affiliate Site">this will be our anchor text</span>
// The content doesn't have to be just text; it can be HTML too.
// Example: <span class="affiliate" title="Affiliate Site"><img src="/banners/affiliate-logo.png" /></span>
			theAnchorText = spans[i].innerHTML;

// Get the value of the <span> element's title attribute, make it lowercase, and remove whitespace
// characters from the beginning and end.
			theTitle = spans[i].title.toLowerCase().replace(/^\s+|\s+$/g,"");

// Check the value of the <span> element's title attribute against the following possibilities.
			switch (theTitle) {

// If the <span> element's title is "thesis" then set our affiliate link's href to
// "http://www.seomofo.com/affiliate/thesis/"
				case 'thesis': theURL = 'http://www.seomofo.com/affiliate/thesis/'; break;

// If the <span> element's title is "thesis plans" then set our affiliate link's href to
// "http://www.seomofo.com/affiliate/thesis/plans/"
				case 'thesis plans': theURL = 'http://www.seomofo.com/affiliate/thesis/plans/'; break;

// If the <span> element's title doesn't match any of the possibilities I've provided, then make
// my affiliate link do NOTHING when clicked on, because I f***ed up my code somewhere.
				default: theURL = 'javascript: void(0)';
			}

// Insert the new affiliate link into its corresponding <span> element and copy the <span> element's
// CSS classes (all of them) into the affiliate link's <a> tag.
			spans[i].innerHTML = '<a href="' + theURL + '" class="' + spans[i].className + '">' + theAnchorText + '</a>';

// Remove the title attribute from the <span> element, to prevent Firefox from displaying it in a tooltip.
			spans[i].removeAttribute('title');
		}
	}
}



// Call the affiliateLinks function AFTER the document has finished loading.
window.onload = function(){
	affiliateLinks();
}

Step 2: Define the CSS Styles (Optional)

The following CSS code is an example showing how I have defined my affiliate links’ styles. You don’t necessarily have to use my styles; you can use your own if you prefer.

If you want to use this example, be aware that it assumes you have placed a cursor file, called affiliate-link.cur, in a directory called /cursors/ on your web server. If you save your cursor in a different subdirectory, adjust the URL accordingly in the CSS code.

Also be aware that this example assumes you have a 125px ad banner, called thesis-125x125.gif, in a directory called /banners/ on your web server. You will obviously need to customize the code so it references ad banners you’re actually using on your site.

You can use any cursor you’d like (perhaps one of these middle finger cursors?) or you can download a copy of the one I’m using, by clicking on it below.

To download this cursor, click here ⇒  

a.affiliate {
	color:#339900;
}
a.affiliate:hover {
	cursor:url('/cursors/affiliate-link.cur'), pointer;
}
a.affiliate span {
	display:none;
}
#thesis125 {
	width:125px;
	height:125px;
}
#thesis125 a.affiliate {
	display:block;
	width:125px;
	height:125px;
	background:url('/banners/thesis-125x125.gif') transparent no-repeat;
}

Step 3: Link Your Web Page to the External Files

Assuming your file names are styles.css and scripts.js, you would need to put something like the following code in the <head> section of your web page:

<link rel="stylesheet" type="text/css" href="/styles.css" />
<script type="text/javascript" src="/scripts.js"></script>

Step 4: Block Search Engines from Viewing Your External Files

Google’s ability to crawl JavaScript links keeps getting better and better. However, in this case, the URLs are not actually in our web page’s HTML source code. The only markup Google will see is the empty <span;> tags. In order for Google to find our affiliate links, it would have to fetch our external JavaScript file first. To make sure this doesn’t happen, you would need to Disallow your JavaScript file in your robots.txt file.

If you saved scripts.js in your site’s root directory, your code would look like this:

User-agent: *
Disallow: /scripts.js

If you saved scripts.js in a subdirectory called /nobots/, your code would look like this:

User-agent: *
Disallow: /nobots/scripts.js

Step 5: Insert the HTML Code into Your Web Page

The final step is to mark up your web pages. After the content of your web page is finished loading, the affiliateLinks() function will be called, and the <span> tags that have the affiliate CSS class will be injected with affiliate links. The next section has some mark up examples.

HTML Markup Examples

The following examples should give you a better understanding of how the script works. For each example, I will show you the HTML before (i.e. before the script modifies it), the HTML after, the final result with JavaScript enabled and the final result with JavaScript disabled.

Simple Plain Text Link

HTML Before:

<p>
	SEOmofo.com runs on the <span class="affiliate" title="Thesis">Thesis Theme for WordPress</span>.
</p>

HTML After:

<p>
	SEOmofo.com runs on the <span class="affiliate"><a class="affiliate" href="http://www.seomofo.com/affiliate/thesis/">Thesis Theme for WordPress</a></span>.
</p>

Result with JavaScript Enabled:

SEOmofo.com runs on the Thesis Theme for WordPress.

Result with JavaScript Disabled:

SEOmofo.com runs on the Thesis Theme for WordPress.

Another Plain Text Link

HTML Before:

<p>
	Find out more about my site's WordPress theme, by reviewing the <span class="affiliate" title="Thesis Plans">Thesis <b>plans and pricing</b></span>.
</p>

HTML After:

<p>
	Find out more about my site’s WordPress theme, by reviewing the <span class="affiliate"><a class="affiliate" href="http://www.seomofo.com/affiliate/thesis/plans/">Thesis <b>plans and pricing</b></a></span>.
</p>

Result with JavaScript Enabled:

Find out more about my site’s WordPress theme, by reviewing the Thesis plans and pricing.

Result with JavaScript Disabled:

Find out more about my site’s WordPress theme, by reviewing the Thesis plans and pricing.

Image Link

HTML Before:

<p>
	<span class="affiliate post-ad-right" id="adobe300x250" title="Adobe 300x250"></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lorem ipsum, in vulputate purus. Nullam faucibus turpis vel ipsum vestibulum eleifend. Maecenas vel velit aliquet purus feugiat pellentesque.
</p>

HTML After:

<p>
	<span class="affiliate post-ad-right" id="adobe300x250"><a class="affiliate post-ad-right" href="http://www.seomofo.com/affiliate/adobe/cs5/production-premium/"></a></span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lorem ipsum, in vulputate purus. Nullam faucibus turpis vel ipsum vestibulum eleifend. Maecenas vel velit aliquet purus feugiat pellentesque.
</p>

Result with JavaScript Enabled:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lorem ipsum, in vulputate purus. Nullam faucibus turpis vel ipsum vestibulum eleifend. Maecenas vel velit aliquet purus feugiat pellentesque.

Result with JavaScript Disabled:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vel lorem ipsum, in vulputate purus. Nullam faucibus turpis vel ipsum vestibulum eleifend. Maecenas vel velit aliquet purus feugiat pellentesque.

Conclusion

The SEO techniques I’ve discussed in this article are best suited for affiliate marketers who work with niche sites. This is because the JavaScript example I provided contains a list of name/value pairs that tie the title attributes of the affiliate <span> elements to their corresponding affiliate link URLs. This kind of setup works fine for most people, but it doesn’t scale up very well. Affiliate sites that link to a large number of different advertisers and/or products would find it impractical to constantly update their JavaScript file. In those cases, the script could be modified so that the function takes an obfuscated URL as it’s argument, and then decodes it before injecting it back into the HTML source. (Obfuscating the URL keeps Google from randomly picking it out of your HTML and crawling it.)

I’m planning on doing a follow-up article about advanced SEO for affiliate marketers. It will build upon the basic concepts in this article, by giving some examples that inject 3rd-party scripts, Flash objects, and iframes. Just to give you an idea of what’s possible with these techniques, I’ll leave you with a copy of the page speed test results of the page you just read. If you’re not sure how to read this, then I’ll give you a hint: the green line indicates where the page begins to appear in the user’s browser, the blue line indicates where the page is officially loaded (i.e. where Google stops the “Site Performance” stopwatch), and everything to the right of the blue line is all the stuff I lazy-loaded after the onload event fired. Or in other words…this technique just cut down on my page load time by about 82%!!! Click the image link below.