Basic HTML Tags You Need To Know For SEO
By Matthew Edgar · Last Updated: July 02, 2021
When you are managing a website and are responsible for optimizing that website’s performance for conversions and for search rankings, there are a few basic HTML tags you need to know. The better you understand some of these HTML basics, the better you can diagnose problems affecting SEO on your website. As well, knowing these basic HTML tags will improve your chances of communicating with a developer.
How Does HTML Work?
Let’s start with the basics. A website’s content is coded in HyperText Markup Language, or HTML. HTML is all about marking up the text, images, videos, and other content presented on the page. You mark up this content using different types of tags. This markup provides the basic structure of the web page—for example, within HTML you can specify what text is a header, sub-header, or main text.
The HTML code for a page is sent by the web server to a browser when that page is requested. The browser interprets (parses) this markup, along with other code, to determine how to output and display the page. As a simple example, when a browser sees a <strong> tag, the browser knows to bold the text contained within that tag. Robots from search engines operate in a similar manner.
How Do You View a Page’s HTML?
There are a few different methods to view the HTML for a web page (called viewing the source), but the easiest method is to go into your browser, open the web page, and then right click anywhere on the web page. Then click “View page source”. This will open a new tab containing the source of the web page.
Side note: What you see on View Source is the code as delivered to the browser from the web server called the server-side or raw code. If you have a lot of JavaScript that runs on your website and manipulates your HTML, the HTML contained in View Source may not accurately reflect what appears in the browser. To view the HTML after JavaScript has manipulated it, you can select “Inspect” instead.
Two Parts of the HTML Head & Body
There are two parts of an HTML document: the head and the body.
The head contains information about the page but is not visible in what the browser displays. In the head, you’ll find links to JavaScript and CSS files, along with meta tags that describe various aspects of this page. As well, many types of analytics code should be placed inside the head in order to accurately track traffic and to get an accurate understanding of conversions. Human visitors won’t see what is contained within the head, though what is available in the head will be important for how browsers present the page. What is contained in the head is also important to search engines.
The head begins with the <head> tag and ends with the closing </head> tag.
<head>
…
</head>
The body contains the code that controls how the website appears. This includes all the content that people see when visiting the website and the various layout elements that determine the page’s design and layout. In the body, you’ll find header tags, hyperlinks, paragraph tags, and more. The body begins with the <body> tag and ends with the closing </body> tag.
<body>
…
</body>
title
Located in the head, the title tag is what specifies the name of the page as displayed in the browser and as displayed in search results. It begins with <title> and has a closing tag of </title> at the end of the tag. For example, this is Elementive’s title tag:
<title>Elementive | Analytics & Conversion Optimization | Denver, CO</title>
The title tag is displayed to a visitor in the browser as the name of the document in the tab. If a visitor bookmarks your page, the title is used in the bookmark bar as a reminder to that person what page they bookmarked.
More importantly, the title tag is used by Google and Bing to understand the contents of the page—as a result, using keywords related to the topic of the page in the title tag can be helpful to rank for those keywords.
Along with helping determine where your website ranks, the title tag is also displayed in the search result (though Google may rewrite the title tag). The more compelling and descriptive the title tag, the better your chances of getting people to click the search result and visit your website. If you want to encourage more people who see your website in a search result to visit your website, start with changing the title tag.
There should be one—and only one—title tag on each page. If you have more than one title tag, you have a problem to address. However, Google will typically ignore the second title tag or combine the second title tag with the first. As well, most browsers will ignore the second title tag.
To make sure the title tag displays correctly within search results the length should be between 50-60 characters. Note that Google no longer measures title tags by character count, but instead by pixel count, which means the size of the letters used in your title tag will alter the length. This means if you use all caps (please don’t!), you will need to write title tags closer to 40-45 characters. Moz has a helpful tool for previewing title tag length.
meta
When a meta tag is referred to in SEO, often it is the meta description being referred to. However, a meta description tag is only one type of meta tag that you might find within the head of an HTML tag. All meta tags describe the metadata of the page—that is, the meta tags contain information about the information to be presented on this page. This can include the author of the page, the character encoding, the viewport size, how robots are to interact with the page, and the description of the page.
All meta tags are in the head of the document and you can have as many unique meta tags as are appropriate for your website. Unlike most of the other tags discussed in this post, the meta tag is a self-closing or singleton tag—that means everything is contained within attributes of a single tag and you will never see a closing meta tag.
Meta Description
A meta description is a meta tag with a name attribute set to “description”. The text of the description is included within the content attribute. For example, here is Elementive’s meta description tag:
<meta name="description" content="Elementive is a Colorado-based consulting firm that helps clients with web analytics and technical SEO. Learn more about what we do or contact us today.">
Google will display this description in search results (most of the time, there are plenty of instances where Google chooses other text to display instead). Although the description doesn’t change your website ranks, the description can encourage more people to click to your website from a search result.
Meta Robots
The other type of meta tag that is often used in SEO is a meta robots tag. This meta tag has a name attribute set to robots. The content attribute can be set to noindex or nofollow (or index and follow) depending on your preferences (learn more about setting robot controls). For example, here is a meta robots tag set to noindex and nofollow, which would prevent a robot from including the page in a search result and prevent a robot from following links contained on this page.
<meta name="robots" content="noindex,follow">
link / canonical tag
The link tag is also placed in the head and it is used to define links to other resources needed for this page. The link tag, like the meta tag, is a singleton or self-closing tag, meaning you won’t see a closing link tag. Instead, all the information needed is included in attributes within the tag.
While this is traditionally used to include stylesheets that dictate different aspects of the website design, the link tag is also used to define a canonical. A canonical URL helps to control and prevent duplicate content on a website. In a canonical tag, you define a rel attribute set to canonical and an href attribute set to the canonical URL. For example:
<link rel="canonical" href="https://www.domain.com/canonical-url">
h1
An h1 tag is the highest-level header in a page’s hierarchy. Although people question how important an H1 tag is for SEO, it still is very important—even in 2019. That’s because this tag defines the name of the page for users and for search robots. In doing so, the h1 tag contains the most important text on a particular page. Since this tag contains the name of the page, and since it is the most important text on the page, there should only be one h1 tag contained on any given page. If you see more than one, that won’t break anything for users but it will confuse search engine robots and visitors who use screen readers.
It is worth noting that you can display an h1 using other tags that are styled to look like a header. Google may use these styles as an indication of a page’s structure and treat this text the same as an h1. Human visitors rarely can tell the difference, unless they are using a screen reader or if they are using a browser with a broken stylesheet. But, to be certain Google and all users correctly understand your page, you should always place an accurate name for the page in an h1 tag.
When you view your source code, see if you can find an h1 tag. If you can’t, talk to your developer about adding the tag. If you do have an h1 tag, make sure it contains a descriptive name for the page that accurately characterizes the page’s content. If it doesn’t, adjust. Next, check to make sure you only have one h1 tag. If you see multiple h1 tags in the source code on your website’s pages, talk to your developer to resolve that and reduce to using just h1 tag.
The h1 tag begins with <h1> and it has a closing </h1> tag. As an example, here is the h1 tag used on this blog post:
<h1>Basic HTML Tags You Need To Know For SEO</h1>
h2+ tag
Along with an h1 tag, there are six levels of header tags. Some claim that an h2 matters for SEO, but there is scant evidence this is the case. From an accessibility perspective, these additional headers do matter to communicate the structure of your page. Given this, even if it doesn’t directly help SEO, I recommend using appropriate header tags to accurately convey how your page is organized. In this article, there are plenty of examples of h2 and h3 tags to break up different sections. View the source of this blog post to explore what is an h2 or h3.
a
The a tag defines a hyperlink. This means the a tag is not only important for SEO but is (arguably) the most important tag in all of HTML. As you look through your source code, you should see a large number of a tags that route people to different parts of that page or different pages altogether.
An a tag begins with <a> and ends with a closing tag of </a>. In between the tags, you’ll see the linked text, also called the anchor text. An example of an a tag:
<a href=" /books/">Matthew's Books</a>
The most important attribute with an a tag is the href, which stands for hypertext reference. That href attribute can be seen in the above example. The href makes the a tag a link and defines where this link will take the visitor (or search robot) when the link is clicked or tapped.
The other attribute to pay attention to is the rel attribute, or the relation attribute. The rel attribute specifies how the page containing the link relates to the page that is being linked to. In SEO, the most common rel attribute is nofollow, which changes how Google will view the page being linked to (learn more about rel nofollow here).
img
Finally, we have the img tag. The img tag states that an image should be included in a particular location of a page. The img tag is self-closing containing various attributes within the <img> tag. It is worth mentioning that images can also be included as background images using CSS—however, we’re going to ignore those for now as they tend to have less impact on SEO (and it is questionable if Google can see background images).
The first attribute, and the most important, is src. This defines the source URL containing the image. Although not a direct ranking factor, it is helpful to have the name of the image be descriptive and include appropriate keywords as this can help the image rank more highly in search results. Make sure that your website’s images can be crawled by search engine robots and aren’t blocked by any robot commands. Here is an example of an img that has a src that shows the cover of my book:
<img src="/wp-content/uploads/2017/01/Elements-of-a-Successful-Website-200.png">
Along with the src attribute, another important attribute for SEO is alt. The alt attribute defines the alternative text describing the image to any visitor who can’t see this image. Visitors who can’t see the image include people with screen readers and search engine robots. You want to make sure your alt text accurately describes the image and uses appropriate keywords where possible because, among other benefits, doing so will help your image rank highly in search results. Here is that same example, but with alt text.
<img src="/wp-content/uploads/2017/01/Elements-of-a-Successful-Website-200.png" alt="Elements of a Successful Website, Matthew Edgar">
The final attributes I’ll mention here that matter for SEO are the height and width attributes, which define the size the image will be displayed at in the browser. These do not directly affect how your image or how the page containing the image will rank in search results. But these attributes can help you diagnose issues with speed. If, for example, you have a 500 pixels wide image, but the width attribute is set to 200 pixels, then you are loading a large image than you need and that will slow down this page’s overall load time.
Final Thoughts
Hopefully, this guide through basic HTML tags for SEO will help you better understand how your website is built and how search robots view the page. If you’ve never looked at your website’s source code, I highly encourage you to do so—you don’t need to understand all of it, but the important part is to understand the key aspects that impact your SEO work. If you have any questions or would like help looking at your website’s technical structure, please contact me.