Details about absolute urls and relative urls – what are they, how and when to use them; also referred to as absolute paths and relative paths.
In another post about Create HTML Email with Outlook, I briefly mentioned that images used in HTML emails need to be on a live server, and the paths to those images must be absolute. Apparently, some still have problem with their images not showing in the HTML email due to broken/invalid paths. Here are some more explanation.
Examples of absolute urls and relative urls for HTML IMG tag
Let’s start with some examples. Hopefully, you’ll get a hang of it right after this section without further details. Since you probably had trouble displaying images, I’m using the image tag for the examples.
Below are examples of relative URLs. Those urls will work when used in your web pages depending on your file/folder structure/hierarchy, but they WON’T work in your HTML emails.
<img src=”banner.gif” />
<img src=”../images/public_site/banner.gif” />
<img src=”/images/public_site/banner.gif” />
This is an example of an absolute url. The url will work in your web pages and HTML emails. Again, for HTML email, use only absolute urls.
<img src=”http://www.yourwebsite.com/images/public_site/banner.gif” />
Absolute urls / absolute paths
As mentioned from the other post, and also from the above examples, you can see that there’re various ways to construct a relative url; however, there’s only one way to write an absolute url. Absolute urls, absolute links, absolute paths – whatever you prefer to call them – all start with your full domain name + the directory path to the file. In the example of absolute url above, your banner.gif image is inside the public_site folder which is located inside the images folder.
Absolute url always includes a full path to your file starting from the root [which is your domain name http://www.yourwebiste.com] => your folder(s) [/images/public_site/] => the file name [banner.gif], thus your email or web page will have no problem following the path to get to the file [image] because the path is full and valid.
Just imagine you want to show your friend how to get to the bath room: enter the front door => turn right at the hall way => go straight then turn left => the bath room is straight ahead. With this type of directions, it’s very unlikely that your would friend get lost because he knows where to start and where to turn.
Relative urls / relative paths
Relative url / relative path as its name implies shows the path to a file in relation to the present file/directory. Hard to understand? Consider the directions to the bath room analogy again. If your friend is NOT at the door but he’s already in the hall way, then you can omit the part about entering the door and turning right at the hall way; thus, the directions will be shorter like this: go straight then turn left => the bath room is straight ahead. That’s a relative path to the bath room.
It’s pretty much the same for relative urls or online relative paths.
- If your web page is in the same folder with your banner.gif image, then to link to the image from that web page, you only need to use: <img src=”banner.gif” />
- If your web page is in a different folder from your banner.gif image, then to link to the image, you can use this <img src=”/images/public_site/banner.gif” />
When to use absolute urls/ absolute paths:
- In HTML email: HTML email is like a stand-alone html file; thus, relative urls won’t work simply because relative urls are relative to what? Where’s the root?
- In your search engine site map: If you’ve submitted your site map to search engines like Google, Yahoo! or MSN either in xml or text format, you already know that the urls put in the site map file need to be absolute urls or else the site map becomes invalid.
- When link from http:// to https://: If your public site uses http:// and your extranet uses https:// with a Log-in button, the link on the Log-in button needs to be absolute.
Why to use relative urls
- Relative urls are for sure shorter than absolute urls; thus it’s much faster to hand-code and maintain.
- Using relative urls will help tremendously if you switch to a new domain.
Hopefully this post will give you a much better understanding about absolute url and relative url, especially in the context of creating and sending HTML email.
whoa, this is a impressively good writeup. I read about something like this before, this is pretty good material.
For SEO and everything else, it doesn’t matter if you use relative or absolute urls. The reason is for both types of url, as long as you’re linking correctly, search spiders will get to the linked pages without any problem.
Some may think in some cases absolute urls can be more helpful especially when the absolute or full url contains keywords that the relative url doesn’t. This however is disputable and dependent on many other factors.
Thanks for the feedback!
is it better to use absolute urls for seo, or not? Thanks!
There are some amateur internet marketers that think about renting domain names for promoting their sites. Well honestly it’s a bad plan but it also can be a good business idea.