Link Source Ordering

by Matthew James Taylor on 20 February 2009

Link Source Ordering: Focus link popularity onto key pages with SEO

If you are about to design a new website then please read this article first. By following some simple rules regarding link ordering, you can vastly improve the Search Engine Optimisation of your entire website.

It has been common knowledge for a while now that content source ordering is important for optimising a page. Content that comes closer to the top in a page's HTML source code is given more priority by the search engines than content further down. This is why it helps to build layouts where the main content column comes before any side columns. See my liquid-layouts with column source ordering for a good example of this. The point I want to make is this: the source order does not only apply to content, it also applies to links!

Link source ordering

Years ago I discovered that the highest ranking page on my website was actually one of my least important pages! It was my mailing list subscription page, and it was ranking higher than everything else. I was shocked because there was nothing on this page except for a basic email subscription form. How could a page with no content get such a huge ranking?

The design of my website was not unusual. I had a logo in the top left corner, followed by a standard navigation bar across the width of the site and two columns below that. The main content was in a wide column, with a sub menu on the side in a narrow column. But then at the top right of the page I had a little link to my mailing list page - this was the culprit!

The visual order of links on a website

Without realising it, I had put my mailing list link before all other links on the page. It was the first link in the HTML source and this was actually telling Google that my mailing list page was the most important page on my website. To make matters worse, I was using the same template across my whole website so every page was saying exactly the same thing. Google was simply following my own instructions and passing the majority of my link popularity onto this one, insignificant page. Wow!

The problem was easily fixed. I simply moved the offending link down into my website footer. But I was curious. Imagine if I could intentionally redirect link popularity? Well, now I knew how!

Design a website around optimised 'link source ordering'

From that point on I started designing my websites in a completely different way. Whenever I was constructing a sitemap I made sure I listed pages in order of priority. Now when I say priority, I'm talking about 'link popularity priority', or in other words, "what pages need to rank highest in search engine results". All other pages can be considered 'low priority' and can be put last in the sitemap order. Some of these 'low priority' pages are still important pages, they just don't need to be found via a Google search. For example, 'terms and conditions' and 'contact us' are both important pages, but you don't typically search for them in Google. When people want to find these pages, they will go directly to your website, and then look for a link to them on your homepage - no searching is involved.

After I started thinking about website design in terms of 'link source ordering' some of the peculiarities of the web started to make sense to me. For example, why is a homepage typically the highest ranking page on a website? Well it's simply because the homepage link is often the first link in the website navigation and thus the HTML source order! And another example, why does adding links to your website footer make little difference to the link popularity of those pages? Well, it's because they are so far down in the HTML source order that they pass on very little link popularity...

Now, I want to end this article with a neat CSS trick. Sometimes we find ourselves drawn between two opposing ideas and we can't decide which way we should go. For example, we might have our main menu optimised in 'link popularity order' but we also want to place a set of less important links in the top right of the website above this menu. Well, we can actually do both without ruining our link source ordering, all we need is a little CSS trickery.

Change the visible link order with CSS

Here is an example of how we can start with the most optimal link source order in raw HTML and then change it visually with CSS so it matches the desired website design. This is a very useful technique that can be used in many different ways.

First, here is the HTML for the website header with the links in the optimal link popularity order. Notice that the 'less important link' comes after the main menu.

<div id="header">
	<h1>Link Source Ordering Example</h1>
		<li><a href="#">Menu Link 1</a></li>
		<li><a href="#">Menu Link 2</a></li>
		<li><a href="#">Menu Link 3</a></li>
		<li><a href="#">Menu Link 4</a></li>
		<li><a href="#">Menu Link 5</a></li>
	<p><a href="#">Less important link</a></p>

And now here is a diagram of the design we want to achieve. Notice that the 'less important link' is at the top of the page.

Visually swapping the link order with CSS

We can easily move the less important link to the top of the page with CSS. First we make the header div position:relative, this allows us to position the link relatively to it. We then position the less important link in the top, right corner of the header div using position:absolute; top:0; right:0;. Here is the complete CSS.

#header {
#header ul {
#header ul li {
#header ul li a {
	padding:.5em 1em;
	border-right:1px solid #c60;
#header p {

Check out my CSS link ordering demo for a working example. View the HTML source of the page to see the order of links.

If Search Engine Optimisation is important to you, then try optimising the order of links on your website. You will gain some control over which pages in your website rank the highest in search results.

Follow me on Twitter @mattjamestaylor

Enjoy this article?

If you find my website useful, feel free to donate any amount you wish. It will help pay for my hosting! =)

Matthew James Taylor

Related articles