How to Create Custom 404 Page in Weebly Site?

It is easy to manage a small Weebly site with fewer pages, products and blog posts. However, when your site grows larger in size the number of internal links will increase. This will result in the possibility of internal broken links and leads to 404 page not found error. Users clicking on the broken link will land on a tiny 404 page with no further information. This will affect your site’s credibility and users will not return back due to bad user experience. Though you can check and fix broken links, it is a good idea to create a custom 404 page with additional details for your site.

Problems with Broken Links

Other than internal linking, here are some of the reasons leading to broken links in your site:

• When you changed a page URL for any reason, search engines will still show your old cached URLs for long time in the search results. User clicks on that link will see a 404 page not found error since you already changed the URL of that page.
• Bookmarked and social shared URLs can not be changed.
• When a user wrongly types the URL in the browser’s address bar.

In all these situations Weebly will show a default 404 page which just shows the page not found error and provides a link to the home page of your site.

Why Do You Need Custom 404 Page for Weebly Site?

As mentioned, users landing on the above 404 page will get frustrated without any additional information. It is good to show the following additional details in your 404 page:

• List of important pages on your site, you can also include popular products to drive traffic to those pages.
• Add a search box so that users can search the entire site to find the interested content.
• Include contact details like form, email subscription and social links so that users can get in touch with you if needed.

How to Create Custom 404 Page for Weebly Site?

If you are looking to provide more details to the user rather than just a home page link, here is a step by step tutorial on how to create custom 404 Weebly page for your site instead of using Weebly’s standard 404 page.

Step 1 – Create a Page Named “404”

Login to your Weebly account and select the site that you want to edit from the dashboard list. Click on “Edit Site” button and go to Weebly site editor. Under “Pages” tab create a new page with the name “404” as shown in the picture below. We recommend you to select the “No Header” type as which is suitable for showing focused content like 404 page. However, you can also create custom header layout for your site or select “Header” option to show a page with header image.

Step 2 – Hide Your 404 Page from Search Engine

By default, all Weebly pages are available for search engine indexing which cold create problem if Google or Bing indexes your 404 page and show in search results. To avoid this, click on “SEO Settings” tab and scroll down to the bottom of the available settings. You will see a check box saying, “Hide this page from search engines”, and enable that box.

Step 3 – Hide Your 404 Page from Site Navigation Menu

As you see in the above screenshots, Weebly automatically adds the new 404 page in the site’s header navigation menu. It will not look professional if the users can see the 404 page in your site navigation. Under the page name, you can see an option showing “Hide in Navigation”. Select this check box to remove the 404 page from your header navigation menu.

Step 4 – Add Content to Your 404 Page

Now that you have created a custom 404 page for your Weebly site. The next step is to add whatever the details you want to provide to users in your 404 page. Go to “Build” tab and drag and drop required elements as in the case of adding content in a normal page. Learn more about creating your free Weebly Site, Blog and Forum to understand how to create different type of content with Weebly site builder. Let us add a news letter subscription box and some popular articles in our 404 page. It will look like below on the editor and make sure to add a title saying this is a 404 page.

Step 5 – The Final Testing

Publish your site and your custom 404 page is ready for your Weebly site. It will be displayed automatically when the user lands on an invalid URL. You can also test by entering an invalid URL, for example type “yoursitename.com/test404page.html” in the address bar and press enter. You will now see the custom 404 page as you have created instead of the default page.
The biggest advantage of this custom 404 page is, unlike Weebly’s standard 404 page this one will show your complete page including header and footer along with the content you added. This makes an opportunity to retain the user who can select any topics of his interest from the navigation, header and footer area of your 404 page.

Note: If you are using Weebly with any third-party hosting companies like Bluehost, SiteGround or HostGator, then you may need to delete the 404.php page on the server. Otherwise, you will still see the 404 page from hosting server instead of your custom Weebly page. You can also get the help from hosting company if needed to make sure your Weebly 404 page is shown to users.

Conclusion

Though custom 404 page is helpful, user may get confused as the page will look like a normal page. Therefore, make sure to add a big title saying it is a 404 page and the content shown are relevant information and not the actual article the user is looking for. Also, make sure to hide the page from search engines and in the navigation. We hope you have enjoyed this article and created custom 404 page for your Weebly site.