HTML tags and their attributes for SEO optimization

We will send the material to you by email:


    Время чтения: 17 мин.

    As a rule, the process of optimizing any site begins with working with its code. In this regard, any SEO specialist should be able to correctly handle the attributes and tags of the HTML language. For the correct use of many elements, elementary concepts are needed, which are often lacking for novice optimizers.

    The main components of the HTML language

    html-tegi

    The main blocks of the hypertext markup language are precisely the tags and attributes, with the help of which the structure of the web document is built in sequence. In the process of interpreting the markup language, it becomes “clear” to the browser how the page should look, and in what sequence all its main elements will be displayed – images, text blocks, video content.

    HTML tags are a kind of skeleton page, and to extend their action, various attributes are applied. These elements are described inside each opening tag in the following form: “name=”value””. The most common example of an attribute tag is: <meta name=”description”>.

    There are two types of tags – single and paired. In the case of a single tag, only the opening tag is present in the description, for example, <img>. Container tags (paired) include opening and closing parts – <…>…</…>, for example, <title>text part</title>.

    Most often, any HTML document includes the following blocks:

    • <html> is a tag that marks the boundaries of a document and includes the <head> and <body> elements.
    • <head> is a container containing important information for search engines and browsers. The content of this tag is not displayed directly on the web page, except for the <title> tag, which sets the title of the browser tab.
    • <body> – identifies the visible part of the document that is displayed to the user in the browser window. This can be text or graphic content of the page, the result of scripts and other data.

    The importance of meta tags

    For any SEO professional, the most important tags are the set of data contained in the <head> block. Therefore, each of them is worth considering in more detail.

    <title> tag

    In search promotion, this tag is responsible for the name of the web document. It is this tag that the user sees in the snippets of the search results, this tag is placed in the links in the bookmarks and represents the page title. Competent filling of the <title> tag allows search robots to evaluate what the promoted page is talking about. Therefore, the correct presentation of this block largely determines the position of the current page in the search ranking.

    In the <head> block, you can also find tags like <meta>, placed for search engines and browsers. With the help of competent filling of these tags, the optimizer will be able to improve the position of the site, making the snippets more attractive to robots and interesting to users. Correct filling and placement of tags of this type will make it possible to correctly display the page content.

    Description meta tag

    It is a brief description of what the user will be able to find on the web page. The content of the description tag does not directly affect the ranking in the SERP. But having come up with an interesting and “catchy” meta tag that will answer the user’s search query, it is possible to attract the maximum target audience to the page.

    Search engines take the contents of the description meta tag to form a snippet displayed on the SERP page. This small piece of text is a kind of “visiting card” of the site.

    Robots meta tag

    These are the rules for indexing certain pages of the site by robots, and the correct filling of this meta tag makes it possible to correctly follow the hyperlinks of the listed web pages.

    By specifying only one of the search robots in the “name” attribute, you can close the path for indexing the page to another. To do this, either the name of the main Yandex robot – “yandex”, or Google – “googlebot” is written in the attribute.

    The content attribute specifies many important data for following hyperlinks and indexing. For example, if the page in question is available for indexing, index is written, and to prevent robots from adding content to the search results, you can specify noindex.

    To open access to link indexing and correctly convey the entire link weight of a web page, the follow attribute is used. On the other hand, nofollow tells the robot that it is forbidden to follow links and pass link equity.

    The all attribute is a set of instructions similar to “index, follow”, the opposite value is “none”.

    Despite its importance, the robots meta tag does not have to be present in the website code. If the robot does not find it, this will mean that you can follow all the links indicated on the page, and you can completely index its content.

    Meta tag with “charset” attribute

    This attribute demonstrates the encoding type of the document and allows the browser to properly display the text content on the page. The meta tag must be placed at the very beginning of the <head> block, before the <title> and the beginning of all elements containing text.

    The Windows operating system that uses Cyrillic uses the attribute values “utf-8” or “windows-1251”.

    Despite the fact that most modern browsers recognize the encoding automatically, it is recommended to write a short string indicating the correct encoding in order to correctly display the page in order to avoid the possibility of problems when displaying text content.

    “viewport” meta tag

    This meta tag contains important information for the browser about the size of the page. In particular, what scale should be chosen so that the page is displayed correctly on a particular device, depending on the width of its screen. With the help of this meta tag, the possibility of introducing adaptive page design is realized. In this case, the same code can be used for all devices, the display of which will be adjusted depending on the screen size.

    Optimizers should never underestimate the importance of this element. Indeed, in the absence of the “viewport” meta tag, the mobile browser will display the computer version of the page for the user. Which in most cases does not fit into the screen of portable gadgets. The mobile browser will try to adjust the borders to fit the existing window, but as a result, all text blocks and graphic elements will be located in a form that is inconvenient for the user.

    As for search robots, in the absence of an adaptive version of the page, they lower its place in the mobile results, considering it not intended for viewing on mobile devices.

    Keywords meta tag

    Previously, the content of this block, which includes keywords that describe the content of the page, had a strong influence on the position of the site in the search results. But due to the actions of most webmasters who tried to embed the maximum number of keywords in this tag, it has lost its importance for search engines. However, the presence and proper filling of this meta tag still has a certain impact on the behavior of Yandex and Google search bots. To optimize pages as much as possible, it is recommended to use a well-designed keywords meta tag: either do not fill this tag anywhere on the site pages at all, or write a unique set of keywords for each page.

    <link> tags

    By means of these tags placed in the <head> block, the connection of the page in question with other web documents is determined. The attributes for the <link> tag are: “canonical”, “next and prev”, “alternate”.

    Next and prev attributes

    If duplicate content appears on the site, this may be due to incorrect page pagination. To make web pages load faster and make it convenient for users to view their content, all content is divided into certain blocks, numbered pages.

    Previously, in order to prevent search engines from treating all pages with product descriptions as the same, the “link” tag was used along with the “next” and “prev” attributes. This data indicated that the indexed page was part of a series of pages, so it should be considered in conjunction with all other elements in the series.

    SEOs should be aware that Google hasn’t supported “next and prev” tags for several years now. The search engine treats pagination pages like any other page on the site. Yandex never considered this tag.

    Canonical attribute

    If the site contains pages with the same content or with content that changes slightly on many pages, this attribute indicates which page should be displayed in the search results. It is the page with the canonical attribute that will be indexed, all the link weight will be transferred to it, and it will appear in the search results.

    To point to a canonical page, place the “link” tag with the canonical attribute in the code, and its address will be specified in the “href” attribute. For example, <link rel=”canonical” href=”URL” />.

    The main purpose of this design is to make all duplicate pages available for viewing by users. And if the site contains a lot of duplicates that are necessary for one reason or another, this tag will allow you to correctly transfer the link weight and present the desired page in the search.

    Alternate attribute

    It indicates the presence of different language versions of the page in the case of a multilingual site, or the presence of mobile versions of the site. Search engines read this attribute and automatically display the most appropriate versions of the page in the search results for different users.

    Optimizers should remember that the data about the presence of a particular version must be contained in the code of each page. There are also links to all other versions.

    In order for search engines to be notified about the presence of a mobile version of the site, the “media” attribute is specified. Typically, the desktop version is hosted at www.example.com, and the mobile version is hosted at m.example.com.

    Content optimization work

    Inside the container <body> tag is placed content that the user can see. There are also certain requirements for its placement – first of all, structuredness. And this is important not only for search engines, which favor lists and subheadings, but also for ordinary users, who more easily perceive large amounts of information in metered portions. This improves the behavioral factors of the target audience and allows you to quickly find the information or product you need.

    <div>, <span>, <table> tags

    The <div>…</div> tags are used to create the initial page structure. This block element allows you to control certain blocks placed in the document. These blocks, in turn, can contain both textual information and images, links, etc. The main feature of a block element enclosed in <div> tags is that they start on a new line and are placed within the entire area in which they are located.

    Just like the <div> tags, the double <span> tags style the desired elements on the page. The main difference from the previous tag is that <span> is an inline element for placing content in a horizontal direction, while <div> displays pieces of content placed vertically.

    To set a particular style of a certain part of the document, you can use 2 methods – connect external style sheets using the <link> tag or using the “style” attribute used in the body of the HTML code.

    In the first case, a piece of text that should be specially highlighted is associated with the selected style through the “class” or “id” attributes. When using the “style” attribute, you will need to specify CSS rules. The second method is used to a limited extent, because adding an attribute to tags in bulk greatly increases the amount of code. Accordingly, page loading time also increases, which negatively affects behavioral factors.

    To create tables on web pages, use the <table> tag, which is a container for the data contained in table cells.

    Despite the fact that the considered tags are not directly related to optimization, their proper use reduces the number of errors in the markup and increases the level of compliance of the code structure with accepted standards. If you do not pay enough attention to the development of layout, this can lead to errors when loading pages and misperception of their content by search engines. In turn, the negative impression of search robots about a particular web page can lead to a significant decrease in the position of the site in the search.

    Use of headings H1-H6

    There are many ways to correctly present content on the page, as well as facilitate its perception by users. One of them is the division of text into blocks using headings, denoted by tags H1-H6. The most important element is the main heading of the H1 page.

    It is this tag that tells search robots, and then users, about the content of a particular page. In addition, by looking at the headings, the user can immediately determine the general structure of the article and understand what information he can get. Or decide not to watch. When distributing subheadings on a page, it is important to observe their hierarchy – after the subheading H2, there should be a subheading H3, etc.

    The double <p>…</p> tag is used to separate any text into paragraphs. When marking up, you should pay special attention to the first paragraph, which search robots can also take into the snippet. Therefore, in the first lines of any article, it is important to place motivating and useful information for the user, in which keywords should be organically inserted.

    Applying Lists

    All search engines respond well to bulleted or numbered lists found in text on a page. The use of these elements makes it possible to present information in a structured way to the user, without unnecessary words and water.

    When placing lists, tags are used:

    • <li>…</li> – define list items in bulleted and numbered lists.
    • <ol>…</ol> – show borders of numbered lists;
    • <ul>…</ul> – form a bulleted list.

    Accent tags

    If it is necessary to show particularly important fragments in the text, the logical markup tags <strong>…</strong> and <em>…</em> are used to highlight them. With their help, the standard text style is changed to bold or italic, respectively. This way you can show the user what to pay special attention to.

    To get the same effect, you can use the paired physical markup tags <b>…</b> – change the font style to bold, and <i>…</i> – change it to italic.

    But you should not be too zealous in highlighting text either – with an overabundance of bold and italic text on the page, it will be inconvenient for users to read it, and search robots may even perceive these pieces of content as spam.

    Representing links in markup

    The <a> tag is used to highlight a link on a page. To do this, in the “href” attribute, the address of the page to which the transition occurs is recorded. Between the <a>…</a> tags is a piece of text – a word or phrase that, when clicked, will redirect to another web page.

    According to the regularly published recommendations of search engines, the text of the link should
    be clearly visible to the user and stand out from the rest of the text. In a situation where the webmaster cannot be responsible for the quality of the pages to which the link points, they can be closed from search robots with the “rel=”nofollow”” attribute. When crawling the page, the search robot looks at this element and understands that you should not follow this link and pass the link weight to the designated page.

    To prevent robots from indexing a certain piece of text or a link, the <noindex>…</noindex> tag is also used. But its main limitation is that it works only for the Yandex search engine and is not perceived by the Google robot.

    <img> tags

    If an image needs to be added to an HTML document, the <img> tag is used. Its required attribute is “src=”URL”” which specifies the name and location of the image file. The picture can also be presented as a link to another file. To indicate this point, the <img> tag is wrapped in an <a> container.

    When optimizing the content of any site, an SEO specialist should pay attention to image attributes such as “alt” and “title”. The “title” attribute is an additional hint for the user, which becomes noticeable when hovering over the image. Despite the fact that this tag is not the main tag for search engines, it is recommended to add a keyword to the text used as a hint.

    The “alt” attribute is responsible for the alternative description of images. The user can see it if the image does not load for any reason. The content of this tag also helps search robots identify the image, so it is recommended to fill it correctly. When searching for images, the search engine will focus on the text in this tag.

    Other important attributes for images include “width” (width) or “height” (height). To prevent distortion of proportions, the webmaster only needs to set one of these parameters, and the second browser will automatically adjust based on the information available.

    To minimize the loading time of images, it is recommended to set their actual sizes, reducing them in the most convenient graphic editor. After all, the smaller the image size, the faster the page will load.

    <script> tag

    To include scripts in an HTML document, use the <script>…</script> tag. There are two ways to add code to a page – by placing the necessary code in the <script> tag or by including an external file with the code. In the latter case, the tag specifies the path to the script file.

    The most preferred methods include placing the scripts in a separate file, which allows you to use the same functions on different pages. This approach speeds up the loading of the necessary functions, because. The external file is cached by the browser the first time it is loaded. And for all subsequent requests, the browser just needs to refer to its cache.

    Other ways to speed up page loading include the use of the “defer” and “async” attributes, also related to the <script> tag. Web browsers load pages gradually, and when they find a script, they first execute it, and then continue further loading of the HTML code. To reduce the load timeout, the “async” or “defer” attributes are applied. With their help, asynchronous loading of scripts occurs when the browser continues to process the placed HTML code and execute the script in parallel.

    The “async” attribute is recommended for controlling scripts that do not affect the rendering of other elements on the page being viewed. For example, code snippets needed to collect analytical information.

    If the user’s browser does not support working with scripts, or their support is disabled on purpose, the <noscript> tag is used. In this case, the text enclosed in this tag will be displayed.

    The webmaster and optimizer should understand that all elements of the HTML code are important in their own way. Each attribute and tag performs its own function, the failure of which can lead to a deterioration in behavioral factors or a decrease in ranking positions. In any case, the main recommendation when creating content is to prepare texts and other useful information for people, and not for search robots.

    Conclusions

    • Attributes and tags are the basic elements of the HTML language. And only understanding the functions of hypertext markup will allow you to correctly optimize the site.
    • For an SEO specialist, the most significant area of work is the optimization of the tags enclosed in the <head> block. Information from this block is especially important for search engines and browsers. Tag containers contain data that helps robots correctly interpret the page and understand what it is about.
    • But no less important is the optimization of attributes and tags from the <body> block, because this is the content intended for users. By creating structured text with a minimum amount of non-functional code, you can minimize the chance of your site not displaying correctly in the browser.
    5/5 - (1 vote)