Relative or absolute links: what breaks when a site moves to another domain or folder

Support & Account·· 8 views· 4 min read

The short answer: a link or an image can name its target in four ways: absolute (https://yourcompany.com/img/logo.png), protocol-relative (//yourcompany.com/img/logo.png), root-relative (/img/logo.png) and relative to the page (img/logo.png or ../img/logo.png). The browser completes the incomplete ones from the address of the page it is on, not from where the file sits on the server. Each form survives a different kind of move, which is why a site that worked perfectly breaks on some pages after changing domain, switching to https or moving into a folder.

The four forms, and what breaks each

Form Survives Breaks when
Absolute: https://yourcompany.com/img/logo.png Being copied outside the site: e-mails, social networks, other sites. The site changes domain (it keeps pointing to the old one) or folder. If written with http://, it causes mixed content after the switch to https.
Protocol-relative: //yourcompany.com/img/logo.png The switch from http to https. The site changes domain. Today, with everything on https, writing https:// is simpler.
Root-relative: /img/logo.png A domain change and the switch to https. The site moves into a folder (yourcompany.com/new/): it keeps looking at the root.
Relative to the page: img/logo.png, ../img/ A domain change, https, and the whole site moving into a folder. The page address changes depth. With friendly URLs, on /blog/my-post/ the browser looks for /blog/my-post/img/logo.png.

Finding and fixing the links that broke

1 See what the browser asked for: open the page, press F12, go to the Network tab and reload. Red lines with a 404 show the exact address the browser tried. Compare it with where the file really is.
2 Search for the old domain and the old folder in the theme code and the files. WordPress stores addresses in full in the database: replacing old addresses in the database and changing the WordPress site address.
3 In your templates, use a single rule: root-relative for internal resources, if the site lives at the root of the domain; or addresses built from a single configuration value (the base address), so a move is a one-line change.
4 Mind the CSS: a url(...) inside a stylesheet is relative to the CSS file, not to the page. Moving the CSS to another folder breaks background images and fonts; moving the page does not.
5 Look for a <base href="..."> tag in the page source (Ctrl+U). It changes the reference for every relative link; if it still holds the old domain, everything relative goes there.
6 Where absolute is mandatory: the canonical tag, the sharing image (og:image), the sitemap, newsletters, RSS feeds and links you give to other sites. There a relative link has no page to resolve against and does not work.
An old domain that still works hides the problem. Images and files loaded from the old address appear normally until the day that domain or the old hosting account is cancelled, and then everything breaks at once. In the Network tab, make sure no request goes to the old domain before you let it go: after moving a site.
When switching to https, absolute links written with http:// cause nearly all mixed content: mixed content after moving to HTTPS.

Moved the site to another domain or folder and some pages lost their images or link to the old place? Send us an address that fails and the site’s old address.

Open a support ticket

SEE ALSO

Mixed content after moving to HTTPS: the padlock that will not turn on

Replacing old addresses in a WordPress database without breaking it

Moving WordPress to a new domain without losing anything

After moving a site: the checklist for the first day

Subdomain or folder: where to put a blog, a shop or a test site

The parts of a web address: scheme, domain, port, path, query and fragment

RECOMMENDED PRODUCT

Register your .com domain

Secure your company name before someone else registers it. from £13.60/yr

Search a domain
Was this answer helpful? Your answer helps us improve this article.

Related Articles

Support & Account 1 772 How to contact MozOut We are reachable through several channels. Picking the right one first time saves you waiting - a technical request sent...
Support & Account 1 443 How to open a support ticket and see the history A support ticket is the most effective way to reach us. It is tied to your account, keeps the whole conversation in one...
Support & Account 1 658 How to unblock your IP address Our servers run a firewall that automatically blocks IP addresses with too many failed access attempts. It is necessary...
Support & Account 1 439 How to change your registration e-mail The e-mail on your account is how you receive invoices, tickets and login links. Keep it up to date - it is your main li...
Support & Account 2 663 How to change your My MozOut password Changing your My MozOut password takes less than a minute and interrupts none of your services. Before you start: this i...
Support & Account 1 795 How to manage sub-accounts If more than one person in your company needs access to My MozOut - finance, support, a developer - you don't have to sh...