Absolute and Relative URLs

In the competitive world of SEO, proper URL configuration can make a big difference in how search engines interpret and index your content.

All meaningful websites are linked to one another, whether to guide the user through the href attribute (using the a or link tag, for direct user links or to load CSS) or through the “src” attribute (either for JavaScript files or for embedding images). On a website, we always link to other URLs.

It's important to clearly understand what the syntax of a URL is, but once that it is understood, there are different ways to define the same path. Here is a summary I previously made of what I go into in more detail in this article.

That’s why we will explore in depth the differences between absolute and relative URLs, their importance in search engine optimization, and some practical and advanced examples of relative URLs that can significantly influence the structure and navigation of your website.

What is an Absolute URL?

An absolute URL is one that contains all the information necessary to locate a specific resource on the web, including the protocol (such as HTTP or HTTPS), the domain, and the full file path. For example:

https://www.example.com/folder/page.html


Absolute URLs are crucial for certain SEO meta tags, such as canonical tags and Open Graph (og:) tags. These tags help search engines and social platforms understand which is the main version of a page and how it should be displayed in previews. In these cases, it is essential that they are defined using absolute URLs, because otherwise these tools may not correctly interpret the address.

Examples of Absolute URLs for SEO

Canonical meta tags: They indicate to search engines which is the preferred version (as a tip, the canonical version) of a page when multiple versions with similar content exist. Without an absolute URL, search engines might ignore the tag or misinterpret the relationship between pages.

<link rel="canonical" href="https://www.example.com/main-page.html">

Open Graph (og:): These tags determine how a page is displayed when shared on social networks. Without absolute URLs, platforms may not generate the correct preview.

<meta property="og:url" content="https://www.www.example.com/main-page.html">

Sitemaps: As with meta tags, the URLs within a sitemap must be absolute so that search engines can correctly crawl and index your site’s pages.

What is a Relative URL?

A relative URL provides the path to a resource in relation to the current page’s location. It does not include the domain or the protocol, which makes it more flexible and easier to manage in development and deployment environments. There are several types of relative URLs, each with its own applications and SEO considerations.

Relative URLs can take different forms, and each one has a specific use depending on the site structure and navigation needs. Making sure to use the correct form can prevent common errors and improve site navigation efficiency. Below is a list of the most commonly used types of relative URLs:

• Without a leading slash: page.html
• With a leading slash: /folder/page.html
• With two dots and a slash: ../previous-page.html
• Going up multiple levels: ../../upper-page.html
• Without a specific path (dot only): .
• Go up one level and access a subdirectory: ../subfolder/page.html
• Path to the domain root (without specifying the root): /
• Go up several levels and navigate to a subdirectory: ../../../another-folder/page.html
• Combination of multiple paths (more complex): ../folder/../another-folder/page.html

Let’s take a closer and deeper look at the Types of Relative URLs and their use:

Without a leading slash:

<a href="page.html">Page</a>

Used when the resource is at the same level of the hierarchy as the current page. It is simple and straightforward, but links placed in fixed areas such as the footer or navbar can be affected, since pages may be at different levels and therefore not share the same path.

Examples of how it would work

If you have a link in a footer that appears on the homepage, the link will work correctly:

At the root of the website:

• Current page: https://www.example.com/index.html
• Link: <a href="page.html">Page</a>

However, if you navigate to a subfolder and the footer remains the same, the link may break because the relative URL no longer points to the correct resource from the new location:

In a subfolder:

• Current page: https://www.example.com/subfolder/index.html
• Link: <a href="page.html">Page</a>
• The browser will look for https://www.example.com/subpage/page.html instead of https://www.example.com/page.html.

With a leading slash:

<a href="/folder/page.html">Page in Folder</a>

This form of relative URL starts from the domain root, ensuring that the resource is searched for from the site’s root directory. It is more robust and avoids common errors, but it requires more planning.

With two dots and a slash:

<a href="../previous-page.html">Previous Page</a>

Examples of how it would work

• In a Subfolder:
  • Current page location: https://www.example.com/subfolder/current.html
  • Link: <a href="../previous-page.html">Previous Page</a>
  • Expected resource location: https://www.example.com/previous-page.html

  This link works correctly because it goes up one level from subfolder to the site root and then looks for previous-page.html.

