Recently, I published an article called Advanced SEO for Affiliate Marketing Links, which explains linking techniques that prevent the transfer of PageRank to affiliate links, while also allowing the page to load faster–in some cases, a lot faster. However, the article has been generating some concerns amongst my fellow SEO practitioners that perhaps my advanced SEO linking techniques are actually violating Google’s Webmaster Guidelines.

UPDATE: I submitted a question to the Google Help Forums, asking whether or not this technique violates the Google Webmaster Guidelines. There were quite a few answers from the “Top Contributors” and even a Google employee responded. As I expected, their responses focused on the fact that this technique manipulates Google, and they desperately tried to avoid the inescapable reality that this method improves the User experience. So the question basically came down to this: is it okay to hide content from Google if it results in a better user experience? The jury is still out, but I’ll update again when I get an answer. Meanwhile, you can follow the heated debate on the Help Forums: Can I use JavaScript to hide affiliate links from Google?

I’d like to take a moment to share my thoughts on this issue, but I’d also like to hear some outside opinions from other SEO/SEM folks–especially all you white hat extremists out there. Hopefully I can persuade Matt Cutts or someone from the search quality team to comment on this post and provide a more definitive answer. Personally, I’m very interested in Google’s official stance on this issue, since…um…I’m currently using these techniques all throughout this site, and if I get booted from Google’s index…my nine children will surely starve.

What are these advanced SEO techniques you speak of?

I should probably recap the techniques I wrote about, to make sure everyone understands what we’re talking about here. Here’s a quick overview:

1. Remove affiliate links from your pages’ HTML code.
2. If it’s a text link embedded in page content, then just remove the <a> tags and leave the anchor text there (as plain text).
3. If it’s an image link, remove the <a> tags AND the <img> tag.
4. Replace the <a> tags with <span> tags, and assign a class name to them (e.g. <span class="affiliate">).
5. Write a JavaScript function that looks for <span> elements that contain class="affiliate" and replaces them with your affiliate links. (Yes, the ones you removed in Step 1).
6. Put the JavaScript function in an external .js file and block Google from accessing it (using robots.txt).
7. Attach the JavaScript function to the onload event, which means users’ web browsers won’t call the function until after the page is finished loading.
8. Googlebot–and users without JavaScript enabled–can’t call the JavaScript function, so your affiliate links are never inserted into the page content.
9. Only users with JavaScript-enabled browsers will see your affiliate links. Everything/everyone else sees plain text instead of affiliate text links, and an empty space instead of affiliate image links.

If you still don’t get it, check out this awesome diagram I spent 6 hours making just for you: lazy-loading affiliate marketing anchors.

If you still don’t get it, even after viewing the diagram, then there’s no hope for you. I don’t mean just with this article…I mean your entire life is hopeless and you should seriously consider killing yourself. However, if you do understand…then let’s continue.

The Big Question: Does the practice of lazy-loading affiliate marketing links violate the Google Webmaster Guidelines?

I’ll kick off this debate by quoting some of the related information from Google’s Webmaster Guidelines–specifically the Quality Guidelines portion, which focuses on the things that might get your site penalized.

To make things more entertaining, I’ll turn this into an argument between 2 imaginary characters, whom I’ve arbitrarily named Blackie and Whitey. In this debate, Whitey thinks the SEO technique in question is deceptive and shouldn’t be used. Blackie thinks the SEO technique in question is not inherently evil whatsoever and it can actually benefit users, webmasters, AND search engines. Read what these guys have to say…and then feel free to express your opinion in the comments section.

Webmasters who spend their energies upholding the spirit of the basic principles will provide a much better user experience and subsequently enjoy better ranking than those who spend their time looking for loopholes they can exploit.

Blackie: The SEO technique in question is not designed to exploit any loopholes; it’s designed to benefit users, Google, and me…the webmaster. Users benefit from faster page load times. Google benefits because it doesn’t have to waste resources trying to crawl affiliate links, and because it avoids contaminating the link graph with links that have no inherent editorial endorsement from the affiliate marketer. And as a webmaster, I benefit from higher rankings that might result from minimizing “PageRank evaporation” and decreasing page load times.

Whitey: The SEO technique in question is clearly exploiting loopholes. The most obvious example is the fact that it’s not really decreasing the amount of time it takes to load a page. All it’s doing is delaying the loading of affiliate links/content until after the main content is loaded. If we ignore the onload event, the amount of time it takes to load ALL of the content has actually INCREASED, because the user’s web browser now has to request and process the external JavaScript file.

Blackie: First of all, webmasters can add the code to their existing .js files, so this technique doesn’t necessarily require an extra HTTP request.

Second of all, what the hell are you talking about, “if we ignore the onload event”? While we’re at it, let’s ignore the definition of a “second,” and I’ll argue that this SEO technique reduces page load times by 2 millennia.

The fact is…the onload event is extremely important and cannot be ignored. It’s the web browser’s way of saying “Ok, User, this web page is done loading, and you are now free to begin perusing the content.” It’s also the point at which the “Loading…” message/icon goes away. Sure, some affiliate banners might appear a few seconds later, but that has little or no effect on the user’s experience. All the user cares about is accessing the main content as quickly as possible, and with this advanced SEO technique…the user doesn’t have to wait for your affiliate banners to load.

Whitey: Whatever. Let’s move on to the next section and see if your SEO trick upholds “the spirit of the basic principles.”

Make pages primarily for users, not for search engines. Don’t deceive your users or present different content to search engines than you display to users, which is commonly referred to as “cloaking.”

Whitey: There you go, Blackie! Read it and weep! It clearly says “DO NOT present different content to search engines than you display to users.” Sorry, but that’s exactly what you’re doing. You’re cloaking. End of story.

Blackie: No…NOT “end of story.” Cloaking uses server-side programming to serve different content to different user-agents or IP addresses. My server returns the exact same document to users and search engines. If a user views the HTML source of my page, they will see exactly what Google sees. The HTML code is identical, down to every last character.

Whitey: Yes, but a web page is much more than just HTML code; it’s also CSS, JavaScript, images, Flash objects, videos, and all kinds of other stuff. You may be serving the same HTML document, but you’re not allowing Googlebot to fetch your JavaScript file, and it is this file that instructs web browsers to rewrite the HTML code internally to show affiliate links and ads. So ultimately, the user sees their browser’s rewritten HTML, which is different from the HTML Googlebot sees.

