Published: 5th Feb 2017 | Words: 817 | Reading Time: 5 minutes


Different paths for different situations

A lack of understanding of the difference between absolute and relative URL’s can cause you all sorts of headaches if you build a website and change its folder structure later on. While it may seem like a good idea to just drag and drop images within your HTML document in programs like Dreamweaver when you are building a website you can end up with a lot of relative URL’s within your documents which is not the right way to go when building paths to assets.

Absolute URL's

Absolute URL’s contain the entire path to whatever is being requested e.g. a page, image etc. and these give search crawlers and users a clear indication of exactly where the resource is within your site structure. It’s really good practice to use absolute URL’s on every path within your HTML page. For instance on any images, any page links, and any links within your head Meta. The reason you should always follow this principal is if you ever move a page into a different folder / level within your site you won’t have any issues with the paths within your page. If you used relative URL’s the situation would be quite different and you could end up breaking all the paths within your page. If you are using PHP you can define a constant early on within your script that holds the primary domain or image folder path.

define('HOST_IMAGES', ''); // define your primary image path 

<img src="<?php echo HOST_IMAGES ?>test.jpg"> // outputs

For SEO reasons its encouraged to provide crawlers with the full path to resources. Although you may think it is extra work to provide full paths on resources than just using relative positioning the problems that can arise from not providing the full paths can be hard to fix. If you have resources you don’t want indexing under certain protocols, e.g. https and you don’t provide an absolute URL, a situation may arise whereby a crawler crawls the https version of your page and indexes the assets under the https protocol as they may be requested that way. An absolute URL gives the exact path, no more, no less, to where something is. When you get into the habit of providing absolute URL’s on everything within your HTML it becomes quite easy to pick up on any links which may not be right and it makes changing paths site wide very easy.

Relative URL’s

Relative URL’s are quite different in they give a path to a resource relative to where you are now. Relative URL’s are discouraged on web pages because they don’t give the same clear indication of exactly where a file is on a website, but merely where it is relative to your page. For PHP script these kinds of URL’s are a necessity as you can be requesting files above your actual site home page. Your website home page is actually just a folder with a home page in it on a server. There can be folders above this folder but these are not accessible from the web. Relative URL's can link to anything on a server within a PHP script as these are requesting files within the actual server folder structure instead of the site structure that users and search engines navigate through.

../../../index.php // this is requesting a file multiple  levels above the current folder

Generally CSS files will contain relative paths if you structure your website in a sound way. This means a good structure for your CSS files and images files. Within a CSS file the assets you will be requesting most will be images for things like backgrounds etc. in terms of SEO this does not matter. The assets for your page layout are something which should not be part of your SEO strategy as they’re not part of your page content they are just part of your layout. Stick to the rule of absolute URLs on anything within your HTML page / document, these assets will form part of your SEO and page content and you can probably get away with relative URL’s on pretty much anything else.