• In a Second-Level Directory:
  • Current page location: https://www.example.com/section/subsection/current.html
  • Link: <a href="../previous-page.html">Previous Page</a>
  • Expected resource location: https://www.example.com/section/previous-page.html

  Here, the link goes up one level from subsection to section and then looks for previous-page.html.

Going up multiple levels:

<a href="../../upper-page.html">Upper Page</a>

This format indicates that two levels must be climbed in the folder hierarchy. It is powerful for sites with a deep folder structure, but it can complicate navigation if overused or used incorrectly.

Path to the domain root (without specifying the root):

<a href="/">Site Home</a>

This URL points to the domain root, which is useful for links that should always direct to the website’s homepage.

Go up one level and access a subdirectory:

<a href="../subfolder/page.html">Page in Subfolder</a>

This form is useful when you need to go up one level in the hierarchy and then go down into a subdirectory. It combines moving up a level with navigation to a specific subfolder.

Without a specific path (dot only):

<a href=".">Current Directory</a>

This URL refers to the current directory, and is useful for referencing the index page within the same folder. It can help avoid errors when referencing a directory’s main page.

Go up several levels and navigate to a subdirectory:

<a href="../../../another-folder/page.html">Page in Another Folder</a>

Used to navigate several levels up and then into a different subdirectory. This can be useful in more complex site structures.

Combination of multiple paths (more complex):

<a href="../folder/../another-folder/page.html">Page in Another Complex Folder</a>

This URL combines multiple upward and downward movements in the folder hierarchy, which can be useful in certain site configurations where navigating through multiple directory levels is required. In this case, it goes up one level (../), then down into a specific folder (folder), then goes up one level again, and finally enters another folder (another-folder). This structure can be confusing if not handled carefully and may lead to 404 errors if not configured correctly; however, it can allow for some very interesting bulk-handling scenarios, for example during a migration.

Examples of how it would work

Example 1: Complex Directory Navigation

1. Current page location: https://www.example.com/section/subsection/current.html
2. Link: <a href="../folder/../another-folder/page.html">Page in Another Complex Folder</a>
3. Navigation path:
   • First, it goes up one level from subsection to section (../).
   • Then, it goes down into the folder folder.
   • Next, it goes up one level again to the root of section (../).
   • Finally, it goes down into another-folder to look for page.html.

Resolved Path:
https://www.example.com/section/another-folder/page.html

This approach allows you to move precisely between directories without the need to specify absolute paths, which can be useful in large site structures or during content migrations.

Example 2: Bulk Content Migration

Imagine that you are migrating content from several different folders to a new directory structure and need to adjust internal links so they point correctly to the new location. The URL ../folder/../another-folder/page.html can facilitate this process:

1. Current page location before migration: https://www.example.com/old/subsection/file.html
2. Link before migration: <a href="../folder/../another-folder/page.html">Page in Another Complex Folder</a>
3. Migration process:
   • Go up one level to old.
   • Go down into folder, make the necessary adjustments, and then go back up to old.
   • Finally, access the new folder another-folder.

Resolved Path: https://www.example.com/old/another-folder/page.html


This method is efficient for updating links in bulk during a website migration without the need to manually change each link.

Example 3: Global Links in Reusable Elements

For common elements such as navigation bars or footers that are reused across different levels of a site, links with complex paths can cause issues if not handled carefully:

1. Current page location at a deep level: https://www.example.com/first-level/second-level/third-level/current.html
2. Footer link: <a href="../folder/../another-folder/page.html">Page in Another Complex Folder</a>
3. Potential issue: This link will attempt to move up and down levels from the current location, which may not match the site structure.

Potential Incorrect Path: https://www.example.com/first-level/second-level/another-folder/page.html


In these cases, it is preferable to use absolute paths or relative paths with only one level of depth to avoid navigation issues.

Relative URLs with Hash

Relative URLs can also include a hash (as you can see in the index of this very article) to direct users to a specific section within the same page or on a different page:

<a href="#section">Ir a Sección</a>

The hash (#) indicates that the browser should jump to a specific section identified by an id in the same document. This type of URL is useful for improving navigation on long pages or for creating direct links to specific content sections. It is important to ensure that hash identifiers are correctly defined in the target HTML to avoid broken links.

To redirect them, it must be done in a particular way, as they are special and do not work from the server side. Redirecting hashes must therefore be handled in a very specific way.