What is a Relative URL?
A relative URL is a Uniform Resource Locator (URL) that specifies the location of a target relative to the address of the page where it is situated. Unlike absolute URLs, relative URLs do not contain the protocol (“http://” or “https://”) and the domain name (e.g., “example.com”).
For example, if the page
https://example.com/seo/glossary/relative-url/ (with a trailing slash)
contained the following code:
<a href="best-practices">best practices</a>
the final destination of that link would be
https://example.com/seo/glossary/relative-url/best-practices.
This example demonstrates the simplest use of a relative URL. To avoid errors associated with relative URLs, it’s important to be familiar with more advanced use cases.
Understanding a Directory
Let’s look at the same example, but this time the page URL does not end with a trailing slash:
https://example.com/seo/glossary/relative-url
The same code on it:
<a href="best-practices">best practices</a>
would now lead to:
https://example.com/seo/glossary/best-practices.
Why?
While there’s no difference for users, a URL with a trailing slash is technically a directory, whereas one without it is considered a file within the /glossary/ folder (directory). In this case, a relative URL is relative to the current directory.
There’s another format for a current directory-relative URL:
./before the link.
So these two links will lead to the same destination:
<a href="best-practices">best practices</a>
<a href="./best-practices">best practices</a>
Root-Relative Path
If the relative URL has a leading slash, it means that it is relative to the root domain, ignoring all folders and subfolders.
Back to our example:
<a href="/best-practices">best practices</a>
This code on this page would create a link to:
https://example.com/best-practices
One Level Up
The ../ prefix of a relative link makes it relative to the directory one level up from the current one.
The current directory for the URL https://example.com/seo/glossary/relative-url (without a trailing slash) is /glossary/.
So the following code:
<a href="../best-practices">best practices</a>
will create a link to:
https://example.com/seo/best-practices
Relative vs Absolute URLs for SEO
In terms of SEO, there’s no difference between relative and absolute URLs in the links on pages. However, it is recommended (but not prohibited) to use absolute URLs in rel="canonical" and hreflang tags to minimize the potential for errors and confusion.
Conclusion
Understanding relative URLs and their use cases is crucial for proper web navigation and maintaining an organized site structure. While relative URLs can simplify link management within a site, absolute URLs are preferred in specific SEO tags to ensure clarity and prevent errors.