Mastering 404 Pages – Turn Lost Visitors into Engaged Users

Introduction (00:00:00)

• The goal is to understand how to turn lost visitors into engaged users by mastering 404 Pages (00:00:00)
• Mastering 404 Pages is considered a great tip for improving user engagement (00:00:02)
• The discussion will cover some creative aspects of mastering 404 Pages later on (00:00:05)
• The tip of the week will include exploring the creative side of 404 Pages as well as other relevant information (00:00:07)
• The presentation will be relatively short and to the point (00:00:09)
• The topic of mastering 404 Pages will be covered in a concise manner, with a focus on providing useful information (00:00:11)
• The duration of the presentation is expected to be brief, making it easy to follow and understand (00:00:14)

Understanding 404 Pages (00:00:16)

• A 404 error occurs when a user tries to visit a page on a website that does not exist, and a 404 page is presented to indicate that the requested page could not be found (00:00:18).
• The 404 page is triggered by broken links, mistyped URL, or old links that may have been taken offline, and it communicates with users when they are trying to view content that is missing or no longer on the website (00:00:46).
• The design of 404 pages can vary, but they are generally simple and light, and can be customized to improve the user experience and keep users on the website, exploring and clicking around instead of leaving (00:01:09).
• The goal of a 404 page is to inform users that the page they are looking for is not available, while also providing a way to keep them engaged and potentially find the information they are looking for on the website (00:01:30).
• Customizing the design of a 404 page can help to improve the user experience and reduce the likelihood of users leaving the website to find the information they are looking for elsewhere (00:01:21).

Importance of 301 Redirects (00:01:36)

• When migrating a website from one platform to another, it is essential to use 301 redirects to prevent 404 errors from affecting users and to maintain search engine rankings by preserving link equity (00:01:36).
• A 301 redirect allows one URL to be directed to another URL, so if a visitor tries to access a specific URL that no longer exists, the website will automatically redirect them to the new URL that has been set up (00:01:41).
• The use of 301 redirects helps to maintain search engine rankings by preserving link equity, which is crucial when migrating a website or building a new one, especially if existing content is already being indexed by Google and other search engines (00:01:52).
• Setting up a 301 redirect ensures that when a visitor goes to an old link, they will be redirected to the new relevant page, maintaining the link equity and improving the user experience and overall site navigation (00:02:00).
• The importance of 301 redirects lies in their ability to prevent 404 errors and maintain search engine rankings, making them essential for site migrations or content updates when a URL for a web page is being changed (00:02:20).
• The process of setting up a 301 redirect is similar to traffic control, where an old URL is redirected to a new updated URL, preventing visitors from hitting a 404 page and ensuring a smooth user experience (00:02:27).
• An example of using a 301 redirect is when a blog article’s URL is changed to improve ranking, and a 301 redirect is created from the old URL to the new updated URL, ensuring that visitors who try to access the old URL are redirected to the new one (00:02:37).
• Overall, 301 redirects play a crucial role in maintaining a website’s search engine rankings and user experience, especially during site migrations or content updates, and should be used to prevent 404 errors and preserve link equity (00:02:51).

Google Search Console: 404 Warnings (00:04:16)

• Google Search Console displays 404 warnings when it encounters broken URL on a website that have been indexed but no longer exist and haven’t been redirected, which can be addressed by creating 301 redirects to preserve link equity (00:04:28).
• Seeing 404 warnings in Google Search Console is purely informational and does not result in a penalty from Google, as it simply indicates that a URL on the website can no longer be found (00:04:52).
• These warnings provide an opportunity to set up 301 redirects, allowing websites to redirect users to alternative pages and preserve the link equity that has already been built up (00:05:16).
• In some cases, such as when a web page is created for a contest or promotion and then taken offline, it may not be necessary to set up a 301 redirect, and it is okay to let the page go to the 404 page (00:05:42).
• The 404 warnings in Google Search Console are not errors or penalties, but rather informational notifications that help website owners identify potential issues with links on their website (00:06:05).