Blackie: First of all, I highly doubt that Google even requests external files to begin with. Even if it did, I don’t imagine Google is capable of parsing JavaScript, using it to rewrite the HTML of any documents that referenced it, and then retroactively updating those documents’ index data to reflect the newly-discovered content. So unless Google is actually trying to fetch my JavaScript–which it isn’t–then blocking it with robots.txt isn’t really doing anything anyway.

Second of all, bandwidth costs money, and I’m not obligated to serve Googlebot anything I don’t want to. It’s my JavaScript file; I have the right to control access to it.

Whitey: You’re right…but similarly, it’s Google’s index and Google has the right to ban your website from it.

Blackie: Yeah yeah yeah…blow me. Next quote.

Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you’d feel comfortable explaining what you’ve done to a website that competes with you. Another useful test is to ask, “Does this help my users? Would I do this if search engines didn’t exist?”

Whitey: The SEO technique in question is definitely a trick intended to improve search engine rankings.

Blackie: True, the technique is intended to improve search engine rankings, but it’s not a “trick.” That’s like saying AJAX is a trick. Or Flash is a trick. There are always going to be emerging web technologies and languages that Google can’t crawl or doesn’t understand. That doesn’t mean using them is intended to trick search engines.

Plus, let’s consider the two suggested ways of testing whether or not this technique should be used. “Does this help my users?” YES. “Would I do this if search engines didn’t exist?” YES.

Whitey: But would you feel comfortable explaining what you’ve done to a website that competes with you? I doubt it.

Blackie: Um…I spent the last three days trying to explain this, in vivid detail, to every SEO/SEM “competitor” who will listen. I even made a diagram, so idiots like you would understand it.

Whitey: Yeah yeah yeah…suck it. Next quote.

Use of JavaScript is an entirely legitimate web practice. However, use of JavaScript with the intent to deceive search engines is not. For instance, placing different text in JavaScript than in a noscript tag violates our webmaster guidelines because it displays different content for users (who see the JavaScript-based text) than for search engines (which see the noscript-based text).

Whitey: Gee…that sounds kinda like what I was saying.

Blackie: The SEO technique in question doesn’t deceive anyone. I’m explicitly telling search engines they can’t request my JavaScript file, and therefore they can’t see the content it generates. I’m not displaying different content to search engines; I’m simply telling them this content is for humans only…no bots allowed. I mean come on, Whitey, surely you of all people can understand the value of segregation and discrimination.

Whitey: Of course. Wait…what?!

Blackie: Next quote, please.

Avoid hidden text or hidden links.

Whitey: Obviously, your technique is a way to hide links from search engines.

Blackie: I also disallow search engines from trying to crawl my contact form. Does that mean I’m hiding my email address from Google? And I also disallow search engines from crawling my infinite calendar pages. Does that mean I’m hiding my dentist appointment next week?

I’m using JavaScript to create links that only users can see; there’s nothing in the Quality Guidelines that says you must show Google everything that users see. In many cases, that’s not even possible. The hidden links section of the Guidelines even defines hidden links as “links that are intended to be crawled by Googlebot, but are unreadable to humans.” That’s not what I’m doing. I’m doing the exact opposite of that.

Whitey: I just realized something…you’re right. This SEO technique is awesome. Where can I subscribe to your blog?

Blackie: You can click the RSS icon below. It’s one of the 18 social media buttons I lazy-loaded onto this page while you were reading the article content. I didn’t want to make you wait.

Whitey: Well thank you. I appreciate that. Your lazy-loading trickery has indeed improved my user experience here today. I was a fool for doubting you, Blackie. Thankfully, the fog has been lifted, and for the first time…I can clearly see the–

Blackie: –Just click the icons.

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.

This website is not endorsed by nor associated with Google in any way.

I was searching for a high-resolution copy of Google’s new logo and couldn’t find one, so I made my own. I’m posting it here for anyone else who needs it. Enjoy.

To all the large companies out there: when you refuse to publish high-quality copies of your logos, you’re not protecting your brand–all you’re doing is forcing people to recreate your logo in Photoshop. In the end, what have you really accomplished? Instead of your authentic company logo being used without your permission…you now have a shitty knockoff being used without your permission.

And on that note, dear readers, I present to you…the new Google logo! I have two versions here, for your viewing pleasure. The first version is the highest-resolution official Google logo that I could find. I found it in the Google blog post, The Google design, turned up a notch. The only real limitation of this image is that it has a white background instead of a transparent background.

Official New Google Logo

click logo below for larger image

The second version is a Photoshopped knockoff. It has a higher resolution and a transparent background, but it’s not perfectly identical to the authentic Google logo (it’s pretty damn close though).

Unofficial New Google Logo

click logo below for larger image

One of the most important skills an advanced SEO must possess is the ability to analyze and understand the link structure of a given web page or website. This skill can be applied to many different SEO-related topics, such as information architecture, link building, and the mysterious practice of PageRank sculpting. Even “content is king” advocates rely on links to deliver traffic, increase rankings, and to make their content discoverable to search engine crawlers.

Anyone who’s serious about SEO needs to be able to easily identify links that (a) cannot be crawled, or (b) cannot flow PageRank. Two common examples of this are:

• links that include the rel="nofollow" attribute
• links that are embedded in a page via inline frames (i.e. <iframe> elements)

In this article, I will show you how I have customized my web browser (Firefox 3.5) to help me identify nofollowed links and iframes, without viewing a page’s HTML source code. If you don’t use Firefox, you can still benefit from the CSS examples in this post, but you will have to figure out how to add custom user-defined CSS styles to your browser. If you’re using Internet Explorer, just kill yourself.

Step 1: Install the Stylish Firefox Extension

Stylish is a simple Firefox extension that allows you to add custom CSS styles to your browser. In other words, it lets you override the author-defined styles on any website. There are other extensions out there that provide similar functionality, but Stylish seems to be the easiest and most popular. Plus, it’s what I use…and I’m the greatest SEO who’s ever lived. Install it from the official Stylish Firefox Add-ons page.

Step 2: Create a New Style

After you install Stylish and restart Firefox, you should see the Stylish icon in the bottom-right corner of your browser. If you don’t see it, try clicking View => Toolbars => Customize, and then add the icon to your toolbar. The icon is a box with an “S” on it. Once you’ve found the icon and opened the Stylish menu, click on Write new style => Blank style.

Step 3: Pimp Your nofollow Attributes

Now it’s up to you to add your own custom CSS styles to make nofollowed links stand out in your browser. Here are some tips to get you started:

