Create Umbraco 404 Pages
We all know the importance of a beautifully designed website in attracting customers to your online business. But imagine if the customer while browsing through your website, gets redirected to an absurd error page due to a broken link or a page that’s been moved! Unless you have taken the time to put in place a sensible custom 404 error page, the customer will come across the default 404 page which looks something like this:
What do visitors do when they see this default 404 page? Well, they just abandon your website and look for something more interesting. And just like that, you lose one prospective client!
All because you didn’t think of creating a custom 404 page that gives you the opportunity to explain why they were redirected, what went wrong with the link and how they can get back on track.
Importance of Custom 404 Pages
The custom 404 page is like a safety line that pulls customers back to your website, which they were interested to explore when they first came in. Default 404 error pages are boring, and can be really a horrifying experience for a user who has no clue why the error popped up. A custom 404 error page on the other hand gives you a chance to explain to the customer why they are experiencing the error, and that they can “try again” to get back to the original screen. You get an opportunity to fix the problem, while keeping the customer engaged to return to your website.
A custom 404 page also provides links to the relevant sections of your website. Therefore, when search engines crawl through your website and come across a custom 404 error page, they continue to have access to your complete site. In this case, if you only had a default 404 error page with no links, the search engine spider wouldn’t know where to go next and your website pages will not show up on search results!
Hence, Custom 404 error pages are very important for customer engagement and play an important role in helping search engines show your web pages in a relevant search.
Here’s an example of a well-designed custom 404 page:
Creating Custom 404 Page in Umbraco
In Umbraco, you can easily create custom 404 pages for your sites, and create multiple 404 pages in case you have a multilingual website. The Umbraco Page Not Found Manager has a context menu for admins that has a new option called “404 page”, which will open a dialog box where you can select a 404 page for the current page and its children pages. It is a very versatile manager when compared to the standard Umbraco 404 error page setup, and can be used even if you have a single Umbraco instance running multiple sites.
Let’s see how you can create the Custom 404 Page in Umbraco for various scenarios:
In Umbraco, one can use the configuration file to set the custom 404 page.
(i) If your Umbraco instance contains only 1 website, then configure the Custom 404 page using below configuration in umbracoSettings.config file.
In the above configuration, value 1174 is the Umbraco Page Id of your custom 404 page. This value will be different in your case. You could see this value under properties tab of your 404 page as shown in screen shot below:
(ii) If you have an Umbraco instance with multilingual sites then you need a separate custom 404 page for each language. With the above configuration, you will see the same page for all language sites. Modify umbracoSettings.config file like shown below to have different custom 404 pages for each language:
1174 and 1220 are the Umbraco page Ids of custom 404 pages as mentioned above and these values will be different in your case. In the above configuration, culture=”en-US” and culture=”fr-FR” indicate the language culture of your website. You could set the culture for your website from Umbraco Back-office. To set culture to your website, right click on your website root node and select ‘Culture and Hostnames’ menu option. You will see a window like this:
In case of multilingual websites, if you have not added culture specific entry in umbracoSettings.config file or you have not added the culture entry, then the default culture 404 page will be served.
(iii) If you have an Umbraco instance with the same culture, then above settings will not work for you. You need to use uComponents Multi-Site Not Found handler. If you need technical assistance with this, please feel free to contact us.
In case after all the above-mentioned configurations, you still do not see your custom 404 page and continue to see the default error page, then you could check below configurations.
Add the below line in your web.config file belore ‘</system.webServer>’ (system.webServer closing tab)
<httpErrors existingResponse="PassThrough" />
If your IIS version is 7.5+, then search for ‘trySkipIisCustomErrors’ in your umbracoSettings.config file and set its value to ‘true’.
Here we have shown how to create custom 404 error page in Umbraco. In general, while designing a custom 404 error page, do avoid using the terms “404” or “error”. Give a short explanation to the visitor as to what happened in a creative way. And do give links to your home page and other important parts of your website to help the visitors go back to what they came to do on your website.
Shwetha Bhat | Blogger
Manjunath Govindappa | ASP.NET Technical Lead