Default BD 404 Error Page (00:06:10)

• The default 404 error page on Brilliant Director websites is displayed when a visitor tries to access a URL that does not have a corresponding page, showing a “404” code that most people are familiar with (00:06:16).
• This default page includes a message stating that the page does not exist, along with a link that allows the visitor to return to the homepage and continue navigating the website (00:06:28).
• The default 404 error page can be customized, and customizing it can be an exciting opportunity to incorporate design elements and thoughtful considerations to improve the user experience (00:06:45).
• Customizing the 404 page can help turn lost visitors into engaged users, and it is an important aspect of creating a positive and user-friendly website experience (00:06:57).

Why 404 Pages are Minimal (00:06:58)

• 404 pages are typically minimal in design to reduce user frustration and confusion, allowing them to understand that the page they are looking for does not exist and providing one or two links to keep them on the website (00:07:05).
• The primary purpose of 404 pages is to inform users that the page they are looking for does not exist and to encourage them to continue clicking around the website, which is achieved by having a laser-focused design (00:07:08).
• Minimizing content and images on 404 pages is crucial to ensure quick load times, as users do not want to wait for a page to load that does not provide the content they were hoping to find (00:07:29).
• Reducing bandwidth usage is another key consideration for 404 pages, as they do not serve any real benefit to users and should be kept simple to minimize the website’s bandwidth usage (00:07:45).
• The simple layout on 404 pages helps to direct users back to the primary content on the website or to other relevant content, minimizing distractions and encouraging users to stay on the website (00:08:00).
• The overall goal of 404 pages is to navigate users to other parts of the website, even if they landed on a page that does not exist, as they may still be looking for something from the company or website (00:08:14).
• Providing a simple and efficient 404 page experience is essential, as users who land on a non-existent page may still want something from the website, and it is crucial to guide them to other relevant content (00:08:34).

The Value of a Well-Designed 404 Page (00:08:43)

• The primary goal is to keep users engaged on the website instead of leaving it, as they visited the site for a specific reason and are likely looking for certain information, with the aim of transforming a potentially negative experience into a positive one (00:08:44).
• A well-designed 404 page should provide clear navigation options to encourage users to stay on the website and explore other web pages, which can help to keep them engaged and clicking around the site (00:09:01).
• A 404 page also presents an opportunity to showcase a brand’s personality, allowing for creativity and fun while maintaining minimalism and encouraging users to explore other content on the website (00:09:12).
• The design of a 404 page should balance creativity with minimalism, ensuring that users are encouraged to explore other parts of the website and view additional web pages, which can help to achieve the goal of keeping users engaged (00:09:27).

Inspiring 404 Page #1 (00:09:33)

• The example provided is from Red Bull, a huge brand, which maintains the 404 code at the top of their error page, and most people are familiar with what this code means (00:09:33).
• Red Bull’s 404 page has an embedded video that users can watch directly on the page, and below the video, there is a “Gimme More” button that presents visitors with additional content when clicked, keeping them on the website (00:09:45).
• The “Gimme More” button on Red Bull’s 404 page allows visitors to access more content, even if the link they tried to visit does not exist, and some 404 pages include additional navigation links at the top, such as a search bar, a link to the homepage, and other links (00:09:56).
• Some 404 pages, unlike Red Bull’s, only show text and images and do not include any other navigation links, which is a different approach to handling error pages (00:10:21).
• The design of 404 pages can vary, with some including embedded videos, navigation links, and buttons to engage users, while others may have a more minimalistic approach with just text and images (00:10:28).

Inspiring 404 Page #2 (00:10:31)

