The HTML SEO optimization

So, you've finally managed to build and publish your website! Great, but building a beautiful and functional website is one thing, and making it successful is another. For your website to be successful, you need some visibility and visitors too. So, the question is, how do you make your website more visible and visited? The answer to that is SEO. In this topic, we will go through the most important HTML tags that can help with search engine visibility.

Search Engine Optimization

SEO stands for Search Engine Optimization and it represents the process of making a site more visible in search results, as well as improving search rankings. The world wide web is full of search engines that are designed to carry out web searches, following links from page to page, and indexing every content they find. Behind every search you do, the search engine displays indexed content.

Of course, there are other ways you can boost your traffic, for instance placing advertisements on social networks and various Search Engine Result Pages (SERP) of search engines such as Google, Bing, etc. But, they can be pretty pricey, especially if you are new to WWW. Also, this means you only rely on free traffic coming from search engines when visitors query them and find your site as a result. With that being said, in this topic, we will be focusing on free features that can level up your traffic if you follow the rules closely when doing SEO for your website. This way, your website could become one of the websites for others to put advertisements on which can bring potential revenue from ads.

In the next part, we will go through SEO tags in HTML that can enhance search engine visibility and help engines properly read content on the website. Let's get to work!

The Title and Meta Description tag

A title tag is one of the first and most important tags for SEO. The title tag is used to set clickable headlines that you can see in SERP. It looks like this:

Usually, SERP headlines for your website are made by the search engines, such as Google, and the first place they check is the title tag or other heading. Since you know how the search engines work, you can set the title tag to anything you want. That way you have some control over the way your website is displayed in SERP. The best practice in this case are:

• make your title attractive and worth clicking;

• keep the length to 50-60 characters since the rest of it will be cut out;

• use keywords;

• add your brand name.

In the code snippet below you can see the title tag used for the SERP headline:

 <title>Learn computer programming | Online courses from JetBrains Academy</title>

Alongside the title tag, you come across the meta description tag. The Meta description tag sets up descriptions within search result snippets. Check out the meta description tags below:

As you can notice, the information about the website is shown below the title and displayed from the meta tag. Some search engines don't always use this tag, but the meta tag should be set since there is a good chance it will be displayed and made onto the SERP. The best practices to follow while setting the metatag:

• keep the length between 150—160 characters;

• use relevant description;

• if you can't think of relevant description, let the Search Engine do it on their own.

Check out the good code practice of the meta tag in the code snippet below:

<meta name="description" content="With JetBrains Academy’s online programming courses, 
you’ll gain computer coding skills by creating applications — from basic to challenging." class="local"/>

The Heading tags

The heading is a vital part of every website since it makes users decide on whether to keep scrolling or not. Most users will just scan the website looking for the part they are most interested in. Also, if the website isn't split into many sections they will most likely leave it. That's why you need to use headings from H1—H2 to keep users' attention and to point out the relevant content. Looking from an SEO point of view, heading tags are important because they form the core content. Also, they help search crawler bots understand what the page is about. Here is one example of a good use of the <h1> tag:

The best practices to follow when it comes to breaking your website with heading tags:

• don't use more than one <h1> tag because the search engine will treat it as the title;

• use headings from H1—H3 the most;

• form query-like headings;

• always be consistent.

The snippet below shows the code from the picture above:

<h1 class="wt-hero">
   <img src="/academy/img/logo_academy.svg"
      alt="JetBrains Academy"
    class="logo"/>
</h1>

The HTML5 tags

Before the introduction of HTML5 tags, the most common practice while building a website was splitting your code into sections using div and id tags. Meanwhile, the HMTL5 semantic elements were introduced and now we get to use a new set of elements that help SEO optimization and improve communication with search engines:

• article specifies self-contained content;

• section specifies a section in the document;

• aside specifies some content aside from the content it is placed in;

• header specifies the header for a section;

• footer specifies the footer for a section;

• nav specifies a set of navigation links.

The HTML5 tags work wonders for SEO optimization because the tags describe the components in a standardized way, unlike the div tags which are the absolute opposite.

Image alt text

Onwards, we can't imagine our WWW without images, but in order for SEO to understand those images, it needs the alt attribute. The main goal of SEO is image indexing thanks to the alt attribute. In other words, alt text is a big part of how images are indexed in Google searches. Here is an example of the HTML code:

<img src="/academy/img/logo_academy.svg" alt="JetBrains Academy" class="logo">

The code output:

The best practice to follow while using the alt attribute:

• be concise but not too concise;

• don't use too many keywords.

Conclusion

In this topic, you've learned about SEO optimization. You've learned how to make your website more visible and visited by using various HTML tags:

• Title

• Meta

• Heading

• HTML5 tags

• Image alt text.

In this topic, we've covered the most important and basic tags, but there is much more to explore and learn about SEO optimization. Let's test what you've learned so far!