HTML Tags Essential for SEO – How They Impact Ranking?
HTML tags are one of the fundamental aspects of SEO, which stands for Search Engine Optimization. HTML tags are not visible to the naked eye on a website, but they are crucial for achieving high rankings in Google search results. Ignoring or implementing these tags incorrectly can have a negative impact on the ranking process and, consequently, the visibility of the website in search results. So, what exactly are HTML tags, and which ones are most important for SEO?
HTML tags can be described as code snippets or parts of the HTML language syntax that contain information about the structure and appearance of a website. They can be used, for example, to highlight important text parts, describe graphics on the page, or give instructions to search engine bots. HTML tags can also influence how our website appears in search results. By optimizing them appropriately, we can achieve better positions in SERPs (Search Engine Result Pages) and attract more traffic.
HTML tags consist of angle brackets: "<...>", between which the name of the tag is placed. We distinguish single tags and double tags, which consist of an opening and closing tag. The difference between them is shown in the graphic below.
Headers on a web page
Some may argue that search engines have become too intelligent for HTML tags and can interpret content without using them. But is that really the case? Not entirely. While there has been progress in content understanding by artificial intelligence, it is not a perfect process.
There is still a noticeable margin of error that HTML tags handle well. They ensure that all our content is correctly interpreted. HTML tags can also improve the user experience while reading the content, especially when used appropriately for headers, as you will read in this section. Other HTML tags help with indexing or content duplication.
Therefore, we can confidently say that HTML tags are essential for the website's SEO process. So, which tags are the most important?
Meta Title - Page Title
The title defines what the page is about for Google bots and communicates the page's topic to users. Properly optimized <title> combines SEO and usability aspects. In summary, the correct title should comply with SEO recommendations and provide a clear message to users. The structure of this tag looks like this:
<title>Here is the page title</title>
It appears in search results like this:
Meta title in search results
How to optimize the title for SEO value? Focus on two main points:
- Title length
Google has a character limit for the title displayed in SERPs. While the limit may vary depending on the screen size, titles below 60 characters should fit on most screens. If the title exceeds the limit, Google will automatically truncate it. While this is not an SEO problem, it's essential to ensure that the visible part includes the main keyword relevant to the user's query and the brand name.
Shortened page title in search results
- Keywords:
Include a well-chosen keyword in the title tag, but avoid keyword stuffing. Overloading the title with too many keywords may result in Google pushing your website lower in search results. To find and choose the right keywords, you can use tools like Senuto, Ahrefs, or Google Keyword Planner.
Meta Description - Brief Page Description
The meta description is a short text paragraph used to present the page in search results. It appears just below the page title. The structure of the meta description tag is:
<meta name="description" content="Here is the brief page description" />
In content management systems like WordPress, there are plugins that allow you to add the title and description of a page without manually placing snippets in the code. A popular plugin is Yoast SEO, where you can fill in the title in the SEO Title field and the description in the Meta Description field. Yoast SEO also provides a preview of these elements for both mobile and desktop views.
Setting title and description with Yoast SEO
When it comes to the meta description tag, it is similar to the title tag but provides more specific details about the content on the website. It can directly influence the user's decision to visit a particular website or not, so it's essential to make it attractive. When optimizing the description, pay attention to:
- Meta description length
Similar to the title, there is no exact character count limit for the meta description. However, keeping it around 160 characters ensures that the entire description is correctly displayed in search results.
- Keywords
Select relevant keywords for meta description, but remember to maintain naturalness and avoid excessive keyword usage.
- A detailed description of the page content
When creating a description, for example, for a product card, it's worth including information that can be the equivalent of a price tag, such as height, width, capacity, etc., as well as the material from which the product is made, etc. It's also worth considering adding the price or information about order fulfillment.
However, it is essential to remember that filling in the meta tag description is only a suggestion. Google doesn't always choose it according to our intentions - there are situations when Google selects a fragment of text from our page instead of the provided tag description, which it believes better fits the user's search query. To have a higher chance of displaying the description we suggest, you should:
- Use different descriptions for different pages - avoid duplication. If your website has a large number of subpages, prioritize and focus on the most important URLs, such as the homepage, offer pages, or other popular pages, and create unique descriptions for them.
- Create high-quality descriptions - ones that accurately describe the page's content and provide specific information in a clear way, without including long sequences of keywords that are of little value to the user.
H1-H6 Headers
Header tags are used to divide the page into sections or content into paragraphs. Headers include H1 as the main title, H2 as subheadings, and H3-H6 as sub-subheadings. The letter "H" stands for "header." The HTML code structure for headers looks like this:
<h1>This is the main header</h1>
<h2>This is the subheading</h2>
...
Headers on a web page
Header tags initially improve the user experience on the page, making it easier to navigate and find essential content. However, they also play a significant role in SEO.
For example, if someone searches for "how to choose a domain" in Google, the search engine can take one of the headers with the title "how to choose a domain" and display it as a separate search result. Therefore, it's essential to optimize header tags for search engines. During this process, pay attention to:
- Hierarchizing headers from H1 to H6.
- Placing relevant keywords in headers.
- Crafting headers appropriately to be treated as separate search results by Google.
Alt Attribute - Alternative Image Description
The alt attribute, also known as the alternative image description, is an HTML tag used to describe the content of images. Its role is to provide precise information about the graphic to the search engine. The alt attribute
<img> appears in the image tag like this: <img src="image source" alt="alternative image description" />
The alt attribute is helpful for users when a specific graphic cannot be loaded, and it significantly affects SEO. The main benefit from an SEO standpoint is that optimized alt attributes improve image rankings, making them appear higher in search results. When creating optimized alternative descriptions, consider the following
- Do not leave the alt attribute empty: Many people overlook the importance of the alt attribute, not realizing how crucial it is for SEO and how it can improve rankings. Additionally, screen readers for visually impaired users rely on the alt description to understand the content of images.
- Establish priorities: If your website has thousands of images, optimizing each one would be time-consuming. Focus on images that provide useful information visible from an SEO standpoint, such as product images, logos, infographics, charts, etc.
- Include keywords: Optimized alt descriptions with relevant keywords will rank well in search results. However, avoid excessive keyword stuffing in image descriptions, as it doesn't provide much value to users.
Open Graph tags are placed in the <head> section of the page and allow each website to become an attractive object on social media platforms. Open Graph was designed by Facebook developers to standardize the display of graphics, titles, and descriptions in external links added to platforms. The structure of Open Graph tags may look like this:
<meta name="og:title" property="og:title" content="Here is the Open Graph title"/>
Open Graph tags allow us to set a different title, description, and selected image than those in the <title>, <description>, and <img> tags, respectively. Properly implemented Open Graph tags can increase click-through rates (CTR) by up to 250%.
Meta Tag Robots
The meta tag robots element in the <head> section informs how a given page should be indexed and displayed in Google search results. It may look like this:
<meta name="robots" content="noindex" />
The above example tag contains the robots name attribute, which indicates that the directive (content) applies to all robots. However, you can target a specific robot, such as Googlebot, Google's standard indexing robot, like this:
<meta name="googlebot" content="noindex" />
The value content: noindex instructs the robot not to index the page in search results. Other directives that can be used include:
- all: This is the default value, indicating no indexing or display restrictions for the website.
- index: No indexing restrictions.
- follow: No link usage restrictions on the page, even if noindex is used.
- nofollow: Instructs the robot not to follow a link it encounters.
- none - this is equivalent to noindex, nofollow
- noimageindex - graphics on the page will not be indexed nosnippet
- max-snippet: [number]
- max-image-preview: [setting]
- max-video-preview: [number]
- notranslate unavailable_after: [date/time].
For more information, follow this link.
The robots tag is unlikely to help increase search rankings, but it can help when you want to block a page from being indexed, e.g:
- a page with little or no value for the user
- admin pages
- internal search
- results pages about upcoming promotions, competitions, new product launches
Canonical - canonical tag
The canonical tag can help with content duplication issues. It looks like this:
<link href="URL-Adresse" rel="canonical" />
Google often encounters pages with identical or similar content, and in such cases, it assesses the indexed pages and selects the one it deems most valuable. That page will be displayed at the top of search results. However, the algorithm's choice may not always align with our expectations. In this context, the canonical URL comes to the rescue. By using the canonical tag, we can indicate to Google which page we want to rank highest in search results. The use of the canonical tag is not as binding for the search engine as, for example, a 301 redirect, but in most cases, a page with a canonical attribute is treated as a priority.
Conclusion
As we can see, the above HTML tags are crucial from an SEO perspective. If you want your website to be competitive and rank high in search results, you must ensure that they are properly optimized.
The quality of metadata on a page is analyzed during a technical SEO audit. If you want to learn what an SEO audit is and what elements it includes, be sure to read this article.