• The website’s main menu is still visible at the top of the 404 page, and the page includes a pop culture reference to the Matrix, with a message stating “oops looks like this page got lost in the Matrix” (00:10:32).
• The page presents the user with a choice between a red and blue button, labeled as pills, which presumably link to items in the online store and allow the user to go back to the homepage (00:10:35).
• A popup in the bottom left corner of the page offers visitors a discount, with the goal of keeping them on the website and encouraging them to make a purchase (00:10:40).
• The 404 page assumes that the visitor still wants something from the company, even if they are on the wrong page, and attempts to facilitate a sale by providing links to the online store and offering a discount (00:10:42).
• The page’s design and functionality are intended to keep visitors engaged and encourage them to explore the website further, even if they have landed on a page that does not exist (00:10:46).
• The website’s approach to its 404 page is to provide a positive and engaging experience, with the goal of converting lost visitors into engaged users and potential customers (00:10:48).

Inspiring 404 Page #3 (00:11:49)

• The third example of an inspiring 404 page is a law firm website that displays a humorous image with the message “error 404 you’ve been served” and provides options for users to find their destination using the menu or search function (00:11:51).
• The website’s 404 page still shows the header with main menu links, allowing visitors to navigate to other parts of the site, but the use of an open search field may not be the most effective approach as users may not know what to search for (00:11:54).
• The common thread among the three examples is their minimalistic design, which informs users that the link they visited does not exist and then attempts to maintain their interest and encourage them to continue exploring the website (00:12:25).
• The minimalistic approach of these 404 pages enables them to effectively communicate the error to users while also providing options to proceed, such as using the menu or other links, to keep visitors engaged (00:12:30).
• The examples demonstrate that a well-designed 404 page can help to retain visitors’ interest and allow them to continue their journey on the website, rather than leaving due to a broken link (00:12:38).

Where to Set Your 404 Page URL (00:12:48)

• To customize the 404 page on a website or create a new page and set it as the default 404 error page, this can be done through the Advanced settings (00:12:49).
• The Advanced setting for the 404 page can be found by searching for “404” in the search bar within the Advanced settings, which will display the option to select a default 404 error page (00:13:01).
• The default 404 error page setting allows selecting a page from a dropdown list to present to visitors when they attempt to access a non-existent URL on the site (00:13:09).

Designing a Custom 404 Page (00:13:20)

• A 404 page is a page that is displayed when a user tries to access a webpage that does not exist, and it can be customized to redirect users to a different page, such as the homepage, to keep their interest and provide them with resources to navigate the website (00:13:50).
• The default 404 page can be edited and customized using the Advanced settings, where users can search for “404” in the keyword filter and choose a different page to be displayed as the 404 page (00:13:38).
• To create a custom 404 page, users can go to the web page builder, create a new page, and add elements such as title text, images, and tables, and then save the page and set it as the 404 page (00:15:47).
• It is important to keep the 404 page simple and low in size to minimize bandwidth usage, as 404 pages are often frequented by bots and regular visitors (00:15:11).
• A custom 404 page can include links to other pages, such as the contact us form, membership plans, or blog, to provide users with options and keep them engaged (00:16:41).
• Simplicity is key when designing a 404 page, as users who arrive at this page may already be frustrated, and overwhelming them with too much information can be counterproductive (00:17:02).
• A 404 page is a page that visitors are directed to when they try to access a page that does not exist, and it should be designed to be friendly and inviting to prevent scaring them away, with the goal of encouraging them to continue exploring the site (00:17:12).
• The page options for a 404 page can be customized, such as hiding the header and footer to make the page lighter and put a stronger focus on the content, and developers can also use custom code to create a unique page (00:17:43).
• It is possible to add any content to a 404 page, including forms, widgets, and other elements, but it is generally recommended to keep the page simple and focused on providing useful information to the visitor (00:18:19).
• Redirecting visitors to the homepage may not always be the best option, as it can be confusing, and having a 404 page can be beneficial as it provides transparency and lets the visitor know that the content is not available, while also offering other useful information or content (00:18:41).
• When designing a 404 page, it is essential to put oneself in the shoes of the visitor and consider what they would expect or find useful, and not being afraid to have a little fun with the page and add creative elements, such as animated gifts or humorous images (00:19:09).
• The host suggests that having a 404 page can be beneficial, and it is an opportunity to provide a positive experience for the visitor, even if they did not find what they were looking for, and to encourage them to continue exploring the site (00:19:33).