Search
Close this search box.

10 Essential HTML Tags Every SEO Strategist Should Know

HTML tags

Table of Contents

HyperText Mark-up Language (HTML) is the standard mark-up language for documents used by web pages to indicate browsers what elements it contains and which one should be displayed on the screen.

HTML tags are small snippets of HTML coding indicating search engines how to properly “read” your content. By adding SEO tags in HTML, you can significantly improve search engine visibility.

When a search engine crawler visits your site, it takes a look at the HTML tags of the site. This information helps search engine to know what your content is about and how to categorize the material.  With the use of HTML elements, SEOs can share information on web pages to people as well as search engines.

1. Title tag

Title tags are the clickable headlines that appear in the SERP. These tags are important for usability and search engine optimization. They help to accurately and briefly describe the content of the page so that searchers are encouraged to visit the page and search engines have enough information about the topic of the page. Title tags are displayed in the snippet as well as in the browser tab, which helps users understand what pages are open in the browser. Typically, it is up to Google to create a SERP headline for any webpage, and it could use any section of headings from a page, or it may even create a completely new headline to be displayed in search results.

Title tag

Best practices

  • It should contain the keywords that appear in the search results.
  • It should be appealing enough for users to actually click on it.
  • The length of the title tags should be between 50 and 60 characters; cut the rest.
  • Make sure to include only a reasonable number of keywords and avoid keyword stuffing at all costs.
  • If you are an established brand, it is a good idea to use it in the title tag. If you are not a well-known brand, the use of a brand name in the title tag will help you build brand recognition over time.

2. Meta description tag

Meta description tags are HTML tags used for setting up descriptions within search result snippets. They are not always used by Google to create snippets; however, if there are meta tags on your page, there is a good chance that your meta description will make it onto the search results.

 Meta description tag

 Best Practices

Keep in mind that there is no strict rule for writing meta descriptions, as if you write one altogether, then Google will write one for you.

  • The length of the meta description tags should be between 150 and 160 characters.
  • Write an attractive meta description and optimise it for search intent.
  • It should be relevant and based on the respective query.
  • Make sure to eliminate all the alphanumeric characters from your meta descriptions.

Keep in mind – Google sometimes ignores the meta description tag and fetches a bit of copy from the page. This happens when a quote is a better match for a specific search query than the meta description tag.

3. Heading (H1-H6) tags

Most people don’t have the attention span to read the entire article, so instead they scan the article until they reach the section they like and read that section, and then we bounce. Headings provide the core of the content to the search engines and help them understand what the page is about.

Heading (H1-H6) tags

 Best practices

  • Avoid using more than one H1 heading.
  • It is a good practice to use headings to maintain a shallow structure for a website.
  • Use H1 for the title, H2 for section headings, and H3 for subsections. There is rarely a need to go beyond H3
  • Each heading should sound like a query or answer to the query.
  • Make sure to include keywords in your heading tags as they are used by google to gather page context.
  • When beginning a new section, make sure headings are used equal or higher.

 Keep in mind – The heading should not be confused with the title tag. H 1 is displayed on your website, while the title tag is displayed in search results.

4. Image alt text

 There are primarily two objectives for using image alt text on a page. The first goal is to make it easy for users who cannot view it to understand it, such as those with impaired vision. The second goal is to get your image indexed by search engines.

image alt text

 Best practices

Find all the images without alt text tags and make sure to add them. You can use tools like Ranks Pro to crawl your website and make a list of imageswith missing alt text.

  • Be concise yet descriptive. Describe the image in one or two sentences to help a visually impaired person understand what’s pictured. ​
  • Don’t use just one word or a few words, as it will not serve the purpose.
  • Think of including various properties in the description, such as object type, colour, material, shape, finish, lighting, etc. ​
  • Avoid keyword stuffing.
  • Make sure to add alt text to form buttons; otherwise, screen readers wont be able to interact with your website.

5. Open Graph Tag

Open Graph Tags are HTML tags that indicate social media platforms how you want your page to look when shared on social media. By using these tags, you can make better post that attract more targeted users

open graph tag

Best practices

  • Be accurate and make sure og: description” accurately describe the page content
  • Keep your description below 200 characters
  • Make the description capture user’s attention 
  • Make sure to define all the open graph properties

6. Schema Mark-up

Schema mark-up is used for enhancing regular SERP snippets with rich snippets. There is a collection of tags hosted by schema.org. These tags were jointly developed by Google, Bing, Yahoo!, and Yandex. These tags are used by web masters to provide additional information related to different types of pages. This information is used by search engines to enhance their SERP snippets with various rich features. There is no guarantee that using Schema mark-up improves one’s chances of ranking. However, the resultant mark-up usually appears better than regular snippers and improves chances of being featured on search results.

