•
10-minute read
8 HTML Tags Essential for SEO
HTML tags are among the first things we learn in SEO. They are invisible to the naked eye, but can do wonders for the rankings or, on the contrary, be among the reasons you rankings have dropped.
In fact, HTML tags have become so essential that no website can compete in today’s search results if they ignore HTML tags or, God forbid, use them incorrectly.
What are HTML tags?
HTML tags are bits of code that can be used to describe our content to search engines. We can use HTML tags to highlight the important parts of our copy, to describe images, and even to give instructions to search engine bots.
HTML tags are also used to influence the way our pages appear in search results. With the help of certain tags, we can turn regular search snippets into rich snippets, and maybe even into featured snippets. And, as our search snippets get more advanced, they are able to secure better SERP positions and attract more traffic.
Do HTML tags still matter for SEO today?
Absolutely! And taking care of HTML tags should always be on your website SEO checklist.
Some say that search engines have gotten too smart for HTML tags. They say search engines don’t need any help understanding our content. Well, that’s not the entire truth.
First, even though artificial intelligence has made leaps in understanding content, it’s not yet perfect. There is still a sizable margin of error and we still need HTML tags to make sure all of our content is interpreted as it should be.
Second, helping search engines understand our content is not the only function of HTML tags. They also enhance user experience, create beautiful search snippets, resolve duplicate content issues, and enforce crawling rules.
These are the HTML tags still crucial for your website SEO:
1. Title tag
Title tags are used by search engines to determine the subject of a page and display it in SERP. In HTML, a title tag looks like this:
<title>Your Title Goes Here</title>While in SERP, a title tag looks like this:
SEO value
Title tags used to be of huge importance to search engines. The title of the page is its main topic, so Google would look at the title to decide whether the page is relevant to a search query.
Naturally, SEO specialists began stuffing title tags with as many keywords as possible, trying to make their pages relevant to multiple queries. As a response, Google began punishing keyword stuffing and other outdated SEO techniques, so pages with spammy titles lost their rankings in search.
Today, as Google has shifted to semantic search, the value of an optimized title tag is even lower. In fact, Google has gotten so good at understanding our pages, that it sometimes rewrites our titles for us. That’s right, it’s possible that you set a certain title for your page, and then Google will display a different title in search results. Although it’s still a rare occurrence, it happens when:
The title is keyword-stuffed. Google might fix a spammy title if the page itself has quality content. No need to waste good content just because you’ve made the mistake of adding a few extra keywords to your title.
The title does not match a query. Google may choose your page for a particular query even if your title does not match this query. In this case, the title may be sometimes rewritten for SERP. It is obvious that you cannot write a title that matches all the possible queries. However, if you see that Google rewrites your title for high-volume queries, then consider revising it.
The title is too long or too short. In 2021, Google confirmed it rolled out the Page Title Update. The algorithms started to replace titles with something else if the titles were too short, too long, or had some special punctuation marks, e.g., semicolon. For example, if a title was too lengthy, the search engine used H1 headings instead. If it was too short, Google appended the brand name to it.
There are some alternative titles. Facebook and Twitter have their own tags in the <head> section of your page, so if you use the alternative titles for these social networks, Google may also use them instead of your title tag.
How to optimize
Here is how you create titles according to Google guidelines and best practices in SEO.
Title length
Google has a certain limit on how many title characters it can display in SERP. This limit is not exact — it changes depending on the size of your screen. As a rule of thumb, titles that are under 60 characters long will fit on most screens.
If your title does not fit a particular screen, Google will cut it short. It would look like this:
It’s not necessarily bad for your title to be cut short. Sometimes it can even have a positive effect on the CTR. Truncated titles create a cliffhanger and stimulate curiosity among the users, so they are encouraged to visit the page.
The only time a truncated title may be a problem is when a visible part of your title does not appear to be relevant to the query. So it’s not necessary for your entire title to be visible, but it’s important for the visible part to include your main keyword.
To check on your title lengths, launch WebSite Auditor, go to Site Structure > Site Audit > On-page, and see a full list of titles that exceed recommended length:
Title keywords
Having keywords in your title is still important — this is how you communicate the relevance of your page to the users. But, if you include too many keywords, Google will either demote your page or rewrite your title to be less spammy.
Current best practice is to include just one keyword or short keyword phrase per title and then fill the rest of the title with marketing words. For example, here are two popular title structure examples:
Top 10 Gravel Bikes for Any Budget | BikeExpert
The title has a short keyword phrase towards the beginning. We also see it’s a listicle, because it says top 10, there is a brand at the end to communicate authority, and the title says any budget, which is just a generic selling point.
How to Choose the Best Laptop for Work | 2022
This title has its keyword a little further up, but it’s still within the length limit, so it’s going to be visible in any SERP. We can see the page is going to be a guide, because the title says how to, and we can see it's fresh because it contains the current year.
So, when creating keyword-optimized title tags, remember that having only one target keyword in the title tag is pretty enough for a better ranking.
Brand in a title
In case you have a well-known brand, it is a good idea to use it in the title. When users skim the results page, they will be more likely to choose something they recognize.
If you don’t have an established brand, you will not see any immediate benefit from including it in the title. But, it may help you to build brand recognition over time, so you will start seeing the benefits eventually. We are talking years.
2. Meta description tag
Meta description is a short paragraph of text used to describe your page in search results. In HTML, a meta description tag looks like this:
<meta name="description" content="Your description goes here">While in SERP it looks like this:
.png)
.png)
SEO value
The function of meta description is similar to the title. It provides a little more detail about your page and it helps users decide whether to visit your page or not.
Though meta description is not a direct ranking factor, it can still help your success in search. If your meta description is relevant and attractive, more users will click on your snippet, and, eventually, Google might consider giving you a better ranking position.
Although, same as with titles, Google reserves the right to rewrite your meta description. In fact, it happens very often — most meta descriptions you see in SERP have been created by Google and not by website owners.
As explained by John Mueller, meta descriptions are frequently adjusted to match even the slightest change in the user’s query. So, Google is actually doing you a favor. It shows different meta descriptions to different users and improves the relevance of your search snippets.
How to optimize
Even though meta descriptions are often rewritten by Google, there is still a fair share of original descriptions shown in SERP. Don’t leave it up to chance, don’t rely on Google to generate your meta description for you, because it might not. And if it doesn’t, you are left with a poorly optimized snippet and poor performance in search. Last but not least, a well-written and enticing meta description will likely increase your organic click-through rate.
Meta description length
There is no technical limit on the length of the meta description, but Google will generally show only the first 160 characters in your snippet. The advice is the same as with the title tag — make it however long you want, but make sure that your keywords and other important information are mentioned closer to the beginning.
You can check out your meta descriptions in WebSite Auditor. In your project, go to Site Structure > Site Audit > On-page, and see if any of your meta descriptions exceed recommended length.
Meta description keywords
There is more room in a meta description, so it’s ok to use more than one keyword. Current best practice is to use variations of the keyword you’ve placed in the title.
For example, if my title is How to Choose the Best Laptop for Work, then in my description, instead of saying laptop for work I’ll say business laptops. This way I’m covering more ground and there is a better chance of matching the user’s query exactly.
Even though you can use more keywords in the description, it is recommended not to use more than two or three. Keep it natural, don’t go out of your way to fit one more keyword where it doesn’t belong.
No quotation marks in meta description
When you use double quotation marks in the HTML of meta description, Google will cut this text at the quotation mark when displaying it in SERPs. Thus, it is better to remove all the alphanumeric characters from your meta descriptions.
By the way, to optimize your title tags and meta description, you can use competitive intelligence inside the SEO Content Editor in WebSite Auditor.
Go to Page Audit > Content Audit, paste the URL of the page you’re optimizing, and your target keyword. The tool will analyze your page alongside the top 10 competitors in search results. You will see how your target keyword is used in title tags and meta description of your competitors.
Besides, you can switch to the Content Editor and optimize the text right in the app. Here, you can write your title and meta description, and see what your meta snippet will look like in the search results.
3. Headings
Headings (H1-H2) are used to split your page into sections or chapters. Each heading is like a small title within the page. In HTML, a heading looks like this:
<h1>Your heading goes here</h1>While on the page they look something like this:
SEO value
The initial function of headings was to improve user experience. When the page is properly organized with headings, users have easier time navigating the content, skipping irrelevant chapters, and finding the important stuff. And if the users are happy — Google is happy.
Today, the role of headings is much more advanced. Since the introduction of passage indexing, Google can use certain sections of your page as a separate search result.
For example, let’s say you have written a guide about removing plaster from a brick wall. And you’ve used proper headings to split your guide into chapters: prep the room, remove plaster, brush the brick, wash the brick, and seal the brick. Now, if someone asks Google how to seal an exposed brick wall, Google will be able to take one of your chapters and present it as a separate search result.
Effectively, if your headings are optimized for search, each of them is eligible to become a separate search result. It’s basically like having pages within pages.
How to optimize
Here are the best practices to follow when optimizing headings:
Headings hierarchy
Traditionally, there is only one H1 heading per page and it’s the title of your page. It’s not the same as the title tag, though. The title tag is shown in search results, while the H1 heading is shown at the top of your content. One real difference is that there is no character limit for the H1 heading, so you can make it longer than your title tag. Or you can make them the same. Up to you.
Then there are H2 headings, which are used to split your content into chapters. Then H3 headings, which are used to split your chapters into sub-chapters. And you can follow the same logic as far as H6, but it’s generally not recommended going beyond H3-H4. The pages with many heading levels become too messy.
Headings keywords
Remember how each of your headings can be a separate search result? To make this possible, you have to write each heading as if it were a page title. Include a keyword that is relevant to the section of the page and phrase your heading in a query-like fashion.
For example, let’s go back to our brick wall guide. On the left, we’ve got headings that are not optimized for search. They work fine for navigation within the page, but they will never make it to SERP. Whereas on the right, we’ve got headings that are much more informative and can be used by Google to answer narrow search queries.
Parallel syntax
Sometimes Google can take your headings and make them into a list-type featured snippet. In order to make your headings eligible for a list snippet, they have to follow parallel syntax. It means all of your headings have to be phrased similarly, for example, all of them have to start with a verb, or all of them have to be noun phrases. It also helps if all of the same-level headings are of similar length and arranged in a numbered list:
4. Alt attribute
The alt text attribute is a part of an image tag, and it provides a description for an image. In HTML it may look like this:
<img src="url" alt="Your image description goes here">SEO value
Alt text plays a major role in image optimization. It makes your images accessible both to search engines (by telling them what a particular image means) and to people (by displaying an alternative text in case a particular image cannot be loaded or by helping screen readers convey images).
The main benefit in terms of search optimization is that optimized alt texts will help your images rank in image search. And although artificial intelligence has gotten pretty good at reading images, a written description helps bridge the remaining gap.
How to optimize
Here are the best practices to follow when optimizing alt texts:
Don’t leave alt tags empty
If you want to use this additional opportunity to rank higher by means of image optimization, then first of all, check for empty alt texts. In WebSite Auditor, go to Site Structure > Site Audit, and pay attention to the Images section.
Prioritize images
If you have thousands of images, you do not have to optimize each one (PHEW!). Pay attention to those that convey some useful data, not the ones that are used for entertainment and decoration. The useful images are images of products, screenshots of processes, your logo, infographics, diagrams, etc.
Add keywords to your alt attributes
Alt texts are one more opportunity to use your target keywords. And you know the drill — do not overuse them! Write the description that provides context to your content and use a keyword where it is suitable. Keyword-optimized images will work great in combination of the factors that search engines take into account when ranking pages.
To quickly check and optimize alt texts for your images, use Content Editor. Choose the Document mode for editing your content, and you’ll see your live page right in the app. If you click on any image, you’ll see a special field where you can insert alt attributes. Once your text is over, you can download it in the HTML format and then add it straight onto your web page.
5. Open Graph tags
Open Graph (OG) tags are placed in the <head> section of a page and allow any webpage to become a rich object in social networks. It was first introduced by Facebook in 2010 and further recognized by other major social media platforms (LinkedIn, Twitter, etc.)
In HTML, it can look like this:
<meta name="og:title" property="og:title" content="Your Open Graph Title Goes Here">SEO value
OG tags let you control how the information about your page is represented when shared via social channels. This possibility may help you enhance the performance of your links on social media, thus driving more click-throughs and increasing conversions.
How to optimize
There are quite a few Open Graph tags, I will give a few tips on the most important ones.
OG title
Yep, that’s another tag with the title of your page. So now you have three different titles: one is for search (title tag), one is for your website (H1), and the third one is for social networks (OG title). You can copy any of the other titles and keep things simple or you can come up with a separate title for social sharing.
Keep in mind that it should be between 60-90 characters, otherwise, it may be truncated.
OG type
Use this tag to describe what kind of object you are sharing: a website, post, video, company, etc. You can check the complete list here.
This tag is considered important when your page has the Like button. It may help to determine whether your content will appear in the Facebook user's interest section in case she or he "Likes" it.
In most cases, the type is "website", because you mostly share links to websites. If so, you do not need to specify the type in the code, it will be read as such by default.
OG description
This one is very similar to the meta description tag. However, it won't be displayed in SERPs, it will be shown as the summary when your page is shared. For this reason, there is no point in craftily sneaking your keywords into this particular description.
Your main task here is to make it speak to your potential audience and drive more clicks.
As for the length, it is considered to be a good practice to keep it about 200 characters.
OG image
An image will make your shareable link much more attractive. Some text over the image is acceptable, but try to place it in the middle of an image, as some platforms will trim the edges.
The recommended resolution for the OG image is 1200x627 pixels, the size — up to 5MB.
Once you are done with your OG meta tags, you can check what everything looks like with the help of Open Graph Object Debugger, a tool created by Facebook.
You can also check the presence of your OG tags with WebSite Auditor. For this, go to Site Structure> Pages, and switch to the default Open Graph and structured data markup tab. It will show if OG markup is available on all your pages, besides, it will collect OG titles, descriptions, and URLs for OG images.
Twitter cards
Twitter cards are very similar to OG tags (title, description, image, etc.), but they are used exclusively by Twitter. Though now tweets can exceed 140 characters, these cards are a nice extension that allows your tweet to stand out in the crowd of common text tweets.
There are a few types of twitter cards out there:
Summary card. Apart from the original tweet, there is a preview of your page's content, which is good for highlighting blog posts, products, news, etc.
Title: 70 chars
Description: 200 chars
Image: 120x120px, up to 1MB
Summary card with a large image. This card is similar to the previous one, but it contains a larger image. The image can also include some text that conveys the main point of your page's content, a call to action, or something really provoking to click.
Title: 70 chars
Description: 200 chars
Image: 280x150px, up to 1MB
Player cards. Such cards enable users to play videos or audios within a tweet.
Description: 200 chars
Video: H.264, baseline profile, level 3.0, up to 640 x 480 pixels at 30fps.
Audio: AAC, Low Complexity Profile
App cards. Such cards enable users to download mobile apps right from a tweet. They feature a name, a description, an icon, a rating, and a price.
Title: rendered from app ID
Description: 200 chars
Image: rendered from app ID
Note: Only one card-type per page is supported.
Note: Once you are ready with your Twitter card's elements, you will have to set the cards up and then validate them using a card validator.
6. Robots tag
A robots tag is an element in the HTML of a page that informs search engines which pages on your site should be indexed and which should not. Its functions are similar to robots.txt, but robots.txt gives suggestions. Whereas robots tags give instructions.
In HTML, it can look like this:
<meta name="robots" content="index, follow">SEO value
It is not that a robots tag may help you boost your rankings, but you can use it to save your rankings in case you have to block some pages from indexing.
For example, you can have some pages with rather thin content that you are not interested in being indexed in search, but which you would like to keep. In this case, you can just add a noindex tag for this page.
How to optimize
Here are the best practices to follow when optimizing robots tags:
Address bots by name
Use robots if you want to address all bots, but use individual bot names if you want to address a particular bot. Individual bot names are commonly used to ban malicious bots from crawling your website.
Know your parameters
Google understands and respects the following parameters in your robots tag:
Noindex — prevents search engines from indexing a page;
Nofollow — prevents the search engine from following ALL the links on the page (that's why it is different from the nofollow attribute that is applied on an individual URL level);
Follow — links on the page should be follow even if the page is noindex;
Noimageindex — images on this page will not be indexed;
Noarchive — prevents a cached copy of the page from appearing in search results;
None — the same as "noindex, nofollow".
Note that Google understands any combinations of lowercase and uppercase letters that you use for your robots tag parameters. For more details, check our detailed SEO cheat sheet of robots tags, directives and attributes; you will learn how to instruct Googlebot to crawl and index your website the way you want it.
7. Canonical tag
When you have a few pages with identical content, you can use a canonical tag to tell search engines which page should be prioritized.
In HTML, it may look like this:
<link href="URL" rel="canonical">SEO value
A canonical tag is important for SEO in two ways.
First of all, it saves you from having duplicate content. Duplicate content is not necessarily bad, but it might be suspicious. Google looks at your pages and they appear to be copies of some other pages — something fishy is going on.
Second, it prevents cannibalization. If you have two similar pages and both of them get indexed — they begin competing with each other in search results. That’s a drain both on your resources and your chances of ranking.
How to optimize
Launch WebSite Auditor, go to Site Structure > Site Audit, and pay attention to the On-page section, namely to Duplicate titles and Duplicate meta descriptions.
In case you have a few URLs with identical content, specify a <link rel="canonical"> element in the page's HTML.
Would you like to learn how else you can boost your website SEO? Take a look at the most complete guide 65+ Ways to Use WebSite Auditor
8. Schema markup
Last, but not least, is Schema markup. Schema is actually a whole system of HTML tags. They can be added to your code to tell search engines about all kinds of things: your contact details, product prices, recipe ingredients, and much more.
SEO value
Schema markup is used to point out specific pieces of information on a page and Google can use these pieces of information to create rich snippets. For example, if you apply Schema to a recipe page, Google will know the cooking time, the ingredients, the number of reviews, and even the calorie count of the recipe. And it will use the information to create these:
These are called rich snippets and, as you can see, they blow regular snippets out of the water. And Google has made more and more of these types of snippets available over the past few years. Today, we’ve got article, product, event, book, movie, and about a dozen other schemas that can enhance your search appearance.
How to optimize
Schema can get a bit complicated and it’s not something you can type out by hand. The best way to apply schema to a page is by using Structured Data Markup Helper. There, you can choose the type of Schema, enter your URL, and then simply select the text on the page and mark it up:
Once you are done, you can copy the code from the helper and onto your page.
HTML tags is the part of SEO you can control yourself
I’d say HTML tags are still pretty important for SEO, perhaps even more than before. And if I had to choose the most important HTML tags, I’d definitely go with headings and Schema markup. Google is changing SERP quite rapidly, making it more interactive, and adding new types of snippets. To participate in all that, to remain competitive in search, you’d have to start working on your headings and your rich results, like today.
