{"id":566,"date":"2010-06-15T12:55:08","date_gmt":"2010-06-15T11:55:08","guid":{"rendered":"http:\/\/www.free-web-submission.com\/blog\/?p=566"},"modified":"2010-06-21T23:11:15","modified_gmt":"2010-06-21T22:11:15","slug":"how-to-create-a-custom-404-error-page","status":"publish","type":"post","link":"https:\/\/free-web-submission.co.uk\/blog\/how-to-create-a-custom-404-error-page\/","title":{"rendered":"How To Create A Custom 404 Error Page"},"content":{"rendered":"<p>Hi,<\/p>\n<p>In this article I&#8217;m going to show you how to create a custom 404 page for your website.<\/p>\n<p>A custom 404 page is displayed when someone has mistyped or follows a dead link on your website, without a custom page your visitor will just get a generic server error like the one below.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-567\" title=\"server-not-found\" src=\"https:\/\/i0.wp.com\/www.free-web-submission.com\/blog\/wp-content\/uploads\/2010\/06\/server-not-found.jpg?resize=447%2C219\" alt=\"\" width=\"447\" height=\"219\" srcset=\"https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/server-not-found.jpg?w=447&amp;ssl=1 447w, https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/server-not-found.jpg?resize=300%2C146&amp;ssl=1 300w\" sizes=\"auto, (max-width: 447px) 100vw, 447px\" \/><\/p>\n<p><!--more--><\/p>\n<p>The reason for creating a custom 404 page is to ensure that your website visitors find what they were looking for and do not leave your site.<\/p>\n<p>It&#8217;s really easy to setup and will take less than 5 minutes.<\/p>\n<p>The first thing you need to do is create a .htaccess file if you don&#8217;t already have one,<br \/>\nif you do have one then edit existing file and add the text ErrorDocument 404 \/page-not-found.html on a new line.<\/p>\n<p>1) Open your default html editor<\/p>\n<p>2) On the file menu select new html file<\/p>\n<p>3) In the code of the document type<br \/>\nErrorDocument 404 \/page-not-found.html<\/p>\n<p>4) Save the file as .htaccess in the top of your website<\/p>\n<p>Note that the file does NOT have a file name just save as .htaccess<br \/>\nensure that the file is NOT saved with an extra extension such as .htaccess.html<\/p>\n<p><strong><span style=\"color: #ff0000;\">Important: <\/span><\/strong>Don&#8217;t overwrite your existing .htaccess file if you have one, if you already have this file just add the this line<\/p>\n<p>ErrorDocument 404 \/page-not-found.html<\/p>\n<p>at the bottom of the code and save.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-568\" title=\"save-as\" src=\"https:\/\/i0.wp.com\/www.free-web-submission.com\/blog\/wp-content\/uploads\/2010\/06\/save-as.jpg?resize=450%2C220\" alt=\"\" width=\"450\" height=\"220\" srcset=\"https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/save-as.jpg?w=450&amp;ssl=1 450w, https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/save-as.jpg?resize=300%2C146&amp;ssl=1 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Now to create the custom 404 error page.<\/p>\n<p>1) Within your default html editor create a new page or open your template page.<\/p>\n<p>2) In the main text area type something like &#8220;Sorry, the page your looking for cannot be found&#8221;<\/p>\n<p>3) In the main text area underneath your &#8220;Sorry&#8230;&#8221; heading include some navigation links to your websites main content, sitemap or site search feature.<\/p>\n<p>4) Save the file in the top of your website as page-not-found.html<\/p>\n<p>5) Upload the html page and .htaccess files to your website.<\/p>\n<p>6) Test to make sure it&#8217;s working type your domain name into your browsers address bar follow by a page or location that does not exist.<\/p>\n<p>http:\/\/www.yourdomain.com\/AnythingYouWantHere<\/p>\n<p>If all is working properly you should see the new custom 404 error page you just created.<\/p>\n<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-569\" title=\"page-not-found\" src=\"https:\/\/i0.wp.com\/www.free-web-submission.com\/blog\/wp-content\/uploads\/2010\/06\/page-not-found.jpg?resize=450%2C220\" alt=\"\" width=\"450\" height=\"220\" srcset=\"https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/page-not-found.jpg?w=450&amp;ssl=1 450w, https:\/\/i0.wp.com\/free-web-submission.co.uk\/blog\/wp-content\/uploads\/2010\/06\/page-not-found.jpg?resize=300%2C146&amp;ssl=1 300w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/p>\n<p>Extra tip: Include Google analytics on the custom page and check your stats every month to see what pages or dead links are leading people to the 404 page and then you can fix them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hi, In this article I&#8217;m going to show you how to create a custom 404 page for your website. A custom 404 page is displayed when someone has mistyped or follows a dead link on your website, without a custom page your visitor will just get a generic server error like the one below.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3,84],"tags":[205,207,204,989,208,206],"class_list":["post-566","post","type-post","status-publish","format-standard","hentry","category-how-to","category-search-engines","tag-404-error","tag-custom-page","tag-error-page","tag-how-to","tag-htaccess","tag-server-error"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/posts\/566","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":8,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":574,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/posts\/566\/revisions\/574"}],"wp:attachment":[{"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/free-web-submission.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}