TinyPortal

Development => Resources => Topic started by: Mick on April 13, 2010, 01:55:10 PM

Title: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 01:55:10 PM
[Tip] Create a 404 Not Found Page

Your visitors may stumble into a 404 "Not found" page on your website for a variety of reasons:

    * A mistyped URL, or a copy-and-paste mistake
    * Broken or truncated links on web pages or in an email message
    * Moved or deleted content

Confronted by a 404 page, they may then attempt to manually correct the URL, click the back button, or even navigate away from your site.

This code will actually show your forum and let them know that your forum does exists and make them to at least try again.

-Create a HTML page and name "404 Not Found".
-Use frame style from theme.
-Uncheck everything except  "Display Title".
-Do not make it Sticky or Toggle to Front Page.

Add this code to the page....
Code: [Select]
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'http://www.yoursite.com'
</script> <script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>

-Replace yoursite.com with the actual URL of your forum.
-Activate and use the magnifying glass to preview.
-Grab the URL from your browser and copy.

Open your .htaccess file and add:
Code: [Select]
ErrorDocument 404 http://URL OF THE PAGE GOES HERE-Replace http:/URL OF THE PAGE GOES HERE with the URL of your 404 created page.

That's it.   Now go ahead and misspell a URL in your forum to see the newly "404 Not Found" Page.

Demo: http://www.chevyavalancheclub.com/index.php/page,426.html

If you want to get fancy, you can add a message....

This one is my actual code,..... feel free to save the image if you like.  I only ask not to hot link it.  Save it to your own server.

Get cool icons here: http://icons.mysitemyway.com/

Replace the image with your own path and re-write message.
Code: [Select]
<table cellspacing="1" cellpadding="1" border="0" align="" width="100%" summary="">
    <tbody>
        <tr>
            <td style="text-align: center;"><img src="http://yourimage.png" alt="Page Not Found" /></td>
            <td style="text-align: center;"> <br />
            <font size="3"><span style="color: rgb(255, 0, 0); font-weight: bold;">Wow you found it!! </span></font><br /><br />
            I've been looking for this page since i created it in 2006. <br />
            Sadly, even though you found this page, I seem to have <br />
            also misplaced the page you were looking for.<br />
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'http://www.yoursite.com'
</script> <script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script></td>
        </tr>
    </tbody>
</table>
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Freddy on April 13, 2010, 02:02:31 PM
Excellent tip BD  O0

I had been thinking about custom error pages lately, now I know how :)
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Chair on April 13, 2010, 02:03:54 PM
LOL very nice bluedevil :P
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 02:10:41 PM
Thanx  ;)   Very easy to do, fast, accurate and at least it will keep guests in your site.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: WillyP on April 13, 2010, 02:16:41 PM
Great tip, thanks for sharing!
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 13, 2010, 02:55:03 PM
Great Tip Mick. O0 I've seen ways to do this before but yours is about the easiest I've seen.  Good Job.

ZarPrime
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 13, 2010, 03:07:45 PM
Good page Mick. :up:

Gonna have to use this one.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: william777 on April 13, 2010, 03:33:18 PM
Thanks BD. I have an existing one but your is better. I will use it.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 03:38:35 PM
Hey thanx guys,..... i've always used the google code but i wanted to add a fancy image and a message.

I thought i'd share ;)  Glad y'all found useful.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 13, 2010, 05:55:10 PM
Here's mine, it's very much like yours.  O0

http://www.ourfamilyforum.org/FamilyForum/index.php?page=208
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 06:16:54 PM
Here's mine, it's very much like yours.  O0

http://www.ourfamilyforum.org/FamilyForum/index.php?page=208

That's great Ken., looks good!
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 13, 2010, 06:21:58 PM
I can't stop adding to it... go back in a day or so and it will likely be three pages long.  :o
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 06:37:57 PM
I can't stop adding to it... go back in a day or so and it will likely be three pages long.  :o

lol..... i hear ya.

btw,  check the div's,.... the footer looks broken,.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 13, 2010, 07:24:30 PM
Umm... not seeing the problem, here's my code:

Code: [Select]
<table cellspacing="1" cellpadding="1" border="0" align="" width="100%" summary="">
    <tbody>
        <tr>
            <td style="text-align: center;"><img src="http://www.ourfamilyforum.org/FamilyForum/MGalleryItem.php?id=7" alt="Page Not Found" /></td>
            <td style="text-align: center;">
<p style="text-align: left"> <br />
            <font size="3"><span style="color: rgb(255, 0, 0); font-weight: bold;">Wow you found our 404 Error Page!!! </span></font><br /><br />

I've been looking for this page ever since i first created it way back in the spring of 2010!  <img src="http://www.ourfamilyforum.org/FamilyForum/Smileys/default/08.gif" alt="Big Grin" /><br />

Sadly, even though you found this page, I seem to have also misplaced the page you were looking for.<br /><br />

You may have stumbled into this 404 "Not found" page on Our FamilyForum for a variety of reasons:<br />

    * A mistyped URL, or a copy-and-paste mistake<br />
    * Broken or truncated links on web pages or in an email message<br />
    * Moved or deleted content<br /><br />
