How to make a 404 html page. Or go to any blog category
Good afternoon everyone, today's turn 404 page. A 404 page is a page that opens when a user navigates to a non-existent address (URL). I'm sure you've met her often. I’ll give you an example of a 404 page on my blog:
If you want to see “live” what this “magic page” looks like on , just type a non-existent blog address into your browser. For example, I entered a random set of numbers and letters:
You can also see on your blog what a 404 page looks like. If you are satisfied with it, leave it as such, if not, read on, together we will create/edit the “wrong address page”.
Creating and editing 404 pages
A 404 page is a must! It will allow you to retain visitors to your blog. Usually, those who see a standard 404 error page simply leave the blog (what else can they do if they see some strange inscription “Error 404. Page not found”).
Let's get started.
Ready 404 page.
Let me give you an example of the 404.php blog FanBar.ru. I added all the necessary comments to it to explain to you what code does what, to make the creation process easier for you. 404 error pages. You can view this page (just unzip the archive), but if you are too lazy to download, see the code below:
There may be several reasons:
I suggest you go:
- to Home Page
- Write to contacts
Basically, that's it. If you have any questions, write them in the comments. And don't forget tomorrow is Sunday, free. Everyone participate!
_____________________________
Next lesson: Lesson 56: display a retweet button on the blog.
Error 404. This page was not found.
There may be several reasons:
- Page moved or renamed
- The page no longer exists on this site.
- The URL is not correct.
I suggest you go:
- to Home Page
- Write to contacts
You can also use the search:
Or go to any blog category:
We've released a new book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.
Error 404 or Not Found is a server response code to a non-existent page on the site.
How it works?
The entire process takes place using the HTTP data transfer protocol. The client application generates and sends a request to the server. The server, in turn, processes this request and generates a response.
In our case, the response code is 404. The server response looks like this:
Causes of 404 errors
You definitely need a beautiful 404 page for your website to show it to the user when he:
- Follows an incorrect link that contains a syntax error or just a typo.
- Will take you to a page that does not currently exist. This means that the data may have been transferred or even deleted. It can also be assumed that this page (and therefore the link) did not exist at all.
In any case, the page notifies the user that the page he intended to view was not found.
How to make a 404 page?
First of all, you should understand how a 404 page is generated for a website. In fact, this is the same page as any other in your web project.
If you use some kind of CMS, then you need to know the file structure and the page that is displayed when processing a 404 error code. If your site is not powered by an engine, then the system file .htaccess, which is located in the root folder of your site, will save you. If it is missing, create it yourself.
How to make a 404 page? You just need to write the following instructions in this file:
ErrorDocument 404 //site/404.php
It's quite simple!
First of all, there must be a 404 page! A 404 error page should definitely be present on every website.
In small projects, you can reduce the likelihood of a 404 error using the Xenu's Link program. With its help, you can find all the broken links on the site and perform the following actions:
- if the page link has been changed, you need to change the link URL to a new one;
- if the page no longer exists, simply delete the link.
Unfortunately, Xenu does not protect you from users who may enter link text incorrectly and does not protect you from broken or irrelevant external links that enter the pages of your site.
404 page design
By default, the 404 error page is presented as a blank page with the inscription 404 Not Found; it is also possible that a redirect to the page of the hosting service whose services you use is possible.
For a significant proportion of World Wide Web users, it is not enough to provide the page in this form - they simply will not understand what happened, why the site suddenly disappeared and was sent back to work. This means only one thing - losing a client. But let's not give up and look at this situation from a different angle. How to design a 404 page and keep guests on the site?
Text for 404 page
- Say “No!” technical information!
- Most users are familiar with the term “404 error,” but there is no need to delve into the reasons for its occurrence and provide additional technical recommendations. Convey the essence of the error to the user.
- Provide useful content!
It is necessary to provide useful information in the current situation and push the user to take action that will help solve the problem.
This can be achieved in different ways:
- place the site menu. Do not forget about the link to the main page of the site
- post useful links - these can be links to popular or new content.
- Place a search bar on the site so that users find what they are looking for.
When designing a 404 page, it is important not to overdo it - you shouldn’t overload it with content.
404 page design
The visual design of the 404 page should not stand out from the overall design.
Make your 404 page the highlight of your site! Add creativity to your page with a touch of humor to attract and retain visitors.
There are many examples on the Internet of what an original and beautiful 404 page means. I was not lazy and found a few for you:
Why do you need a 404 error page, how to configure it correctly and make it as attractive as possible for the user? All these questions continue to be relevant for those who create their own, configure it themselves and improve it for their clients and users.
Setting up a WordPress 404 page has some nuances, which will be discussed in this article. So why waste valuable time and separately create an error page for your site?
What does a WordPress 404 page do?
Error 404 means that the server was currently unable to find the required page from the link specified by the user. There are several reasons for the absence of a page at the specified address. Either no one has ever created such a page, the link was clicked on, or it was deleted. In all cases, the system redirects the user to a specially prepared error page.
Example:
In order not to drive the user into a dead end after landing on an erroneous page, it is important to format it as clearly and correctly as possible. Otherwise, he will simply leave your site forever.
Stylized to match the general theme of the site, the page holds the user's attention and can recommend additional links that may be of interest to him.
How to Make a 404 WordPress Page
How to make a WordPress 404 page according to all the rules?
On the error page, which users leave less often than the default one:
- There should be no redirect. Even if the page the user needs is not there, search robots need to see this information. This way the erroneous page will not be indexed.
— As mentioned above, it is recommended to design the error page in accordance with the general theme of the site.
— Ask your readers, if they find links that make it impossible to get to the desired pages, to report them to you at the specified coordinates.
— On the error page, it is imperative to indicate links and information that may be of interest to the user. It is also recommended to place a search form to retain your customers.
— You shouldn’t include too many technical issues on the 404 page; it’s better to format and explain the situation to users in a simple and understandable form.
So, let's say you are already working in the WordPress admin area. To create an error page, go to your control panel Appearance - Editor.
Find the file in the right sidebar 404. php and click on it to edit.
Step 1.
The WordPress 404 not found page needs to be adapted for your Russian-speaking user. Therefore, you can replace all messages inside the code with your own. Try not to miss quotes and other elements present in the code or accidentally delete them.
Step 2.
We implement a search form.
To do this, you just need to insert the following code element into the page code:
By the way, you can also insert scripts from Google or Yandex onto the error page. With their help, the user will be able to make a request to the search engine directly from your 404 page.
Step 3.
If you want to allow users to go directly from the error page to sections of your site, insert the following additional lines into the main page code.
New site articles
Sectionssite
Archives
A creative image added to the error page along with fun text and designed site links makes the 404 interesting and makes users want to stay with you.
By the way, an error page can be created using special plugins. However, some experts believe that the easiest way is to add the necessary lines of code manually and not load your resource with third-party extensions.
- Give your users due attention on the error page, be polite and self-possessed;
- There is no need to overload this page with links;
- Try to be creative and humorous when creating an error page;
- Invite those who accidentally landed on the error page to try again to find the information they need and offer, for example, a link to your products to retain customers;
- However, try to ensure that as few links from your site as possible are broken or incorrect. Firstly, this will improve the quality of your website, and secondly, it will have a positive effect on search engine optimization and SEO.
Please note that some WordPress templates may not have a 404 page. However, it is still recommended to create one, since in case of an error and the CNC is activated, the WordPress system accesses the 404.php file. If it is missing, the user is taken back to the main page of the site, which can ultimately confuse him completely.
When creating an error page, don't be boring and your 404 may become a true online asset that everyone will want to emulate.
Why is it necessary to create your own 404 page?
The main and only reason is not to lose a visitor. Every user has probably experienced a situation where, when clicking on links on a website, the browser instead of the requested page showed its default error page. The error occurs as a result of an incorrectly entered request or the requested page was deleted by the webmaster himself. In this case, all visitors behave the same way - they close the page and leave your site.
Stop pouring water! Let's be specific!
We create two files - 404.html And .htaccess(this file has no name, but with the extension htaccess), which automatically redirects the visitor to 404.html, if an error occurs. For the redirection to work, you need to write one single line in this file:
ErrorDocument 404 http://www.site.ru/404.html
When both files are ready, upload them to the server at the root of the domain.
We have already created an empty file 404.html and now we will fill HTML code itself 404 page, actively using HTML5 And CSS3. I came up with my own way to make a simple and beautiful 404 page.
The first thing you need to do is select a large and high-quality picture or photo with a size of at least 1200x750 pixels. There are many sites with a free license from which you can download very high-quality photographs. I downloaded it for free from a popular site pixabay.com this is a funny image.
I want to place an image as a background on the entire browser window and write in the center of the browser - 404 page not found and put a link to the main page. Let's take a closer look at the most important points.
RGBA translucent effect
The selected image is too bright, you need to darken it slightly, then the text will be more readable. The translucent darkening effect can be achieved using RGBA, adding the following line of code in the block styles:
Background: rgba(0, 0, 0, 0.7);
The first three letters stand for red, green, blue and they are equal to zero (that is, we get the color black). And the last letter “a” represents the alpha channel, which is responsible for the translucency of the element. In our case, the number 0.7 indicates 70% darkening. The scale from complete transparency to complete opacity is between zero and one (0...1).
Positioning elements
For the correct layout of my example 404 pages, without understanding how the property works position, it'll be hard. Looking at the end result 404 pages, we need to understand the structure HTML document. Here we see three layers stacked on top of each other. bottom layer
– the picture itself, the middle one in the tag The middle layer will have absolute positioning because the position of the element (shading block) is set relative to the edges of the browser with zero padding. Position: absolute; The top text layer is positioned relative to the middle layer element. Position: relative; Having this ready-made code and changing only the image itself, you can create a lot of different “erroneous” pages.
If you are planning to create custom websites, then understanding all the intricacies of layout using HTML5 and CSS3 will help youPage code 404
Go to home page..