There are advantages and disadvantages to using both absolute and relative links. Here I will explore the differences between the two, outline some pros and cons and also provide some additional information on how you can create hyperlinks in your site that will ensure that all links to your content remain in tact and properly functioning.

Back in the day, you know... the early 2000's, I loved to use relative links. Inserting relative links made websites development easy in cutting-edge programs such as Microsoft FrontPage. By using relative links you could move files around in your directory structure and FrontPage would automatically update all your link paths throughout the site, keeping them connected to the pages in their new location. No more manually updating all your internal links by hand! It was brilliant.

But now I'm not as big a fan of relative links as I once was. I don't have huge problems with them, but I understand the value in using absolute links rather than relative links. But perhaps I should take a step back and explain the difference between the two.

Absolute links contain the entire URL in the hyperlink.

<a href="http://www.site.com/category/page.html></a>

This link contains the full path of the destination page. Copy and past that into your browser address bar and you'll get to the destination. When used on a page, the link has no bearing on what page the visitor is on, only where they want to be taken. With absolute links, there is no mistaking the path to the destination.

Relative links show the path to the destination page using the minimal amount of information necessary, using the current page as the starting point.

<a href="page.html"></a>
<a href="../page.html"></a>
<a href="/category/page.html"></a>
<a href="../category/page.html"></a>

Above are four examples of relative links. Let's take them one at a time.

The first link takes the user to the noted page that is in the same directory as the current page. This relative link would not work if the two pages being linked were in different folders or different directory levels.

Link from: www.site.com/about.html
Link to: www.site.com/page.html

The second link contains ../ which takes the user back one directory from it's current location. For this to work the page being linked to must be back one immediate directory.

Link from: www.site.com/category/page.html
Link to: www.site.com/page.html

If the link were to point to a page several directories back, then the relative link code would look like this: ../../page.html

Link from: www.site.com/category/subcategory/page.html
Link to: www.site.com/page.html

The third example above simply points to a link that is in a sub-folder which resides in the same directory of the current page. To link to such a page the name of the folder, in this case "category," needs to be represented in the link.

Link from: www.site.com/page.html
Link to: www.site.com/category/page.html

Finally, in the fourth example above, the relative link takes the user back a directory, and then forward to another subfolder.

Link from: www.site.com/products/page.html
Link to: www.site.com/category/page.html

Most WYSIWYG (what you see is what you get) HTML editors will automatically insert the correct relative link code when you insert your hyperlinks using their interface. This makes relative linking extremely convenient for the site developer.

Cautions of using relative links

While relative links can be more convenient for a variety of reasons, there are some cautions that you want to take, and some cases where relative links simply should not be used.

Scraped content: Over the years I've heard countless stories of a site's content being scraped from their website and republished on another without permission. If the content that is scraped contains links, those links will often appear on the scraping site as well. If you used relative links then the scraped and republished links will essentially be broken. After all, what are the chances that the scraper site will also have a page located at /yourproducts/yourpage.html?

However, if you used absolute links, the scraped links will point people to the page you intended. Since the link contains the full link path, there really is only one destination, regardless of where on the internet that link resides.

Global include files: When using global include files for site navigation then you absolutely need to use absolute links. An include file allows you to grab content from a single page and insert it into any page on your site as if it belonged on that page. Include files are perfect for navigation because it allows you to easily edit, add or remove global navigation links on a single page but have it reflected on every other page that pulls that include file.

The reason to use absolute links in your include is because relative links will only be relevant from the location of the include file, not the actual page that displays the information. Let's say that you keep all your include files in a folder called "includes". Now create two relative links out:

../page.html
../category/page.html

Those links are only relative to the navigation file in the include folder. If you were linking directly from another page, those relative links should look like this:

page.html
category/page.html

While in this case the browser still might take the visitor to the correct page (if there is no folder to back up to) in other cases where the starting point is different, the links might be broken all together. The only way to prevent having these broken links and still use relative rather than absolute links is if you kept all your files in the same directory folder. That's feasible, but usually not the most strategic thing to do.

The downside of absolute links

There is one downside to using absolute links. If you move your content or files from one location to another within your directory then it's very possible that all links to that content will be broken. The simple solution is to perform a broken link check after making any such changes.