• Remember to add !important after every style declaration (but before the semicolon). Example: .black{color:#000 !important;}
• Take advantage of the powerful CSS 2.1 selector syntax, which enables you to select elements based on their attributes. To select all links with the nofollow attribute, you would use a[rel~="nofollow"]{...}
• If you’re the adventurous type, check out the CSS 3 selectors (not an official W3C Recommendation yet). Remember that you aren’t limited to cross-browser compatible CSS–you can use anything that your specific browser accepts.
• For more information about using Stylish, see Coding User Styles.

The possibilities are endless, but try the code example below and take it from there. This example will achieve the following results:

• Text nofollow links have a strikethrough in their anchor text.
• When you hover over text nofollow links, they turn red (and remove the strikethrough).
• Image nofollow links and iframe elements have a red border when you hover over them.

a[rel~="nofollow"]{
	text-decoration:line-through !important;
}
a:hover[rel~="nofollow"]{
	color:#F00 !important;
	text-decoration:inherit !important;
}
a:hover[rel~="nofollow"] img,
iframe:hover{
	outline-width:1px !important;
	outline-offset:-1px !important;
	outline-color:#F00 !important;
	outline-style:solid !important;
}

NOTE: If you’re wondering about these strange outline properties, they’re from the CSS3 Candidate Recommendation. They all work in Firefox 3.5. The difference between outline and border is that border adds to the width of a box, but outline doesn’t. The outline-offset declaration is set such that the red border falls on the inside of the box being outlined. In other words, using these declarations instead of border declarations should prevent you from unintentionally shifting the layout of the page you’re viewing.

If you have any SEO-related custom style declarations to add, feel free to leave a comment.

Since I started writing this blog, my number of subscribers has been increasing steadily. If you average it out, I’ve been getting about 2-3 new subscriptions every day. That’s not bad, if you ask me. If I keep this up, I’ll surpass Matt Cutts’ total in only 106 years! Well…that’s assuming his number of subscriptions stays exactly the same until then.

But anyways…I was looking at my subscriber stats in FeedBurner today, and I thought to myself, “I kinda want to put one of these custom FeedCount chicklets in my side bar…”

You see…one of the things I’ve noticed about human nature is that most people don’t want to think for themselves. They’d rather take the beaten path than blaze a new trail. So when you publish your number of subscribers, new visitors to your site will look at that number and think, “Lot’s of people are subscribed to this blog, so it must be good. I too will subscribe to this blog!”

The reason I like the idea of putting one of these custom FeedBurner icons on my site is because it allows me to show the World how popular I am. It’s a subtle way for me to peer-pressure my visitors into subscribing to my blog–like saying, “Come on, man…everybody’s doin’ it!”

The problem is…my FeedBurner count isn’t really high enough to pull off said psychological trickery. People might look at my subscription total and think, “WTF? This guy only has 361 subscribers? That’s weak. Screw this, I’m outta here.”

Therefore, I needed a way to…shall we say…embellish my résumé.

I considered hijacking someone else’s stats. For example, I could take the HTML code that FeedBurner gave me and simply change the name in the image src location…

<p>
    <a href="http://feeds.seomofo.com/seomofo">
        <img src="http://feeds.feedburner.com/~fc/seomofoseomoz?bg=FF6600&fg=000000&anim=0" height="26" width="88" style="border:0" alt="" />
    </a>
</p>

…but the problem with that is it doesn’t let me see my actual subscriber count. Ideally, I’d like to just add a digit in front of my real number. I could have made a fake digit and absolute-positioned it over my chicklet, but that would limit me to a static .gif image and I really wanted to use one of the fancy animated .gif images to draw people’s attention to my subscribe link.

Finally, I thought of the perfect solution…

I started with the static chicklet that FeedBurner gave me:

Then I used Photoshop to pull apart the animated chicklet that FeedBurner gave me. I used the layers from that file to create my own animated .gif, except I added a 5 and left transparent holes where the static chicklet numbers could show through:

Finally, I used CSS to absolute position my animated .gif on top of the static FeedBurner chicklet:

…and voilá! My blog subscriptions just increased by 5,000!

Now that you’ve seen how it’s done, go ahead and make yourself a fake FeedBurner icon. I’ll even give you a head start by providing all the digits for you:

Oh, and one last thing…be sure to subscribe to my blog, if you haven’t already. Come on…everybody’s doing it.

I was looking at the code of the newly-released Thesis 1.7 theme for WordPress, and I came across 2 filters that I hadn’t seen before:

thesis_comments_closed
thesis_comments_link_closed

I wanted to find out more about these filters, so I googled them. To my surprise…there were zero results!?

It was at that moment that I realized…the World is counting on me to demystify these mysterious mysteries, for I am the chosen one. Fear not, my fellow Thesis theme users! I will share my great wisdom with you.

Where can I find these mysterious Thesis filters?

After searching through my local copy of Thesis, I discovered that each filter was mentioned in only one location:

thesis_comments_closed: line 110
/wp-content/themes/thesis_17/lib/classes/comments.php

thesis_comments_link_closed: line 14
/wp-content/themes/thesis_17/lib/functions/comments.php

Notice that these filters are not located in the same files. I’ve highlighted the directory that sets them apart.

How are these Thesis filters defined in the code?

Here is the php code of the functions that contain the Thesis filters:

	function form() {
		global $thesis_site;

		if (comments_open()) { #wp
			global $user_ID, $user_identity;

			if (get_option('comment_registration') && !$user_ID) { // If registration is required and the user is NOT logged in... #wp
				echo "\t\t\t\t<div class=\"login_alert\">\n";
				echo "\t\t\t\t\t<p>" . sprintf(__('You must <a href="%s" rel="nofollow">log in</a> to post a comment.', 'thesis'), get_option('siteurl') . '/wp-login.php?redirect_to=' . urlencode(get_permalink())) . "</p>\n"; #wp
				echo "\t\t\t\t</div>\n";
			}
			else { // Otherwise, show the user the stinkin' comment form already!
				echo "\t\t\t\t<div id=\"respond\">\n";
				echo "\t\t\t\t\t<div id=\"respond_intro\">\n";

				if (get_option('thread_comments')) cancel_comment_reply_link(__('Cancel reply', 'thesis')); #wp

				echo "\t\t\t\t\t\t<p>" . apply_filters('thesis_comment_form_title', __('Leave a Comment', 'thesis')) . "</p>\n"; #filter
				echo "\t\t\t\t\t</div>\n";
				echo "\t\t\t\t\t<form action=\"" . get_option('siteurl') . "/wp-comments-post.php\" method=\"post\" id=\"commentform\">\n"; #wp
				thesis_hook_comment_form_top();

				if ($user_ID) // If the user is logged in... #wp
					echo "\t\t\t\t\t\t<p>" . sprintf(__('Logged in as <a href="%1$s" rel="nofollow">%2$s</a>.', 'thesis'), get_option('siteurl') . '/wp-admin/profile.php', $user_identity) . ' ' . sprintf(__('<a href="%s" title="Log out of this account" rel="nofollow">Logout &rarr;</a>', 'thesis'), thesis_logout_url()) . "</p>\n"; #wp
				else { // Otherwise, give your name to the doorman
					$req = (bool) get_option('require_name_email');
?>
						<p><input class="text_input" type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1"<?php if ($req) echo ' aria-required="true"'; ?> /><label for="author"><?php _e('Name', 'thesis'); if ($req) _e(' <span class="required" title="Required">*</span>', 'thesis'); ?></label></p>
						<p><input class="text_input" type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2"<?php if ($req) echo ' aria-required="true"'; ?> /><label for="email"><?php _e('E-mail', 'thesis'); if ($req) _e(' <span class="required" title="Required">*</span>', 'thesis'); ?></label></p>
						<p><input class="text_input" type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /><label for="url"><?php _e('Website', 'thesis'); ?></label></p>
<?php 
				}

				thesis_hook_comment_field();
				echo "\t\t\t\t\t\t<p class=\"comment_box\">\n";
				echo "\t\t\t\t\t\t\t<textarea name=\"comment\" id=\"comment\" tabindex=\"4\" cols=\"40\" rows=\"8\"></textarea>\n";
				echo "\t\t\t\t\t\t</p>\n";

				thesis_hook_after_comment_box();

				echo "\t\t\t\t\t\t<p class=\"remove_bottom_margin\">\n";
				echo "\t\t\t\t\t\t\t<input name=\"submit\" class=\"form_submit\" type=\"submit\" id=\"submit\" tabindex=\"5\" value=\"" . __('Submit', 'thesis') . "\" />\n";
				comment_id_fields(); #wp
				echo "\t\t\t\t\t\t</p>\n";

				thesis_hook_comment_form_bottom();
				do_action('comment_form', $post->ID); #wp

				echo "\t\t\t\t\t</form>\n";
				echo "\t\t\t\t</div>\n";
			}
		}
		elseif ($thesis_site->comments['show_closed']) {
			echo "\t\t\t\t<div class=\"comments_closed\">\n";
			echo "\t\t\t\t\t<p>" . apply_filters('thesis_comments_closed', __('Comments on this entry are closed.', 'thesis')) . "</p>\n";
			echo "\t\t\t\t</div>\n";
		}
	}
}

