Html tags for Technical SEO

First Things first,

What is SEO?

In simple terms, The practices of improving your website visibility to rank on the first page of google.

SEO stands for Search Engine Optimization and it is an organic way to drive traffic to your site.

Yep, your website has great content and is designed well to appeal to people’s eyes. But if people can’t find your website, all of this is worthless, Right!

How Search Engine (Chrome) see’s your website?

You can see Html tags and the content of the webpage on the above image. This is how you can communicate with search engines through Html tags.

Some Html tags are important and some are not, let’s learn what is essential for SEO.

1.Title tag

Title tags play a very important role in SEO. Since this is what people see when they search for a keyword, which appears on the search engine result page(SERP).

In the Html code, it looks like this👇

<title>This is your title</title>

To optimize
-Google shows only 50-60 characters in SERP.
-Give a short & crisp title for your blog post or web pages.
-If your title is relevant and attractive, more users will click on it.

2.Meta tag

A short description below the title in SERP is given by using a meta tag. The meta tags define metadata about the HTML document.

In Html, it looks something like this👇

There are 4 main pieces of information you should give on the meta tag (description, keywords, author, viewport). Let’s break down

This information is only shown on the search result page.

Here “name” inside the meta tag is known as attributes. Attributes are used to give additional information about the Html tag.

To Optimize:
-Give a short description of including one or two keywords for what you want to rank for.
-Keep it relevant to the title tag, also add your brand name.

3.Header tags

We have scrolled through many articles just by reading headings on the page, haven't we? The same way a search engine looks. Html has 6 header tags from h1 to h6.

In Html, it looks like this👇

<body>
    <h1>Title tag</h1>
        <p>.......</p>
    <h2>Meta tag</h2>
         <p>....</p>
    .
    .
    .
    <h6>Responsiveness</h6>
</body>

To Optimize:
-Keep your header tags in order, such that it starts from intro till conclusion or steps of a procedure.
-Include keywords in header tags but don’t repeat, keep it natural.

4.Image Optimization

We can see images but search engines can’t. So to tell the search engine what the image represents, “alt” attributes are used.

This is how the alt attribute is used along with the img tag.👇

<div>
    <img src="cutecats.png" alt="tired orange cat sleeping">
</div>

To Optimize:
-Describe the image in the alt attribute so that the search engine can understand your content.
-It also helps to rank images for image searchers.

Pause, wait, first know this👇

How does Search Engine(chrome) Rank your pages?

The search engine works by crawling, indexing, and ranking.

Crawling: Crawling is done by google bots (also known as crawlers or spiders), it collects all types of content available on the internet by following links they find.
Firstly to rank your website,it should be visible to Google bots.

Indexing: The second step is to store all the discovered content in databases.

Ranking: Final step is to find high-quality and updated content and it ranks from more relevant to least relevant to showup on search results.

5.Link tags

Link tag contains the “href” attribute which has the URL. It is the best practice to have a “rel” attribute which means reference.

Nofollow Links:

When you don’t want the search engine to follow that link, “nofollow” attributes are used.
It looks like this👇

<body>
     <a rel="nofollow" href="url..."></a>
</body>

6.Canonical tags

All websites have duplicated web pages. When you want to tell the browser which is the original page over the other duplicated copies, the “canonical” attribute is used.
The canonical attributes look like this👇

It should be placed within Html head tags.