Checking for broken links on a regular basis is a good idea no matter what, so the downside here isn't really significant.

Alternative link paths

While we are addressing how links are constructed I should point out a couple of other ways to create links that also have merit:

./

The single dot instead of the double dot before the slash tells the browser to go back to the root URL, much as if you had the full web address in the link. These two links are read exactly the same:

./products/page.html
http://www.site.com/products/page.html

The down side of this is, again, if content gets scraped, the non-absolute link won't work.

<?=$hostAddress;?>

Sites using PHP can use the above code instead of the domain name, where the domain name has already been pre-defined. This works the same as an absolute link because it inserts the URL into the link on the server side, the same way include files are inserted. The advantages to this are that if content is scraped the proper, full, URL is included. Secondly, if you ever have to change domain names (let's hope that doesn't have to happen), changing all your absolute links is as simple as making the change to the defined host address.

Images and 404 pages

When deciding to use absolute or relative links there are a couple of other considerations. You'll need to decide what kind of links to use for your images. Most times it's easiest to use relative links for them, but, again, the same issues apply in regard to include files and scraped content. Though for the latter, I'd think it's less of a worry.

Also, when creating 404/redirect pages you will want to use absolute links for all navigation, links and images. Using relative links is sure to create broken links and images, depending on how the visitor happened to be fed this page.

So what is best for SEO?

Honestly, it doesn't really matter. Relative links use less code so an argument can be made to go that route. But also consider that search engines are often less forgiving than a browser. Just because a relative link works fine for your visitors, there are times when the search engines won't be able to follow it properly if the link isn't exact.

The best solution, then, is to use absolute links. By doing so you'll avoid all of the potential issues noted above and it is really the only absolute way to know your links will work properly.


June 17, 2008





Stoney deGeyter is the President of Pole Position Marketing, a leading search engine optimization and marketing firm helping businesses grow since 1998. Stoney is a frequent speaker at website marketing conferences and has published hundreds of helpful SEO, SEM and small business articles.

If you'd like Stoney deGeyter to speak at your conference, seminar, workshop or provide in-house training to your team, contact him via his site or by phone at 866-685-3374.

Stoney pioneered the concept of Destination Search Engine Marketing which is the driving philosophy of how Pole Position Marketing helps clients expand their online presence and grow their businesses. Stoney is Associate Editor at Search Engine Guide and has written several SEO and SEM e-books including E-Marketing Performance; The Best Damn Web Marketing Checklist, Period!; Keyword Research and Selection, Destination Search Engine Marketing, and more.

Stoney has five wonderful children and spends his free time reviewing restaurants and other things to do in Canton, Ohio.





Comments(16)

Spot on Stoney! Couldn't agree more. I especially like using the PHP method to insert the site host dynamically. That also makes moving a site from a development server to the live domain a breeze. Great post. :)

The single dot before the slash is kind of superfluous, since starting every link with a slash just makes them relevant to the site's root.

Correct me if I'm wrong, but if you just start with a slash won't it look for the page or sub-folder in that same directory. I know I could test this out easily enough, but I'm just lazy right now. :)

Hey again. Bob is right about the slash...If you start the link with a slash, it starts from the root of the site. For example, if you link with href="/destination-folder/". If you link without it, like href="destination-folder/", that's where it looks for sub-folders. It's ok, I forget things too and sometimes colleagues have to remind me. :)

Scott, Bob... not sure why I didn't know this. I typically us just a "/" in my links to go back to the home page (instead of /index.xxx). For whatever reason I never made the connection. Thanks for setting me straight.

No problem. Of course, the point is moot is you prefer absolute URLs in your links. If you link to /dir/dir/page.htm and the site gets scraped, that link will point to scraper-site/com/dir/dir/page.htm, whether it exists or not. Only the full URL will guarantee that the scraped link will continue to link to your site.

Thanks Stoney for this info..^^ I will try to do this next time..^^

Absolute links... well...

In development we use relative links. This just makes it easier to move about the website instead of every link taking you back online to a page that doesn't yet exist.

I always use absolute links when it comes down to working internal contextual links. Hopefully I'm getting the best of both. But so far it does seem to work for me.