/**
 * function thesis_comments_link()
 *
 * Generates and outputs a direct link to a page's or post's comments from index
 * or archive views.
 *
 * @since 1.0.2
 */
function thesis_comments_link() {
	if (!is_single() && !is_page()) { #wp
		$num_comments = get_comments_number(); #wp
		$link = (comments_open()) ? '<a href="' . get_permalink() . '#comments" rel="nofollow">' . thesis_num_comments($num_comments, true) . '</a>' : apply_filters('thesis_comments_link_closed', __('Comments on this entry are closed', 'thesis')); #wp #filter
		echo "<p class=\"to_comments\">" . apply_filters('thesis_comments_link', $link) . "</p>\n"; #filter
	}
}

function default_skin_comments_link($link) {
	return "<span class=\"bracket\">{</span> $link <span class=\"bracket\">}</span>";
}

function default_skin_edit_comment_link($link) {
	return "[$link]";
}

What can I do with these Thesis filters?

These filters control the text that appears when you disable comments on one of your posts. To change the text that appears on the home page, you would use the thesis_comments_link_closed filter. To change the text that appears on the post itself, you would use the thesis_comments_closed filter.

Why don’t I see that text…

…anywhere?
A new feature in Thesis 1.7 is the ability to disable the text entirely. To see if your comment text is disabled, go to the settings menu at Thesis => Page Options => Display Options => Comments and make sure the box is checked next to If comments are closed, display a message.

…on my home page?
Not everyone will see the text that appears on the home page. It depends on your Thesis settings. If you have your settings such that the home page doesn’t show any featured posts, then you probably won’t see the text. This setting can be found under Thesis => Page Options => Home Page Display => Number of featured posts to show.

If your home page shows featured posts, but the comment text still isn’t showing up, then check your custom.css stylesheet to see if you intentionally made it disappear sometime in the past and forgot about it. The element that contains the text is <p class="to_comments">...</p>, so your CSS code would probably look like one of these:

• .custom .to_comments{ display: none; }
• .custom .to_comments{ text-indent: -9999px; }
• .format_text .to_comments{ display: none; }
• .format_text .to_comments{ text-indent: -9999px; }

…at the bottom of my post?
If the text that appears at the bottom of your posts is missing, it might be because you intentionally made it disappear sometime in the past and forgot about it. The element that contains the text is <div class="comments_closed"><p>...</p></div>, so your CSS code would probably look like one of these:

• .custom .comments_closed{ display: none; }
• .custom .comments_closed{ text-indent: -9999px; }
• .comments_closed p{ display: none; }
• .comments_closed p{ text-indent: -9999px; }

How do I use these Thesis filters?

Here is an example of the code you can paste into your custom_functions.php file:

// Define a custom filter for the text that appears on my HOME PAGE.
// This filter changes the text to "Ain't no commentin' on dis mofo!"
if (!function_exists('custom_comments_link_closed')) {
	function custom_comments_link_closed() {
		return 'Ain\'t no commentin\' on dis mofo!';
	}
}
// Hook my custom filter onto the Thesis filter
add_filter('thesis_comments_link_closed', 'custom_comments_link_closed');

// Define a custom filter for the text that appears on my POSTS.
// This filter changes the text to "See? I told you they's no commentin'!"
if (!function_exists('custom_comments_closed')) {
	function custom_comments_closed() {
		return 'See? I told you they\'s no commentin\'!';
	}
}
// Hook my custom filter onto the Thesis filter
add_filter('thesis_comments_closed', 'custom_comments_closed');

Here is another example. This one is similar to the home page example above, but it goes a step further by inserting HTML code, in addition to the text. The result of the following example looks like this:

