Creating an HTML document

Published: - Central European Time (UTC+01:00). Author: .

HTML document vector image

Introduction

Creating the correct HTML document is an important step in SEO. Creating relevant content of metadata helps control your content entity visibility in the SERP. Creating a thoughtful hierarchical structure will help users navigate the content quickly to get to their goals. A clear content structure will also help in creating relevant structured data.

Metadata

Partially, metadata allows you to control some of the visual elements in the SERP for content, such as the icon, site name, link title, and snippet. Here I am only clarifying the possibility of optimizing the content of the title. Google has detailed guides for creating icons, meta descriptions, and site names, and you can find links for these guides in the Useful Links section located at the bottom.

Title

Google automatically creates the title link, but the website creator has some control over their title link preferences. A good solution in creating a title is to indicate the subject of the content of the web page and brief important features or characteristics. In addition, the title content can be used in structured data for voice search markup. For Latin content, the title makes sense to set the subject of the content to the far left (the first word), because the bot will crawl from left to right. In the title content of the home page, it makes sense to communicate the subject of the content at the website level.

User experience design to main content

Headings

Create a webpage layout using HTML semantic elements, and create a hierarchical structure of page content using heading elements. Element H1 has the highest priority, so it makes sense to represent the subject of the content in the content of this element. The content of the H1 element must correspond to the content of the title in the metadata, but an exact match is not required. For subsection/paragraph headings, use lower-level H elements, but maintain a hierarchical sequence.

Displayed content area

Below the H1 element, it makes sense to set a short description of the page content. For the home page, it makes sense here to communicate the content concept and a subject at the website level. The subject and description of the page content are important signals that help users quickly understand whether they have reached the required content. This important content can be installed in the displayed content area, that is, in the part of the content that is visible to the user when opening the content, immediately after loading (direct loading stream) and above the fold.

Lists

When creating navigation lists, this is especially true for a list of articles or products with images and short descriptions, it is worth remembering that the cognitive perception of users has a limit of a maximum of 9 media objects, optimally 5 media objects. In addition, the user may be confused by a long list with a lot of media objects. There is a risk that the user will not be able to select one item in the list and go to the target content. The user can continue browsing the list until he gets tired and then leaves the website. It probably makes sense to create lists of categories and sub-categories to make it easier for users to navigate the site. In my humble opinion, content with infinite scrolling lists makes little sense.

Performance optimization

To improve the performance of your pages, you set the styles that are needed for functionality inside the head element. You can also minimize the scripts that you want to use for page functionality and install these scripts before the closed html element. This will reduce the browser's calls to external files, which in turn will improve performance.

Images

Each image slows down the loading of the browser. Therefore, it makes sense to use only one image for one content. Crop and compress the image you are using as much as possible. For responsive images, I recommend using the jpeg format and creating breakpoints at widths of 640, 768, 1020, 1366, 1600, and 1920. These breakpoints will cover major display sizes.

Footer

In the footer, clearly indicate the name of the publisher and a link to comprehensive content representing the publisher's organization. You can also mention the copyright holder of the content there.