Set a relative path for stacks' images and stylesheets in 404 page?

Classic Stacks
1

Hello All,

I know I must be driving some of you nuts with my posts about SEO but I’m determined to get it right so I’ve been reading up as much as I can. And of course, when I get stuck, I turn to you guys. :slight_smile:

This week, it’s been the custom 404 page. I dunno about you but I’ve always thought that as long as you have a custom 404 set up and link to it in your .htaccess file, you’re set! Turns out, that if (like me!) you’ve used an absolute path to the 404 page in your .htaccess file, the server code returned is a 302 instead of a 404 and, apparently, this is bad for SEO!

So, I immediately changed the line in my .htaccess file to ErrorDocument 404 /404/index.html et voilà! I now get a 404 server response on any non existent page URL I enter. Great stuff!

Except, my 404 page looks all wonky. The images aren’t displayed and no CSS styles are applied to any of the content.

Take a look at this test project I set up to demonstrate my problem. Any 404 error directs generated by a click on the first button resolves to the correct 404 page, but it looks terrible. To see what the 404 page SHOULD look like, click the second button. See what I mean?

And THIS is my problem. Now, after doing some digging, it seems that the links to images and the stylesheets for stacks on the 404 page aren’t being correctly referenced when using a relative URL to the 404 page as they are when an absolute URL is used.

My thinking is that the relative paths used for stack content, style sheets and images need to start at a higher level than the individual stacks’s /index_files/ folder. Of course, I may be as confused as a goat on Astro Turf about any of this so please feel free to point out the stupidity of any of my assumptions.

@isaiah, is there a way to specify the proper relative paths for any images and CSS stylesheets for my custom 404 page? Or would I need to hand code that page to achieve this?

Cheers,
Beem

2

Maybe this will help…

2 Likes
3

Thanks @thang! I missed this somehow, will check it out now.

Cheers,
Beem

4

This was funny! I clicked the link and the actual @Doobox 404 page was displayed! :smile:

Gary, where can I find the blog post @thang Was referring to?

Beem

1 Like
5

Ironic eh :smile:

This is how it works.

Napkin 2 30-09-16, 9.36.50 am.jpeg1439×598 92.3 KB

Then add this to your htaccess file :

ErrorDocument 404 /404.html

6 Likes
6

That’s the word I was looking for. :slight_smile:

Thanks a million.

Beem

7

I believe in the original post from Gary at Doobox, he used javascript.

On the real 404 page>page inspector>CSS
Body{
Display:none;
}

On real 404 page inspector > javascript

    window.location = "https://yoursite/friendly404.page";

Then build the “friendly404” page normally in RW.

I did this on a few sites in RW6 and I thought the script was added to header. Now in RW7 they show up under the javascript tag, which seems to put them in the body of the DOM. Anyway it does work and the page ends up on the redirected 404 page.

8

Hm. I just tried it on my site and it works without any new pages etc:

On the htaccess I have:
ErrorDocument 404 /404.html

The page to display is:
https://webseiten-gestalter.de/404.html

And if you enter a non-existing url like:
http://webseiten-gestalter.de/bla

The error page looks good.

9

That only works on the root level of your site. Try a deeper non-existing page like http://webseiten-gestalter.de/abc/abc. The page will not have formatting.

10

I see :slight_smile: So I go with the solution from doobox…