What are HTML tags & Attributes mandatory for a good Web page in SEO ?

Search engine optimization (SEO) is the process that involves enhancing the visibility of a website on search engines. This is achieved by increasing the website’s ranking on search engine results pages, such as Google. The higher the website appears on these pages, the more likely it is to receive a larger volume of traffic.

SEO involves understanding how search engines operate, what people are searching for, and the keywords they use. Improving a website’s SEO often involves adjusting the content to make it more relevant to targeted keywords. Another strategy used in SEO is to increase the number of links pointing to the site, thereby boosting its visibility.

The following is a list of essential HTML tags and elements for optimizing a website for SEO:

HTML Title Tag: The <title> tag in HTML is used to define the title of the HTML document. It sets the title in the browser toolbar. It provides the default title for the web page when it is added to bookmarks. It displays the title for the page in search engine results. This HTML title tag is one of the most important tags to consider during SEO. The title tag is also displayed in bold and larger font size when we search for something in the search engine. The content creator and the developer must have to make sure that the title tag is used correctly in order to get a good search engine rank.

Syntax:

<title> Your Page/Post Title Heading </title> 

Example:

<title>What is Recursion? Explain in detail.</title> 

Google SERP Example: The below image illustrates how the <title> tag will look in the browser as a title of the webpage.

HTML meta Description Tag: The metadata means information about data. The <meta> tag in HTML provides information about HTML Document or in simple words, it provides important information about a document. The meta tag contains a name attribute. We can set the value of it as ‘description’ and then add the description of the webpage inside the ‘content’ attribute.

Syntax:

<meta name="description" content="Some text about the contents of the webpage">

Example:

<meta name="description" 
           content="A recursive function solves a particular problem by calling a copy of 
                           itself and solving smaller subproblems of the original problems.">

Best practices in SEO:

• Always keep it short and precise as the search engine will generally keep the first 150-160 words of your meta description and cut the rest.
• If your webpage intends to be displayed in search of a wider range of search keywords then it is better to skip the meta description. In that case, the search engine algorithm will create the description from the text of the webpage with the most searched keywords.

Example: The below image illustrates how the <meta> tag will look in the browser as meta description.

HTML Heading Tags (h1-h6): It is used to define the headings of a page. There are six levels of headings defined by HTML. These 6 heading elements are H1, H2, H3, H4, H5, and H6; with H1 being the highest level and H6 the least.

Syntax:

<h1>Some Text</h1>
<h3>Some Text</h3>
...
<h6>Some Text</h6>

Best practices in SEO:

• Don’t use more than one <h1> tag inside the entire webpage. Use only one <h1> tag as the heading or visible title of the entire webpage.
• Use h2 for the sections of the webpage and h3 for the subsections. It is better to not go below h3 as this will be confusing for both the user and the search engine algorithm.
• Make the headings related to possible search queries. That will help to rank the website in a better position when the expected query is searched.

Example: The below image illustrates how the heading tags will look on the webpage.

HTML Image ‘alt’ Attribute: The <img> alt attribute is used to specify the alternate text for an image. It is useful when the image is not displayed. It is used to give alternative information for an image.

Syntax:

<img src="image_URL" alt="Image Description">

Best practices in SEO:

• Good descriptive text of one or two lines inside the alt attribute will help the user to figure out what is shown inside the image even if the image is not loaded.
• The keyword searching will not consider the text inside the image alt attribute with higher priority so don’t try to write the search keywords here.

Example: The below image illustrates how the alt attribute of the image tag will look when the image is not displaying.

<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" 
      alt="GeeksforGeeks logo">

HTML5 Semantic Tag: Semantic elements have meaningful names which tell about the type of content. For example header, footer, table, … etc. HTML5 introduces many semantic elements as mentioned below which make the code easier to write and understand for the developer as well as instruct the browser on how to treat them. 

Using semantic tags like the article, aside, details help in SEO:

The convention on the right side is much helpful and understandable by the search engine. So it is more useful during SEO.