You can click on one of the buttons at the top of this page, or...<br />
Try this link, it should take you to our Home page: <a href="http://www.ourfamilyforum.org/FamilyForum/index.php">www.ourfamilyforum.org</a></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'http://www.ourfamilyforum.org'
</script> <script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script></td>
        </tr>
    </tbody>
</table>
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 13, 2010, 07:34:13 PM
Ken,

Well, you definitely have one too many closing td tags.  The second one from the bottom is probably the culprit ...
Code: [Select]
Try this link, it should take you to our Home page: <a href="http://www.ourfamilyforum.org/FamilyForum/index.php">www.ourfamilyforum.org</a></td>

ZP
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 08:00:05 PM
Ken, the footer from the 404 page looks different than the forum or front page.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 13, 2010, 08:13:12 PM
Removing the td tag didn't seem to change anything.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 13, 2010, 08:26:41 PM
Ken,

The actual code in the article works fine on my site ...
http://talesofthehavenexpanse.com/smf2test/index.php?page=15

I don't see anything like this on your site though.  I only see the header and the footer, nothing in between.

ZP
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 13, 2010, 08:36:59 PM
Ken,

The actual code in the article works fine on my site ...
http://talesofthehavenexpanse.com/smf2test/index.php?page=15

I don't see anything like this on your site though.  I only see the header and the footer, nothing in between.

ZP

It looks like it broke your footer too.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 13, 2010, 08:41:15 PM
Hmmm, yep, you're right, it sure do, don't it. :buck2: Definitely some bad code.  I'll take a look at it here a little later if you guys don't figure it out.

ZP
Title: Re: [Tip] Create a 404 Not Found Page
Post by: CustomChargersCarClub on April 19, 2010, 08:59:34 PM
Umm... not seeing the problem, here's my code:

Code: [Select]
<table cellspacing="1" cellpadding="1" border="0" align="" width="100%" summary="">
    <tbody>
        <tr>
            <td style="text-align: center;"><img src="http://www.ourfamilyforum.org/FamilyForum/MGalleryItem.php?id=7" alt="Page Not Found" /></td>
            <td style="text-align: center;">
<p style="text-align: left"> <br />
            <font size="3"><span style="color: rgb(255, 0, 0); font-weight: bold;">Wow you found our 404 Error Page!!! </span></font><br /><br />

I've been looking for this page ever since i first created it way back in the spring of 2010!  <img src="http://www.ourfamilyforum.org/FamilyForum/Smileys/default/08.gif" alt="Big Grin" /><br />

Sadly, even though you found this page, I seem to have also misplaced the page you were looking for.<br /><br />

You may have stumbled into this 404 "Not found" page on Our FamilyForum for a variety of reasons:<br />

    * A mistyped URL, or a copy-and-paste mistake<br />
    * Broken or truncated links on web pages or in an email message<br />
    * Moved or deleted content<br /><br />
You can click on one of the buttons at the top of this page, or...<br />
Try this link, it should take you to our Home page: <a href="http://www.ourfamilyforum.org/FamilyForum/index.php">www.ourfamilyforum.org</a></td>
        </tr>
    </tbody>
</table>
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'http://www.ourfamilyforum.org'
</script>
           </td>
        </tr>
    </tbody>
</table>

Replace all that with the following:

Code: [Select]
<script type="text/javascript" src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'en';
  var GOOG_FIXURL_SITE = 'http://www.ourfamilyforum.org'
</script>
<table cellspacing="1" cellpadding="1" border="0" align="" width="100%" summary="">
    <tbody>
        <tr>
            <td style="text-align: center;"><img src="http://www.ourfamilyforum.org/FamilyForum/MGalleryItem.php?id=7" alt="Page Not Found" /></td>
            <td style="text-align: center;">
         <p style="text-align: left"> <br />
            <font size="3"><span style="color: rgb(255, 0, 0); font-weight: bold;">Wow you found our 404 Error Page!!! </span></font><br /><br />

I've been looking for this page ever since i first created it way back in the spring of 2010!  <img src="http://www.ourfamilyforum.org/FamilyForum/Smileys/default/08.gif" alt="Big Grin" /><br />

Sadly, even though you found this page, I seem to have also misplaced the page you were looking for.<br /><br />

You may have stumbled into this 404 "Not found" page on Our FamilyForum for a variety of reasons:<br />

    * A mistyped URL, or a copy-and-paste mistake<br />
    * Broken or truncated links on web pages or in an email message<br />
    * Moved or deleted content<br /><br />
You can click on one of the buttons at the top of this page, or...<br />
Try this link, it should take you to our Home page: <a href="http://www.ourfamilyforum.org/FamilyForum/index.php">www.ourfamilyforum.org</a></td>
        </tr>
    </tbody>
</table>

You closed the table twice incidentally closing your wrapper table which gave the messed up footer..