Schema Mark-up

 Best practices

  • Visit schema.org and check thoroughly if they have any tags that can be applied to your types of pages. There are hundreds of tags, so you can easily find few to improve your website listing.
  • Make sure to choose the right schema type that accurately reflects the content on the page
  • Google recommends to use g JSON-LD for schema markup as it’s easier to implement and maintain compared to other formats like Microdata or RDFa.
  • Once you have implemented Schema markup on your page, use Google’s Rich Results Test tool to validate your code and identify any errors.
  • Avoid keyword stuffing or making any false claims

7. HTML5 Semantic Tags

HTML5 elements is a set of intuitive tags describing page components used for better descriptions of the various page components.  Here are some of the commonly used semantic HTML5 semantic tags for SEO

<article> — this tag is used for describing a meaningful content piece such as article, forum post etc

<audio> — this tag is used to show an embedded sound or audio stream;

<details> —It is used to describe a widget from which the user can get additional information or control on demand

<dialog> — It describes a dialog box or a sub window a user can interact with in the need of necessity;

<embed> —It is used to embed a piece of multimedia content like videos, sounds, or any external apps;

<footer> — it is used for describing the footer of a page

<header> —it is used for defining the content of the header section of the page

HTML5 Semantic tags

Best practices

  • Make sure to use tags for intended purpose
  • Structure content hierarchy accurately
  • Use appropriate heading tags
  • Don’t rely solely on <div> and <span>:
  • Structure your headings hierarchically, with <h1> for the main heading and subsequent levels for subheadings.
  • This improves content organization and accessibility for screen readers.
  • Use HTML validation tools to ensure your code is well-formed and uses semantic tags correctly

Keep in mind – The best way to optimize HTML5 semantic tags is to apply them correctly

8. Meta robots tag

Robots meta tag are all about setting rules of engagement between website and the search engines. In other words, website owners set up rules for crawling and indexing their pages. Some of these rules are mandatory, while others are like recommendations and may not be followed by all search engines, but mainstream search engines often will follow them. These tags have four main values for search engine bots, such as the following

  • Follow –Search engine crawler follow all the links on a webpage
  • Index – Search engine crawlers index the entire webpage.
  • No Follow – Search engine crawlers will not follow any links on the page.
  • No Index – Search engine crawlers will not index the webpage.
Meta robots tag

Best practices

  • Use various parameters as and where needed such as Nofollow, Noindex, etc.
  • All bots should be referred as robots
  • The individual bots should be addressed as individual bot names
  • Make sure to specify he sitemap URL in robots.txt all the time, so the page can be easily indexed by search engine bots
  • Create a customised and dedicated robot.txt file for every sub domain
  • Always test and validate the robots.txt file with Google’s robts.txt testing tool to find errors and know if the directives are actually working

Keep in mind – I there is no meta robots tag on a website, then the search engine crawlers will do as they please.

9. Canonical tag

Canonical tags save you from the risk of duplication. These tags are HTML link tags with attributes to ‘rel=canonical’. They are used to indicate to search engines that there are other web page versions. By implementing this in the code, a website indicates to the search engines that the URL is the main page and search engine should not index other pages.

canonical tag

   Best practices

  • Apply canonical tag to the pages available via different URLS, pages with very similar content and also to the dynamic pages that create their own URL parameters
  • Make sure to specify only one Canonical URL per page
  • Specify correct domain protocol
  • Specify Trailing Slash or Non-Trailing Slash URLs
  • Specify Non-WWW or WWW URLs
  • Use Absolute URLs

10. Meta viewport tag

Meta viewport tag provide instructions to the web browser on how the page should be rendered and displayed on various devices. It helps you control the width and scaling of the viewport or the area of a page visible to a user, so it is correctly displayed on all sizes of screens including desktops, laptops, tablets, mobile phones.  It also tells Google that web page is mobile-friendly and can be displayed as a mobile search result.

Meta viewport tag

Best practices

  • Meta viewports tags are typically already implemented in a most popular website theme. However, it is always a good practice to manually check search engines like Google to perceive your website as mobile friendly.
  • Make sure to test your website on various devices and browsers to ensure it renders correctly and provides a good user experience.
  • Use tools like Google’s Mobile-Friendly Test to check your website’s mobile-friendliness.

How to ensure your tags are in order

In order to avoid mistakes in your HTML tags that may affect the usability and ranking of your site, it is necessary to run a full analysis of the site. You can easily audit your entire website with Ranks Pro. A detailed analysis of your site page will show title tags, meta tags, no index, canonical and alternate tags. The tool also checks the headers and meta tags for duplicity, length restrictions and more. It also shows all duplicates and images with empty alt tags, evaluate h1-h6 tags and so much more. Besides, you can also manually configure how frequently audit should be performance based on your needs and how often should you make changes to the website.

Conclusion

Using the right HTML tags can significantly improve SEO of your website and help it to attain higher rankings in search results. By implementing HTML tags effectively, you can improve the usability of your site, and outrank your competitors.

Share the Post:

Related Posts

Website Traffic
SEO
Alekh Verma

How to Increase Website Traffic?

In the ever-competitive digital landscape, website traffic is the lifeblood of your online presence. It’s the metric that translates into brand awareness, lead generation, and

Read More »