What is a Relative Path?
A relative path is a shortened web address giving a file’s location within a site instead of spelling out the full URL. The browser fills in the missing pieces (the protocol and domain) from the page it’s on. For example, the root-relative path /images/logo.png reaches the same file from any page on the site.
More About Relative Paths
Every link on the web needs an address, but it doesn’t always need the whole address. Within your own site, a link can simply describe the route from here to there. The browser fills in the rest from the page it’s already on. That shorthand is the relative path, and it’s why a site can move to a new domain without rewriting every internal link.
Relative vs. Absolute Paths
The difference comes down to scope. An absolute path is the complete address (protocol, domain, and file location), like https://example.com/guides/seo.html, and it works from anywhere, which is why links to other websites are practically always absolute. A relative path leaves out the protocol and domain. It gives the location starting from the current page: from a page inside /guides/, the link seo.html reaches the same file. The browser builds the full address by combining the relative reference with the current page’s URL, then requests the result. The whole step is quick address math.
How to Write a Relative Path
Three patterns cover almost every case:
- Same folder:
photo.jpgsits next to the current page. - One folder down:
images/photo.jpgpoints into the images folder below it. - One folder up:
../photo.jpgsteps up one level, and each extra../climbs one more.
There’s also the root-relative path, which starts with a slash: /images/photo.jpg starts from the domain’s root, so it works the same from every page.
When to Use Relative vs. Absolute
For links within your own site, relative paths (especially root-relative ones) are convenient: they keep working when the site moves domain, runs on a staging copy, or is developed locally. Absolute URLs are the right tool anywhere a link leaves your page’s context. Canonical tags, hreflang annotations, sitemaps, feeds, and email all need the full address. A relative reference in those places either breaks or resolves against the wrong site. One legacy pattern to avoid is the protocol-relative link, which starts with two slashes (//example.com/…). It dates from the shift from HTTP to HTTPS and is now discouraged, so just write https:// in full.
Frequently Asked Questions
What does ../ mean in a path?
It means “go up one folder.” Each ../ climbs one level from the current page’s location, so ../../css/style.css climbs two levels, then descends into the css folder. When a page moves to a different folder depth, its ../ links need updating; that’s a common way relative links break.
What is a root-relative path?
A path that starts with a slash, like /blog/post/. The browser resolves it from the domain’s root rather than from the current page, so it points to the same place from anywhere on the site. It still omits the domain, so it stays portable across staging and domain moves.
Are relative paths bad for SEO?
Not for ordinary internal links: search engines resolve them exactly as browsers do. The places that call for absolute URLs are canonical tags, hreflang, and sitemaps, where guidelines expect the full address. Misresolved relative links can also generate endless duplicate URLs for crawlers, which is worth a check after redesigns.
Should internal links be relative or absolute?
Both work, and well-run sites use each. Absolute links can’t be misresolved and read unambiguously in feeds and scrapers; relative and root-relative links have the edge inside your own site, where they keep working across staging and domain moves. Whichever you pick, using it consistently matters more than the choice itself.