Plus on a side note, you should have all script stuff at the highest point on the page if possible..
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 19, 2010, 09:12:25 PM
Good fix Hoodie, thanks. :up:
http://www.ourfamilyforum.org/FamilyForum/index.php?page=208

It dose create something of an issue with the layout however... Not really a huge deal, but the search function needs to be below button and the text for it to 'look' right.
 
Title: Re: [Tip] Create a 404 Not Found Page
Post by: CustomChargersCarClub on April 19, 2010, 09:32:21 PM
Looks like it has something to do with the linktree..  Not sure but if you go to another one of your pages, it shows OurFamilyForum in the linktree and looks fine..  make sure the linktree is active for the page..
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 20, 2010, 06:07:35 AM
Not sure if I follow Hoodie, in looking at the screen shot below everything appears correctly placed... it's just that the "Other things to try:" search function is directly above the orange 'stop' button, but needs to be below the button so that the content fits together correctly.

The normal link-tree is turned off in this TP article, so that's why you don't see one at the top and the set of links seen at the bottom are actually a TP block with links.   

As mentioned before, it's not a real big deal... the text can be altered to account for the placement, but imho the 'Other things to try' would look better below the button.  :)

(https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fi42.tinypic.com%2F2je6z43.png&hash=44e42a4499b4edbe22711670696aa73a)
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 20, 2010, 06:45:15 AM
Ken,

I don't know if you are having trouble with this or not but when I go to any page on your site that should be a 404, including the link you gave a couple of posts up, I don't see what you are seeing (image attached).  Could this be because I am logged into your site when I look?

ZP
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 20, 2010, 07:46:30 AM
Checking on it now ZP... not finding anything wrong with it so far, but trying it on a different computer gives the same result that you are seeing.

EDIT: The category permissions were off.  :o
Fixed now, thanks for the catch ZP.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: ZarPrime on April 20, 2010, 07:54:01 AM
Much better now Ken. O0

ZP
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Mick on April 20, 2010, 07:56:51 AM
Ken,   the page doesnt have a title bar and it has a collapsible button too.

I dont know if its intended like that.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on April 20, 2010, 08:16:02 AM
Ken,   the page doesnt have a title bar and it has a collapsible button too.

I dont know if its intended like that.

Been playing around with the various options BD, so at various times it may give a different look. Turned on the title bar just now, but it's not going to stay. The end result will likely have the least amount of 'extras' possible. :)
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Chair on May 11, 2010, 09:06:09 AM
um... i tried this and now all my subdirectories don't work. for example, www.website.com/blog/wordpress/index.php

shows the www.website.com homepage... and the errorhandler in the .htaccess isn't there anymore?
Title: Re: [Tip] Create a 404 Not Found Page
Post by: IchBin™ on May 11, 2010, 09:38:40 AM
Did you look at your server logs? Not much we can do on this end without looking at the stuff on your server and in your configuration. If you can't see anything, I'd ask your host.
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Crip on May 11, 2010, 10:28:59 AM
You can make those in your cPanel , or i can..
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on July 13, 2016, 04:59:04 PM
Update:
... it's always a good policy to check back on 'custom codes' like this one.
My custom 404 page stopped showing so while checking on why it turns out that at some point the .htaccess file was overwritten by an SMF update. Doing the code insertion resolved the issue, so it's all better now.
  O0
You can see my page HERE (http://www.ourfamilyforum.org/FamilyForum/index.php?page=208) if you wish.

While sorting out this issue I was reminded of the following tip that I picked up on back in 2014.
I posted on the Google 'Webmaster' support forums and was told that my code was wrong and should be as follows:

Quote
Hi Ken,

No, that's not correct. You should have this:

ErrorDocument 404 /FamilyForum/index.php?page=208

(You're mixing up a 301 redirect with the ErrorDocument directive.)

Also you must not include the full URL in an ErrorDocument directive or you won't get the all-important 404 status code: it will do a 302 redirect instead (which is what it does right now), which will screw your site up.

Modify as I've suggested and then check the HTTP headers to ensure it's sending a 404 code as well as serving up the 404 page:

Check the headers with one of these tools...
Live http headers (a Firefox browser addon_: https://addons.mozilla.org/en-US/firefox/addon/live-http-headers/
Rex Swain's http viewer: http://www.rexswain.com/httpview.html
Web sniffer: http://web-sniffer.net/


After making the change to my .htaccess file the error page call works as it should. (the support helper had me run a check to see how Google was reading the page call)
You can find the support topic at this link...
https://productforums.google.com/forum/#!msg/webmasters/8KmJGnTDl4s/bwj4E9U4d-gJ
Title: Re: [Tip] Create a 404 Not Found Page
Post by: Ken. on July 15, 2016, 10:48:48 AM
An interesting error is now (sometimes) popping up when logging in... when you click to log in the custom 404 error page displays. If you then click on any of the buttons in the top navigation bar the forum them behaves as expected.

Any thoughts?
We began a discussion about the issue HERE. (http://www.ourfamilyforum.org/FamilyForum/index.php?topic=2340.msg15400#msg15400)