Everything you need to know about graphics. Web Design, computer graphics, software and how to

HTML tags for SEO

HTML tags for SEO

By daniele

There are some specific HTML code types that provide search engines with key information for SERP display. Essentially, these elements highlight parts of your content that are relevant for search and they describe those elements for search crawlers. You probably want to know which are those tags that are becoming almost fundamental for SEO, right? Well, here’s a sneak peak of them.

Title tag

It’s usually used to set up those clickable headlines that you see in the SERP. Okay, we know that it’s up to Google to create a SERP headline for your page, but to be honest, the first place Google is going to check for headline ideas is the title tag, and where a title tag is present, that’s why you can use the title tag. It gives you some control over the way your page is represented in the SERP.


Keep in mind that your title must contain keywords that will help you appear in search results. In addition, it must be attractive enough for users to click on it, so it is recommended to have a balance between search optimization and user experience:

  • Watch out for length: Google takes care to display the first 50-60 characters of your title and will cut off the rest. While you can write a 60-word title, try to fit the important information before the cut-off point.
  • Reasonable amount of keywords: It is not necessary to stuff your title with keywords, in fact, keyword stuffing is punishable. Although one or two will be fine, as long as you make sure the title forms a coherent sentence.
  • Write a good copy: Try to create descriptive titles that highlight the value of the content and set the right expectations so that users are not disappointed when they visit the page.
  • Add your brand name: If you have a recognizable brand name that is likely to increase your clicks, don’t hesitate to add it to the title.

Meta description tag

They are used to set up the descriptions within search result snippets. Sometimes, Google doesn’t use the tag, but if the meta description tag is there, there will be a good possibility for your meta description to achieve the SERP.

However, Google’s team uses it to choose the best option for increasing your chances of click-through. So, in some cases, it’ll ignore the meta description tag, and instead quote a bit of copy from the page if it feels it is a better match for a particular query than the meta description would have been.


There are no strict rules about this tag. In fact, if you fail to write a good one, or even if you fail to write one altogether, then Google will write one for you.

  • Watch the length: As with headlines, Google will keep the first 150-160 characters of your meta description and remove the rest, so be sure to include the details you want to appear.
  • Write a good copy: Although it is not used for ranking, it is important to keep the description relevant and optimized, as this makes it more likely that users will be interested in your site.
  • Consider omitting it: For some users, it is often difficult to create good copy for particularly long keywords or for pages that target a variety of keywords. In those cases, consider omitting the meta description: Google will scrape your page and supplement your snippet with some relevant quotes anyway.

Heading (H1-H6) tags

The reality of the digital reader is that no one reads a web article in its entirety. In fact, they swipe the screen while scanning and locating the information they need or like the most. And if the article isn’t split into sections, then many will bounce right away because it’s just too much. So, from a user perspective, headings are handy reading aids. From the perspective of the search engine, however, heading tags form the core of the content and help search crawler bots understand what the page is about.


Their rules are based on general copywriting practices. So, it’s as easy as to understand that if you want to keep a consistent format, you need to learn how to break copy into bite-sized pieces:

  • Do not use more than one H1 heading: The first heading is always distinguished from the others because search engines treat it as the title of the page. But be careful, you should not confuse it with the title tag: the title tag is displayed in search results, while the H1 tag is displayed on your website.
  • Keep a shallow structure: It is rarely necessary to go below H3. Use H1 for the title, H2 for section headings and H3 for subsections. Anything more tends to be confusing.
  • Form headings similar to queries: A good strategy is to use each heading as a search ranking opportunity. So each one should sound like a query or an answer to a query, including keywords.
  • Be conscientious with all headings: All headings you add should be written in such a way that if you were to remove all the text and keep only the headings, they would read like a list.

Image alt text

Here, the key purpose of the image alt text is to help users understand the illustrations when they cannot be seen, for example, by a visually impaired visitor. In this case, along with occasions where, for example, there is a problem and the image does not load, alt text can be used to describe what is in the image, rather than seeing it.

From an SEO perspective, alt text is a big part of how images are indexed in Google search. So if there are visual components to what you do, such as images of your products, your work, your stock images, your art, then you should definitely consider using image alt text.


