We propose to consider critical errors in the code of the website page that affect the correct display of the page in the browser and the degree of its optimization.
What errors will we classify as critical:
- Is the site or page open for indexing
- Viewport availability
- h1 on page
- Page subheadings
- Check the validity of the page layout
Such errors make it impossible for search engines to index the page or greatly complicate it. Also, these errors can affect the display of your site in different browsers.
To begin with, we will analyze how to check for such errors on our own, and at the end I will give several recommendations on what tools to use for a complete analysis of the site and finding all the errors.
How to view the page layout code?
To view the page code, open any browser (in this case Google Chrome) and press the F12 key or Ctrl + Shift + I on the keyboard.
A small window will appear in which you can see the HTML code.
Let’s see what errors we can quickly find on the site ourselves.
1. Whether the site or page is open for indexing.
First, open the file YourDomain / robots.txt and see if the page of interest to us is closed from indexing. User-agent * indicates the robot for which the rules listed in robots.txt apply. But the Disallow directive prohibits indexing of sections or individual pages of the site. Suppose we are interested in the YourDomain / catalog / page, if in the robots.txt file we see a construction like Disallow: / catalog /, then it must be deleted in order to open access to search robots for indexing the page. (This kind of Disallow: / is also possible, this code should also be removed – it closes the entire site for search engines).
Next, open the page code (in the manner described above), press Ctrl + F, a search field will appear.
Insert the following code into it
and perform a search, if nothing is found, then everything is fine, if you see such a line
<meta name=“robots” content=“noindex,nofollow”> или <meta name=“robots” content=“noindex”>,
it must be removed or replaced with
<meta name=“robots” content=“index,follow”>
The element is intended to indicate the type of the current document. describes which version of HTML markup you are using in your document. It is very important that be specified in the code, otherwise your code will not be considered valid. Also, browsers will make their own assumptions about the version of the HTML code, and as a result, the page will not be displayed as you intended.
There are fewer and fewer users who have not heard about adaptability and would not know about its importance for the site.
A responsive site is a web development standard, one of the indicators of the quality of an Internet resource and an attentive attitude to the needs of users.
The adaptability of the site is to ensure the correct display of the site on various devices connected to the Internet and dynamically adjust to the given dimensions of the browser window. Layout adaptability is implemented in practice in different ways. It:
- Application of flexible, grid-based layout;
- Working with media queries (eng. Media queries);
- Bootstrap (front-end framework).
You don’t even have to go into the code to check the responsiveness of the site. It is enough to simply resize the browser window and observe the behavior of the elements on the site.
Window width 1024 px
Window width 768px
You can check how your site is displayed on mobile devices using the Google Mobile Friendly tool (Google Search Console).
Tool address – https://search.google.com/test/mobile-friendly
We just type the full URL into the string and get the results. Verification usually takes less than a minute.
4. The presence of a viewport
It is also necessary to check the presence of the meta tag by searching the code
<meta name="viewport" content="width=device-width, initial-scale=1">,
which is responsible for optimizing the site for mobile devices.
5.h1 on page
h1 – header tag. Its presence and content is critically important for improving the site’s position in search results. The h1 heading on the page:
- There should be one per page;
- Contain keywords.
A dismissive attitude to the importance and uniqueness of headings can cause problems in indexing, even up to the site falling under search engine filters. The h1 tag is one of the main components of SEO, as it provides the user with information about what the page he came to is about. Therefore, it is very important to add the main focus key to the h1 header so that the search engine and the user understand what this page is about.
6. Page subheadings
Subheadings are marked with special tags in the h2 … h6 code. The number corresponds to the importance of the title. Why is this necessary? Search engines do not see people with their eyes, for them additional headings show that this is the same page and it can also be shown for this keyword. The h2-h6 headers help to positively increase the search engine attention to this page for these queries.
How to check?
Open the page code, search by code and you type
- The title tag contains the logo of the page. It is especially common in a number of templates, including those from the most popular template services;
- Service elements of the page (“Basket”, “Authorization”, “Feedback form”, etc.) are laid out with subheadings;
- Subheadings don’t use keywords;
- Subheadings contain styles in the design that should be rendered in .css files .;
- Sample code with styles:
<h2 class="section-header" style="margin: 2rem 0 10rem; text-align: center;">Преимущества работы с нами</h2>
- Clean code example:
<h2 class="section-header">Преимущества работы с нами</h2>
<h2>Преимущества работы с нами</h2>
- These errors apply to the h1 header tag as well.
7. Check the validity of the page layout
To save time and find more errors, we use automatic services and tools.
Always use an online HTML / CSS validator to spot errors in your markup. Here are the links to the validation services:
- HTML Validator: https://validator.w3.org/
- CSS Validator: https://jigsaw.w3.org/css-validator/ (rarely used in practice, it is usually worth checking and fixing when other important tasks for seo and site improvement are done)
- SiteDozor site analysis: https://sitedozor.ru/
SiteDozor is a site analysis system, as well as site promotion and control. Several types of audits in the Sitedozor system will help to identify errors – both the site as a whole and individual pages. As a result, you will receive a multi-page report with errors and recommendations for their correction. Plus an excellent set of tools for quickly resolving individual issues: look at the site through the eyes of search engines, find out what “slows down” the page, measure the page speed, and so on – more than 50 tools.