Completely confused about linking relative to the root versus linking relative to the document

Question

I posed a question around 404 errors appearing on our website last year where i am seeing URLs now still coming out of Search Console appearing like this:

https://www.example.com/managed-hosting.html

or

https://www.example.com/services/services/managed-hosting.html

But where the actual URL is this:

https://www.example.com/services/managed-hosting.html

The answer as i'd understood it was to use 'root relative linking' and not 'document relative linking'. As the URLs in my HTML are relative, this suggested that somewhere in the site, possibly in the navigation, i have an error (i still do not understand where), and this is where the concept of root relative linking was suggested.

So instead of using a nav link that reads:

href="../../about/history.html"

i should use a nav link that reads:

href="/../../about/history.html"

But there seems to be a problem with this. Unless i'm mistaken, the additional forward slash at the beginning tells the browser that the link i've inserted is relative to the root directory.

this means that i can add a link to any page at any depth on the website that reads "href="/../../../../../directory/document.html" as long as the file path listed above is correct?

This seems to be leading to more 404 errors at this stage.

What this leaves me with is the question: should i still be using the standard file path indicator of "../" dependent on how deep the document i am linking from is located?

Basically, with SEO and 404 errors in mind, which of the following is the correct option to use when linking within HTML documents?

href="../../about/history.html" (without the leading slash)

or

href="/../../about/history.html" (with the leading slash)

In a nutshell - should i use root relative linking for all my links across the website? or document relative links? And should this extend to all image and document files as well?

I'll apologise (again) in advance if this sounds dim, and also if the explanation is less than clear. But it's driving me crazy at this point!

Answer 1

To convert a relative link to a root relative link you should add a slash to the beginning and take away the ../. So:

href="../../about/history.html"

should become:

href="/about/history.html"

When a relative URL starts with a slash, it is appended to your domain name. So /about/history.html is appended to http://example.com to become the absolute URL http://example.com/about/history.html No ../ is needed in a root relative URL because ../ means "go up a directory." There is no way to go up a directory from the root of the directory tree for your domain.

Your use of ../ in your root relative URLs may still work, albeit inelegantly. Going up a directory from the root should stay at the root. So http://example.com/../../about/history.html should be equivalent to http://example.com/about/history.html. Using that isn't standard practice and I wouldn't expect all browsers and crawlers to support it. Some user agents are likely to interpret it incorrectly.

Even after you correct all the links on your site, you may see errors in Google Search Console indefinitely. Google remembers all the URLs you have ever linked to, and may report errors for URLs that you used to link to. To fix the problems, you should redirect to the correct URL in the cases where it has been messed up in the past. To do so you should be able to put code like this into your .htaccess file (assuming you have a web host using Apache 2.4 and that these rules don't conflict with any rewrite rules):

Redirect permanent /managed-hosting.html /services/managed-hosting.html
Redirect permanent /services/services/ /services/

The second rule will handle all URLs that have the duplicated services/ at the start of the URL path.