// Define a custom filter for the text that appears on my HOME PAGE.
// This filter changes the text to "Ain't no commentin' on dis mofo!"
if (!function_exists('custom_comments_link_closed')) {
	function custom_comments_link_closed() {
		return 'Ain\'t no commentin\' on dis <span style="color:#069; font-size:100%;">mofo</span>!';
	}
}
// Hook my custom filter onto the Thesis filter
add_filter('thesis_comments_link_closed', 'custom_comments_link_closed');

Oh and BTW…the comments on this entry aren’t actually closed. So…leave me a compliment, you non-chosen one.

Well…it’s official. Matt Cutts has announced that site speed is now a factor in Google’s ranking algorithm. Cue the mass hysteria, worthless recap blog posts, and stupid comments!

Instead of rehashing the same shit that all the other SEO blogs have already beaten to death, I’m going to introduce a handful of unique page speed optimization tips that I came up with myself. As you might expect from someone like me, these tips are a little bit…let’s say…unorthodox. If by chance you haven’t already learned the basics of optimizing your site speed, then I highly recommend you read Steve Souders’ 14 Rules for Faster-Loading Web Sites, which explains the following best practices:

1. Make Fewer HTTP Requests
2. Use a Content Delivery Network
3. Add an Expires Header
4. Gzip Components
5. Put Stylesheets at the Top
6. Put Scripts at the Bottom
7. Avoid CSS Expressions
8. Make JavaScript and CSS External
9. Reduce DNS Lookups
10. Minify JavaScript
11. Avoid Redirects
12. Remove Duplicate Scripts
13. Configure ETags
14. Make AJAX Cacheable

In addition to those rules, here are a few of my own page speed tips. These are geared more towards SEO, SEM, and social media folks.

Page Speed Tip #1: Cut Your Comments

Let’s be honest…none of your blog readers have anything intelligent to say. Sure, it makes you feel good when lots of people comment on your blog posts, but you need to weigh that feeling against the feeling of ranking well in Google. What do I mean by that? Well…to put it simply: WordPress blog comments slow down your page speed…A LOT. The more comments you receive on each blog post, the longer it takes to load that page. Plus, there’s a strong chance that the comments are de-emphasizing the important keywords in your post anyway. Here is a brief list of options you can consider, in order to reduce the page speed slowing effects of WordPress comments:

• Disable comments.
• Disable Gravatars.
• Delete off-topic comments.
• Don’t show comments until a user clicks “View Comments” button. Don’t let Google click the button.

Page Speed Tip #2: Scrap Your Scripts

Don’t load scripts from your pages unless you really need them. One thing I see quite often is sites that have multiple traffic-analysis scripts embedded in each page. Website owners are usually borderline-obsessive about their website’s traffic statistics, and sometimes they go overboard with the tracking scripts. Do you really need more than one? Probably not. Pick one and delete the rest. In my experience, the most common cases of excessive tracking scripts are:

• WordPress blogs that use Google Analytics + WP Stats
• eCommerce sites that use Google Analytics + shopping cart software’s default tracking script
• Sites that switched from Brand X to Google Analytics (or vice versa), but never deleted the old script

Page Speed Tip #3: Whack Your Widgets

A simple strategy for increasing your content’s exposure on social media sites is to provide your visitors with an easy way to share your post with their friends. Virtually all social media networks offer buttons or widgets for you to embed in your blog posts and website pages. These widgets vary in complexity, but they all share a common characteristic: they slow down your page speed. The best way to address this problem is to use JavaScript to load the widgets into your page after the page is finished loading everything else. For a detailed explanation of this technique, check out my article on how to install the TweetMeme retweet button without the slow page loads. If you’re not smart enough to pull off something that fancy, then try one of these inferior options:

• Delete all your widgets. Social media is for losers anyway.
• Replace script-based widgets with their HTML equivalents.
• If you use multiple inline images for your social media links/buttons, then combine them into one image, and set it as the background image for the block element that contains your social media links. For an example of this, read Page Speed: 6 Small Images vs. 1 Large Image.

Page Speed Tip #4: Stop Supporting IE6

The days of bending over backwards for IE6 users are over. Those cavemen are never going to upgrade to a modern browser if you keep catering to their needs. Adopt a new policy: fuck Internet Explorer 6 and anyone who uses it. You might be wondering what this has to do with page speed. I’ll tell you. Google’s primary means of measuring your site speed is through the Google Toolbar. That means users who have the Google Toolbar installed are sending information about your page load times to Google, as they browse your site. Now let’s imagine two different websites:

Website A is old school. It was built a few years ago, and it was designed to support Internet Explorer 6. In order to accomplish that, the site uses several hacks and workarounds. For example, it has a stylesheet specifically dedicated to IE6, and it has conditional IE tags in the HTML code that contain an IE6-specific script for handling PNG images with transparency.

Website B doesn’t support IE6. It was designed to comply with the W3C standards, and it doesn’t use any hacks at all.

If these two sites are identical in every other way, which one will be faster? Obviously, Website B would be faster. In fact, Website B would be faster in all browsers…including IE6! If your site serves IE-specific stylesheets and scripts, then Internet Explorer 6 has to process those files in addition to the default files. The other browsers wouldn’t request the IE-specific files, but they would still have to download lines of code that are of no use. Any way you cut it, supporting IE6 slows down your site and hurts your rankings.

For the advanced SEOs out there…you might consider installing a server-side script that detects IE6 user-agents and serves them a blank page. The Google Toolbar is available for IE6, so users who have it installed will automatically tell Google your page loaded in like 0.1 seconds! You know…because it’s blank? Never mind.

This experiment compares the page load times of two different versions of the social media widgets I include at the bottom of my posts. I was actually running this experiment to see for myself the kind of improvements I could achieve by combining my social media widget icons into a single image. Since I’ve already gone through the trouble of testing these pages, I figure I might as well publish the results.

This experiment has implications for anyone who’s heard about using CSS sprites but is wondering if the page speed benefit is worth the effort. Although my social media icons don’t actually use sprites, the principle is basically the same: combining several small images into one large image can help your web page load faster.

Setup

I created two test pages that render exactly the same in a web browser. The content of both pages appears like this:

However, the two test pages are coded differently. The first test page uses a separate image for each of the 6 social media links. This results in 7 HTTP requests: one for the HTML page itself and one for each of the 6 images. The second test page uses only 1 image, which contains all of the social media icons combined. This results in only 2 HTTP requests: one for the HTML page itself and one for the image. Here is the HTML code I used for each of the test pages:

