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 so big of a fan as 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 pointed 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 dote 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.