What is a Relative URL?
A relative URL specifies the location of a resource relative to the current page’s URL, rather than providing a full address. It omits the protocol (http:// or https://) and the domain name, focusing instead on the path relative to the page’s current location.
For example, if you are on the page:
and it contains the following link:
<a href="best-practices">best practices</a>This relative URL will resolve to:
Understanding a Directory
Relative URLs can behave differently based on whether the current page URL ends with a trailing slash.
With a Trailing Slash:
For the URL:
The link:
<a href="best-practices">best practices</a>Points to:
Without a Trailing Slash:
For the URL:
The same link:
<a href="best-practices">best practices</a>Points to:
This difference occurs because URLs with trailing slashes are interpreted as directories, while those without are treated as files within the current directory.
You can also use ./ to signify the current directory:
<a href="./best-practices">best practices</a>This also points to:
Root-Relative Path
A root-relative URL begins with a leading slash, which means it is relative to the root of the domain:
<a href="/best-practices">best practices</a>This points to:
One Level Up
To link to a directory one level up from the current one, use the ../ prefix:
<a href="../best-practices">best practices</a>For the URL:
This link points to:
Relative vs Absolute URLs for SEO
In terms of SEO, both relative and absolute URLs are generally treated equally. However, it is advisable to use absolute URLs in rel="canonical" and hreflang tags to prevent potential errors and ensure consistency across various contexts.
- Relative URLs: Useful for internal linking within a website, especially for frequent updates or when working in different environments.
- Absolute URLs: Preferred for canonical and hreflang tags to avoid confusion and ensure clarity regarding the resource’s location.