A prerequisite for adding alt text tags is to find all images without them. To do this, you can use tools such as WebSite Auditor to crawl your website and compile a list of images with missing alt text. Once you have created your lists, apply these guidelines:

  • Be concise, but descriptive: Good alt text consists of one or two lines of text that help visually impaired people understand what is shown in the image.
  • Don’t be too concise: One word, or even a few words, will probably not be enough; there would be no way to differentiate the image from other images. Think about all the possible properties shown: type of object, color, material, shape, finish, lighting, etc.
  • Don’t do padding: There is really no place where keyword padding works, and alt text is no exception.

Schema markup

It is used to enhance regular SERP snippets with rich snippet features. Schema.org offers a large collection of tags developed jointly by Google, Bing, Yahoo!, and Yandex, and webmasters use the tags to provide search engines with additional information about different types of pages.

While there is no certainty whether the use of Schema markup improves ranking chances, the resulting snippets look much more attractive than regular snippets and therefore improve one’s search ranking.


The only recommendation is to visit the official schema.org site and take a look at the tags it offers to see if any may apply to your type of page. It is worth mentioning that there are thousands of tags, so it is likely that there is an option that applies and can help improve your website listings.

HTML5 semantic tags

Before the advent of HTML5 elements, each webmaster divided the HTML code into components, which they specified in their own way, so it ended up being a bit complicated and a challenge for search engines to understand what was what on each page.

However, with the introduction of semantic HTML5 elements, an intuitive set of tags was presented, each describing a separate page component. So, instead of tagging content with a bunch of confusing divs, there is now a way to describe components in a standardized and easy to understand way.

HTML code

Therefore, we are going to introduce you to some of the most practical semantic HTML5 elements, so that you can use them to improve your communication with search engines:

article – isolates a post from the rest of the code, makes it portable

section – isolates a group of posts within a blog or a group of headings within a post

aside – isolates supplementary content that is not part of the main content

header – isolates the top part of the document, article, section, may contain navigation

footer – isolates the bottom of the document, article, section, contains meta information

nav – isolates navigation menus, groups of navigational elements

Meta robots tag

The Robots meta tag is all about the rules of engagement between websites and the search engines. This is where website owners can establish a set of rules for crawling and indexing their pages. Some of these rules are mandatory, while others are more of a suggestion.

And while not all crawlers will respect the robots’ meta tags, the major search engines often will. Also, keep in mind that if there is no meta robots tag, crawlers will do as they please.


This tag should be placed in the main section of the page’s code and specify which trackers are addressed and which instructions should be applied:

  • Address robots by name: You can use robots if the instructions are for all crawlers, but you must use specific names to address individual crawlers. For example, Google’s standard web crawler, for example, is called Googlebot.

Individual addressing is usually done to ban malicious crawlers from the page and allow well-meaning crawlers to continue.

  • Make the instructions match your goals: You will usually want to use meta robot tags to prevent search engines from indexing documents, internal search results, duplicate pages, staging areas, and anything else you don’t want to show up in search.

HTML code

These are some of the most commonly used parameters with meta robots tags. Remember that you can use any number of them in a single meta robots tag, separated by a comma:

  • noindex – page should not be indexed
  • nofollow – links on the page should not be followed
  • follow – links on the page should be followed, even if the page is not to be indexed
  • noimageindex – images on the page should not be indexed
  • noarchive – search results should not show a cached version of the page
  • unavailable_after – page should not be indexed beyond a certain date.

Canonical tag

Canonical tag spares you from the risk of duplicate content. The main goal is to prevent any given page (even if unintentionally) from having multiple artifacts, such as http and https, multiple tracking tags, and even multiple sorting and customization options available in product catalogs.

Something that, at first glance, doesn’t seem like a problem, but in reality means that they may be taxing the tracking budget and authority of your page and disrupting your performance tracking. Therefore, the alternative is to use a canonical tag to tell a search engine which of those page addresses is the primary one.


To avoid potential SEO complications, apply the canonical tag to the following pages:

  • Pages available via different URLs
  • Pages with very similar content
  • Dynamic pages that create their own URL parameters

To sum up…

These are just some of the HTML tags that you can use to improve your SEO skills on your websites, and while many of them are still in use today, there are others that are set to disappear precisely because, as noted above, search engines are getting smarter and there is less and less need for HTML tag optimization.

Not to mention that most modern CMS systems automatically add these elements. But it never hurts to know how to do it yourself, right? Many web developers prefer to do it by hand to prevent Google from coding and interpreting their content automatically and almost completely. You know, privacy and authenticity first!