Robert, that's where the PHP host address reference works wonders. You can use it when in development and then just chance the global reference to the domain name once the site rolls out.

> The single dot instead of the double dote (sic) before the slash tells the browser to go back to the root URL,

Actually, this says to start in the CURRENT directory, and is equivalent to not having the './' at all. If used from within a subdirectory, the link will be referenced from within that subdirectory - not the domain root.

Starting local links with a leading slash '/' will force the link to be relative to the domain root (a "domain relative" link). This, IMHO, is the best option, since the links work if the file is moved into a new directory, works fine when tested on a staging server (whereas absolute links won't), works when the nav HTML is stored in a separate file and used via an SSI, and are shorter to type.

Stoney: Great idea, but we've just moved all of our websites onto a django server. Thankfully development takes place and then we can set the urls in a single file. Fantastic for avoiding the website.com www.website.com www.website.com/index.html problem as every one of those resolves to a common url automatically.

I guess that's yet another reason I recommend to my clients that we move away from PHP and onto this system. Once live it automatically resolves everything as an absolute URL. Although I must confess I have no idea how half of it works... but I'm just the SEO guy :)

This is not right at all. If you just use a slash at the beginning of a URL, the browser will pre-pend the url with the site address being used to access the site. This is absolutely needed when the site can be accessed via multiple addresses. For example, if the site can be accessed via exampleone.com or exmpletwo.com then using absolute links, as the author suggests, would cause all the links on exampletwo.com to go to exampleone.com. This can be highly undesirable if the two sites are not exactly the same but share similar code.
If absolute links are still desired then the solution given by Scott Allen is another good solution. This option is available in nearly every language. However, if you are building a static web site that does not include a server side language then simply starting URLs with a slash would suffice.
If you are using SSL on a site then this is also very important. Switching the URL from mydoamin.com to www.domain.com can cause a security notice to popup in a user's browser which is something that is very definitely NOT desirable.

I also don't like relative URLs but relative to site root URLs are perfectly fine AND make easy development work as well as sites that work with multiple URLs.

@Brandon: if the site can be accessed via multiple addresses then duplicate content is more of a worry at this stage. Simply 301 domains to a single one. This will prevent the linkjuice from being split between various duplicated pages.

Brandon, Robert is right, if you've got two sites that are mostly the same then you're going to run into some serious duplicate content issues. It's best to get them all combined into one.

Usin "./" is not same as using "/" . Though it may work fine at your end and when you test the product but it certainly will create some circumstantial error at the Client's end. I am saying this from the experience.

My website used Relative URL's. It use to work fine at my end. Everything worked fine for about 2 years and then one fine day i decided to look at the server logs.

I was surprised to see that there were quite many visitors stuck at pages that do not exist.

Like for example :

http://mywebsite.com/Folder-1/Folder-2/1234/ was the page. Relative URL's were used to Load Script on every page. I was surprised to find users getting a 404 Error for this page http://mywebsite.com/Folder-1/Folder-2/1234/Original/js/english/main1.js.php/

The location of the script was http://mywebsite.com/Original/js/english/main1.js.php/

The website worked fine at our end. But one thing was clear. It was the "Relative URL's causing this."

So i would highly recommend to stick to the basics and use a "./" instead of just using "/".

Trust me on this!

Also some scrapper systems are designed to Ignore website having Absolute URL's. Thus using Absolute Url's will save lot of your Server Bandwidth by keeping leechers away.

My advise is to USE "Relative" or "Absolute" from the very beginning and just stick to it. But please do not go for the switch after the project completion and especially when the code is Gigantic.

Switch from "Absolute To Relative" or vice versa creates more problems then it probably solves.

Both have "Advantages" or "Disadvantages". If you are in for a short 100 or 200 Meter hurdle go for "Relative". If you are in for winning the Marathon go for "Absolute"

Regards:

Rishi Rich

@ Rishi,

good point. Since writing this article I've found my server handling the ./ and / differently.

Comments closed after 30 days to combat spam.


Search Engine Guide > Stoney deGeyter > The Glory of Absolute Linking (As Opposed to that Relative Linking Crap!)