Six Images

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Six Images</title>
<style type="text/css">
	#post_widgets{width:360px; height:80px; overflow:hidden; background:transparent;}
	#post_widgets a{display:block; width:60px; height:80px; float:left;}
	a img{margin:0; padding:0; border:0;}
</style>
</head>
<body>
<div id="post_widgets">
	<a href="http://twitter.com/">
		<img width="60" height="80" src="/img/twitter.png" alt="Share this on Twitter!" />
	</a>
	<a href="http://digg.com/">
		<img width="60" height="80" src="/img/digg.png" alt="Digg this!" />
	</a>
	<a href="http://delicious.com/">
		<img width="60" height="80" src="/img/delicious.png" alt="Bookmark this on Delicious!" />
	</a>
	<a href="http://www.stumbleupon.com/">
		<img width="60" height="80" src="/img/stumbleupon.png" alt="Stumble this!" />
	</a>
	<a href="http://www.facebook.com/">
		<img width="60" height="80" src="/img/facebook.png" alt="Share this on Facebook!" />
	</a>
	<a href="http://www.reddit.com/">
		<img width="60" height="80" src="/img/reddit.png" alt="Submit to Reddit!" />
	</a>
</div>
</body>
</html>

One Image

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>One Image</title>
<style type="text/css">
	#post_widgets{width:360px; height:80px; overflow:hidden; background:url('/img/widgets.png') no-repeat;}
	#post_widgets a{display:block; width:60px; height:80px; float:left;}
	#post_widgets a span{display:none;}
</style>
</head>
<body>
<div id="post_widgets">
	<a href="http://twitter.com/">
		<span>Share this on Twitter!</span>
	</a>
	<a href="http://digg.com/">
		<span>Digg this!</span>
	</a>
	<a href="http://delicious.com/">
		<span>Bookmark this on Delicious!</span>
	</a>
	<a href="http://www.stumbleupon.com/">
		<span>Stumble this!</span>
	</a>
	<a href="http://www.facebook.com/">
		<span>Share this on Facebook!</span>
	</a>
	<a href="http://www.reddit.com/">
		<span>Submit to Reddit!</span>
	</a>
</div>
</body>
</html>

Procedure

I used this web page speed testing tool to measure the page load times. Each of the 2 pages was tested 10 times. The testing server was located in San Jose, CA, and my content server was in Seattle, WA. The pages were requested using IE7 with 2 parallel connections enabled. I ran the entire experiment twice. In the first experiment, I saved the images as 24-bit PNG files. In the second experiment, I saved them as 8-bit PNG files.

Results

Conclusion

Using 24-bit PNG files: the page load time for 1 image was 13.2% faster than the page load time for 6 images.

Using 8-bit PNG files: the page load time for 1 image was 24.2% faster than the page load time for 6 images.

The goal of this post is simply to increase awareness of some of the ways the United States government is currently using social media networks to gather incriminating information about U.S. citizens. I’m not talking about the kind of surveillance where secret agents monitor terrorist organizations and keep us safe from attempted bombings. No…I’m talking about the kind of surveillance where law enforcement officers use your MySpace pictures to prove that you allowed underage drinking at your last party, the same night your friend tried to drive home drunk and ran over a group of kids and their grandmothers. One minute you’re a law-abiding citizen who doesn’t have to worry about the government spying on your social media activities, because you have nothing to hide; the next minute, you’re being charged with 11 counts of 2nd-degree murder.

Before we continue, I should mention that this post isn’t some kind of crazy conspiracy theory. This information comes directly from authentic documents provided by the U.S. government. If you want the full backstory, check out this post from the Electronic Frontier Foundation (EFF), titled EFF Posts Documents Detailing Law Enforcement Collection of Data From Social Media Sites. The article discusses some of the ways the U.S. government uses social networking sites (e.g. Facebook, MySpace, LinkedIn, Twitter, etc.) to gather personal information about ordinary U.S. citizens. It includes links to documents that EFF has obtained from the IRS and the Department of Justice. In this post, I’ll be reviewing the document from the Department of Justice, titled Obtaining and Using Evidence from Social Networking Sites.

This document was created for the United States Department of Justice, sometime after August of 2009. The document itself contains copies of slides (as in PowerPoint presentation slides) that are probably used as part of an internal training seminar of some kind. If you don’t want to read the whole 35-page pdf document, then you’re in luck…because I’ve already extracted the interesting slides for you. I have also added the following style/formatting features, in order to improve readability:

Acronyms – I searched for definitions of the acronyms used throughout the document, and I chose the definitions that made the most sense. You should see the expanded form of these acronyms when you hover over them.

Highlighting – I have highlighted content that I find particularly interesting (or worrisome).

Superscript – I have added numbers to some of the sections of highlighted content. This is to make it easier for me to add my two cents.

Bullets – Several of the slides have bullet lists but no bullets. I’ve added bullets to make the information easier to read.

Obtaining and Using Evidence from Social Networking Sites
Facebook, MySpace, LinkedIn, and More

1. TIP: If you’re planning on murdering someone, first create a script that automatically posts comments from your home computer. Make sure it’s running…then go take care of business. If anyone questions you, say you were at home…enjoying some quality time with your social media network of choice. And you’ve got the comments to “prove it.”

2. TIP: If you beat someone to death with a banana, DO NOT post photographs of said banana on your Facebook profile.

1. I have no idea WTF this is. I can only assume “Koobface” is a top secret biological weapon that the U.S. government plans to disperse through Facebook.

1. This statement is extremely significant. Why? Because it makes reference to a commonly-abused loophole in the Stored Communications Act, described under 18 U.S.C. § 2702, subsection (b)(8), which states (emphasis mine):

A provider may divulge the contents of a communication to a governmental entity, if the provider, in good faith, believes that an emergency involving danger of death or serious physical injury to any person requires disclosure without delay of communications relating to the emergency.

What does this mean? In a nutshell, it means any asshole who works for U.S. government can ask a social network for access to your records, and if the employee at that social network considers the situation to be an emergency, they can choose to comply with the request–without the presence of a court order or search warrant. Basically, what the DoJ is saying…is that the folks at Facebook will gladly divulge your personal information to anyone with a badge and a sense of urgency.

1. Messaging through messages = Brilliant

1. Am I seriously reading an internal document from the United States Department of Justice that considers “Twitter abides by the law” to be bad news?! WTF is wrong with this goddamn government? (Twitter, I sincerely hope this is a conscious effort on your part to protect your users’ privacy, and not merely the result of cutting back your expenses or something.)

2. Let me remind you that 2702 is the loophole I mentioned previously. In other words, the “bad news” is that Twitter’s employees won’t shit on your constitutional rights like Facebook’s will. What a bummer.

1. TIP: Out of the 4 social media sites mentioned in this document, LinkedIn is probably the best option for satisfying your criminal communication needs. LinkedIn is the only one that doesn’t have a “HOW TO GET INFORMATION FROM __” slide–possibly because law enforcement assumes LinkedIn doesn’t have any juicy criminal information to exploit.

So what have we learned from all this? Well…at the very least, I hope you’ve realized how vulnerable your personal/private information is. Basically, all the information you post to social media profiles (and all the private messages you send/receive) can be accessed by law enforcement and government agencies with very little effort…and they can use that information against you. So the next time you’re in the voting booth and you find something on the ballot that aims to provide the government with the power to demand private information from social media sites or online service providers…vote against it. And the next time you kill someone with a banana…don’t brag about it on Twitter.

Earlier today, a very rare occurrence occurred: an SEO-related question arose to which I did not have an answer. I’m as shocked as you are. The question in question is already mentioned in the title and h1 of this post, but for the sake of keyword prominence/stuffing, I’m going to mention it again–using various synonyms, stemmed variations, and of course…a big fat prominent font size. Here’s the stumper that stumped me:

What is the max number of chars in a URL that Google is willing to crawl and index?

For whatever reason, I thought I had read somewhere that Google’s limit on URLs was 255 characters. But that turned out to be wrong, so maybe I just made that number up. The best answer I could find was this quote from Google’s Webmaster Trends Analyst, John Mueller:

“We can certainly crawl and index URLs over 1000 characters long–but that doesn’t mean that it’s a good practice.”

The setup for this experiment is going to be pretty simple: I’m going to edit the permalink of this post to be really, really long. Then I’m going to see if Google indexes it. I might even see if Yahoo! and Bing index it…even though no one really cares what those assholes are doing.

URL Character Limits Unrelated to Google

The question now is: How many characters should I make the URL of this post? There are a couple of sources I’ll reference to help me make this decision. The first is this quote from the Microsoft support pages:

Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.

The second source I’ll cite is the HTTP 1.1 protocol, which says:

The HTTP protocol does not place any a priori limit on the length of a URI. Servers MUST be able to handle the URI of any resource they serve, and SHOULD be able to handle URIs of unbounded length if they provide GET-based forms that could generate such URIs. A server SHOULD return 414 (Request-URI Too Long) status if a URI is longer than the server can handle (see section 10.4.15).

Note: Servers ought to be cautious about depending on URI lengths above 255 bytes, because some older client or proxy implementations might not properly support these lengths.

Experimental URL Character Length…

This experiment is going to try a URL of 2048 characters…that way, we can also see if Microsoft was telling the truth about Internet Explorer. I’ll update this post when I find out whether or not Google can index this ridiculously-long URL.

WordPress isn’t letting me edit this page’s permalink to be anything longer than 200 characters, so I’m going to try to edit the core WP files and the database settings to get it to work. So if this post doesn’t yet have 2000+ characters, just wait a little bit and check back later. If I have to, I’ll just create a static HTML file for this post.

Okay, so apparently the 200 character limit was a combined effort between WordPress and the database. I was able to alter the database side of things by changing the varchar(200) setting for the post_name column to varchar(2048). However, I had a much more difficult time finding the WordPress file that was truncating the permalink post slug, so I finally gave up. Instead, I edited the database directly in phpMyAdmin, and pasted the huge page_name value over the 200-character value. As long as I don’t try to update this post through the WordPress admin, it will keep using the value I gave it. Also, this is a static .html file…I used an internal rewrite in .htaccess to point that fatty URL to this file.

Experiment Results

The first results are in, and they’re rather interesting. Or at least confusing. Google has NOT indexed this page yet, and judging by the looks of the error reported in Google Webmaster Tools…I don’t think it’s going to. The error says:

“Invalid URL – This is not a valid URL. Please correct it and resubmit.”

I’m not sure what makes this URL invalid. According to the W3C protocol, this URL is perfectly valid. Furthermore, as I’ve pointed out in the image…Google Webmaster Tools left off the “L” at the end of the anchor text URL. (WTF?) However, the href value itself is correct, and clicking on that massive link actually takes me to this page. I’ll wait and see what Yahoo and Bing do…then I’ll update again.

Click image to view larger

Update: 2/24/2010 (24 hours after original post)

Okay, none of the three search engines (Google, Yahoo, Bing) indexed this page. In addition to the error shown above, Google Webmaster Tools also had a problem when I submitted this page to the Labs feature, Fetch as Googlebot. Again, it mysteriously dropped the “L” from “html”:

The next experiment I’m going to try is to resubmit the Sitemap, but this time the long URL will be 2047 characters (I will shave off the very last character). I’ve also set up a 301 redirect that points the 2047-character URL to the 2048-character URL. In other words, I’m going to use the 2047-character version to lure googlebot over here, then I’m going to fatality that little bitch with an extra character…possibly bringing down Google’s entire network in the process. So here goes nothin’…

Okay…I just submitted the new Sitemap to Google Webmaster Tools, and Google accepted it! Then I went back to the Fetch As Googlebot feature and tried submitting the 2047-character URL…and it was a success! (Just FYI: I also randomly noticed that Google actually has a 2048-character limit coded into the input field.)

Click image to view larger

Actually, it was only a partial success. Webmaster Tools shows that the fetch was successful, but then when I click on the link to see the results, I get this:

(And yes…I really did take the time to re-code that ↑ in XHTML strict, instead of just taking a screen capture. I’m THAT dedicated to page speed…or something.)

That’s right…after Google saw the length of my URL, it just plain refused to accept my request and returned a 414 status code instead. Honestly, I think this was my first time ever seeing a 414 HTTP response. How exciting! No? Whatever.

None of the search engines have indexed my 2047-character URL yet (and I doubt they will), but I’ll give them another day before I try something else. Until then…

Update: 2/25/2010

None of the search engines fell for my bait n’ switch, so I’ve made some more changes. First, I changed all of my internal links to the 2047-character URL (i.e. I altered the database value for post_name again). Then I edited my .htaccess file so that (1) the internal rewrite connects the new URL to the same static HTML file I’ve been using, and (2) the 2048 URL redirects to the 2047 URL (to avoid breaking the bit.ly URLs that have already been passed around). Also, I noticed that I had overlooked a slash in my URL (corresponding to the text “prominence/stuffing”), so I have replaced it with a dash. Essentially this means the current 2047-character URL is different from the one in the bait n’ switch. Lastly, I updated my Sitemap and resubmitted it to Google, Yahoo, and Bing, via their respective webmaster tools. The final result of today’s changes is that this page now has a 2047-character URL, which is linked to from all WordPress-generated pages and pointed to in my sitemap.xml file. In other words, there’s nothing fancy going on here. Neither of the previous URLs was indexed, so as far as search engines are concerned, this is simply a new page that needs to be crawled.

In addition to submitting my Sitemap, I also tried submitting the new 2047-character URL to each of the search engines’ “submit your URL” pages. (I never thought I’d be using those again!) One thing I discovered was that none of the URL submission forms would accept 2047 characters in their input fields. Here is the HTML for each of the input tags:

Google:
<input type="text" maxlength="256" size="40" value="" name="q">

Yahoo:
<input type="text" maxlength="256" size="60" value="http://" name="site_url">

Bing:
<input type="text" maxlength="1024" value="" size="30" name="url">

Fortunately, these character length restrictions rely on the value of the maxlength HTML attribute, which I can easily modify with the (must-have) Firefox extension, Firebug:

Unfortunately, any web developer with more than 3 brain cells will implement a server-side restriction as well, in order to foil the plans of any wannabe hackers who might try to circumvent the client-side restriction by editing the value of the maxlength HTML attribute. I ignored this possibility and tried it anyway. Google gave me another 414 server response error page. Yahoo gave me this:

And Bing gave me this:

Thank you for submitting your URL to Bing

MSNBot automatically indexes pages that meet accepted standards for content, design, and technical implementation.

This change will not be reflected immediately, so please be patient and check back periodically.

Bing’s response suggests that my little Firebug trick worked, and therefore their URL submission feature may have been created by web developers of the 1-brain-cell or 2-brain-cell varieties (possibly the same developers that created Internet Explorer). On the other hand, it’s quite possible that Bing’s server silently discarded my URL but returned the same “thank you” page that everyone sees. However, I have to assume the former case is true, since it conveniently set me up for that IE joke. I hate Internet Explorer. A lot.

The last (and most interesting) discovery I’ll mention…is that Google Webmaster Tools is reporting a 404 error for the following URL:

http://www.seomofo.com/experiments/earlier-today-a-very-rare-occurrence-occurred-an-seo-related-question-arose-to-which-i-did-not-have-an-answer-im-as-shocked-as-you-are-the-question-in-question-is-already-mentioned-in-the-title-and-h1-of-this-post-but-fo

I pasted this URL into my beloved SERP Snippet Optimizer tool, which revealed that this URL is exactly 255 characters long! Maybe I didn’t make up that number after all. Maybe…I’m psychic. Also note that Google is claiming to have discovered this “broken link” on the 23rd–the same day I first published this post, and at a time when the URL was 2048 characters. Here’s the screen capture:

What’s the significance of this 255-character broken link? I don’t know. I’m pretty sure it’s the result of Google truncating my URL to fit into some kind of database, but where did it pull the URL from…my Sitemap? And why is there a discrepancy between the REAL maximum character length (255) and the maximum character length that Google’s front end developers seem to believe in (256)? Perhaps Google’s database restricts this string to 2048 bits, but the first 8 bits are reserved for something (e.g. the length of each URL)? I get the feeling the significance of “255 vs. 256″ and “2047 vs. 2048″ would be really obvious to me if I had pursued a degree in computer science instead of bartending. If you have any insight on this, drop me an email. My address is listed in this domain’s whois records.

I’ll check back tomorrow, after Google has had sufficient time to crawl this page…

Update: 2/28/2010

I’m in! Over the weekend, Google and Bing have both indexed this page with the 2047-character URL.

Google

Bing

Update: 3/2/2010

After seeing these SERP results, you might be tempted to assume that it’s perfectly safe for you to start using 2047-character URLs on all your pages…and the only loss would be your Yahoo traffic. Not so fast, champ. Depending on your browser and whether or not you’re signed into a Google account, you may end up seeing the 414 error page again.

If you are using Internet Explorer, Safari, or Chrome, OR you’re signed out from your Google account, then Google’s SERP links take you directly to the URL, my server serves you the page, and there are no problems.

If you are using Firefox or Opera, AND you’re signed in to a Google account, then Google’s SERP links do NOT take you directly to the URL. Instead, the links point to a URL on Google’s servers, where information about your click is logged, and then you’re redirected to the URL shown in the search results. The Google URL you’re first sent to follows a pattern similar to this:

http://www.google.com/url?sa={…}&source={…}&ct={…}&cd={…}&ved={…}&url={URL shown in SERP listing}&ei={…}&usg={…}&sig2={…}

From looking at that URL pattern, you can see why the URL for this page would be problematic. We’ve already established that Google will return a 414 status code for any requests of URIs longer than 2047 characters, so obviously when I plug a 2047-character URL into that parameter in Google’s URL, it’s going to be well over the limit. (The full Google URL ends up being roughly 2220 – 2230 characters, which fluctuates depending on if you’re using Firefox or Opera.)

In order for FF and Opera users to avoid the 414 page, they would need to disable JavaScript, so that Google’s SERP links send them directly to the destination URL, instead of routing them through Google’s server first.

The end result: Google crawled and indexed my 2047-character URL, but not all users will be able to access the URL from Google’s SERPs–some will get Google’s 414 error page. Additionally, the “Cached” link in Google’s SERP listing didn’t work in any browser, regardless of whether I was signed in or out.

Yahoo failed to crawl and index this page (it’s been up for 5 days), but we’re moving on anyway. You stink, Yahoo!

The surprising winner of the long URL competition is actually Bing, who successfully crawled and indexed my 2047-character URL…AND made it accessible from its search results. Both of the SERP links work: the regular link and the “Cached page” link.

Now I’m going to cut the URL length down to 1855 characters, to keep the Google SERP link under 2048 total characters.

I’ll be back…

Update: 3/11/2010

The current URL (1855 characters) has been indexed by Google, and it no longer returns the Google 414 error page when someone clicks on the link from the Google search results.

Final Results

The longest functional URL that Google will crawl and index is approximately 1855 characters.