If you think SEO is just about adding keywords to your pages, think again: HTML plays a big role in helping your pages rank. And thankfully, you don’t need to be a developer to leverage the power of HTML tags.
I’ve made a living doing SEO blog writing for a decade, but even I have more to learn. For this article, I interviewed the one and only Cindy Krum, founder and CEO of mobile SEO consultancy MobileMoxie. I also tapped HubSpot’s internal SEO experts, Killian Kelly and Victor Pan.
You won’t want to miss these insights, including the nine HTML tags you should include in every web page if you want it to rank well in Google.
Table of Contents
- What are HTML tags?
- HTML SEO Tips
- Best HTML Tags for SEO That You Need to Know
- HTML and SEO Go Hand in Hand
What are HTML tags?
HTML controls the content and structure of a website. HTML tags are pieces of code that are enclosed in angle brackets (“<” and “>”). Tags tell the web browser loading the HTML file (like Chrome, Firefox, and Safari) how to display content on a webpage.
For example, <p> is the HTML tag that creates a paragraph of text on the page. All of the paragraphs in this blog post are created with <p> tags. Another example is <br>, the HTML tag that tells the browser to display the line break HTML element.
Additionally, certain HTML tags tell search engines like Google what to crawl, what a web page is about, and how to index it. A line break tag is not one of these tags. However, the image tag is — it looks like this: <img src="image-source-url-here" alt="description of image here">. An image tag, as you might guess, adds an image to the page.
Specifically, the alt attribute is what’s important here. We use it to add image alt text, which, in addition to helping users with visual impairments, helps Google understand what an image looks like. This makes the alt attribute crucial for SEO.
So, what does HTML have to do with search engine optimization? Well, as SEO expert Cindy Krum explains: “HTML is like the core understanding for Google of what the page is about.”
For that reason, if you want Google to prioritize your web pages, it helps to speak its language: HTML.
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
HTML SEO Tips
Before we discuss the nine HTML tags crucial for SEO, here are two important tips.
Understanding HTML tags is better than relying too much on SEO tools.
You probably use a WYSIWYG editor to add content to your website. Instead of typing “<h2>” every time you want to create a heading, you probably just click the button in the editor that says “H2.”
If that’s the case, then why learn HTML tags at all?
“WYSIWYG editors and WordPress plugins like Yoast handle much of the heavy lifting in SEO, but mastering HTML tags really puts you in the driver‘s seat,” says Killian Kelly, SEO Content Strategist at HubSpot. “This becomes crucial when you’re customizing content or troubleshooting.”
For instance, if an SEO plugin isn’t doing what you expected, you can go straight to the source (the HTML code) and fix it yourself. Or if a page isn’t ranking well, or its title and H1 tags aren’t showing up properly, you can, again, go to the HTML code to diagnose.
“As you progress and possibly try to implement more complex features, a thorough understanding of HTML gives you the flexibility to make those adjustments smoothly,” Kelly adds.
Always do SEO in service of the end-user: your website visitor.
In the early days of the World Wide Web, sneaky SEO tactics such as stuffing keywords into the hidden meta keywords tag were rampant. These “black hat” SEOs were trying to serve robots: the ones that Google uses to crawl and index pages.
But these days, Google has caught on. The search engine’s algorithm and processes are sophisticated enough to catch any clever tactics people may devise to try to game the system. Don’t try it.
When implementing any SEO tactic, whether that’s writing a keyword-rich heading or deciding to deindex a page, it should ultimately be good for the humans visiting your website. So, for example, if a keyword feels forced or doesn’t relate to what you’re writing about, leave it out.
Best HTML Tags for SEO That You Need to Know
Now that you have a basic understanding of HTML, let’s dive into the nine HTML tags you should use to improve your on-page SEO.
1. Title
When you search on Google, the links in the SERPs are called “title links,” and the title tag greatly influences them. The title tag looks like this in a page’s source code: <title>Your Title Here</title>
What Google says about title tags
In September 2021, Google said that, while it sometimes uses a different method, it still relies on the title tag 87% of the time when deciding how to display the title link.
“Why not use title elements 100% of the time?” writes Danny Sullivan, public liaison for Google Search. “Since 2012, we've used text beyond title elements in cases where our systems determine the title element might not describe a page as well as it could.”
This tells us that our title tags must be descriptive and accurate if we want Google to use them.
To illustrate the point, let’s analyze the title tag of a real-life web page. I typed “what is mlops” into Google. One of the results is from the AWS blog.
When I click the title link to dig deeper, I see that its title link, title tag, and H1 (another tag we’ll discuss later) are all different.
The title tag, pictured below, reads, “What is MLOps? - Machine Learning Operations Explained - AWS”
The H1, pictured below, reads, “What is MLOps?”
And yet, Google has spun up its own title link based on both, which reads, “What is MLOps? - Machine Learning Operations Explained.” Notice that it removed the “AWS,” which Google has said it will do if other parts of the search results already show the brand name.
Best practices for title tags
- Keep it under 55 characters if possible. This prevents it from getting truncated in the SERPs.
- Include the keyword and hint at what’s inside. “You want to optimize the title tag for two things: It needs to convey what's in the page and include keywords,” says Krum.
Remember, if you fail to accurately convey what your web page is about in the title, Google may create a title of its own.
2. Meta description
A meta description tag describes what a web page is about. It looks like this: <meta name="description">
As a blogger, I’ve always heard that the most important thing about the meta description is that it must include the primary keyword. But Krum helped me realize it’s more nuanced than that.
“The keywords included in the description don‘t matter so much,” she explains. “It’s more about telling the person what they should expect when they land on the page so that they don't hit the back button because we know engagement on a page is important to Google.”
What Google says about meta descriptions
The meta description you set doesn’t always become the “snippet,” which is the short description you see in the SERP below.
Instead, Google writes, “Snippets are primarily created from the page content itself. However, Google sometimes uses the meta description HTML element if it might give users a more accurate description of the page than content taken directly from the page.”
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
Best practices for meta descriptions
While it’s good to have a meta description with your keyword in it — it’s not necessarily for Google’s sake. The search engine reads the rest of your web page to see what it’s about. The meta description really exists for the human visitors to your site.
“We don‘t want them to do what’s called ‘pogo sticking,’” says Krum, “which is to click through, realize they got to a page that they didn‘t expect or didn’t want, and then leave. So I always tell people, ‘You can't promise cute puppies unless you’re going to deliver cute puppies.’”
If a person reads “cute puppies” in your meta description, clicks through, and does not find cute puppies on your web page, they’ll bounce, which affects SEO.
Or worse — if your meta description fails to mention the cute puppies that are on your web page, and the searcher is looking for cute puppies, they won’t click through at all.
“If you have bad clickthrough, you might be deprioritized eventually,” says Krum.
So, when writing your meta description:
- Keep it under 160 characters. Experts and CMS tools recommend anywhere from 155-160 characters max. Any more than that will probably get truncated in search results if Google uses your meta description as the snippet.
- Make it actionable. Lead with a verb and concisely convey what the reader will learn from the web page.
I liked this meta description from Better Homes & Gardens for my Google search of “kitchen organization ideas.” It helps me see that, by reading the post, I’ll “stay organized, cut down on clutter, and create more storage.”
Plus, it includes the keyword, and even though Google has said meta descriptions are not a ranking factor, it’s still useful for me as a searcher.
- Use a SERP simulator. A free tool I often use is the Mangools Google SERP Simulator. It’s great for brainstorming and tweaking potential titles and meta descriptions because it shows you how it’ll look on a Google Search results page.
Type your meta description in the tool to see if it would get truncated as a snippet.
3. Headings
Headings provide structure and hierarchy to page content, from H1 (most important) through H6 (least important). Heading tags are denoted as <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
“Headings have a really long history in HTML,” says Krum. “Before we had CSS, people organized and styled pages with headings.”
Today, headings still play an important role in helping Google and your readers understand what a web page is about.
“From an SEO perspective, we focus mostly on one, two, three, and I sometimes go to four,” says Krum.
Best practices for headings
- Use headings in semantic order and nest them. H1 should be your web page’s main topic, and for a blog post, the H1 is also the blog post’s title. For example, this blog post’s title is an H1: “9 HTML SEO Tags That Impact Your Ranking. Cindy Krum's Tips.”
Then, your H2 should be a topic that is below or related to the H1's topic. For example, one of the H2s in this blog post is “What are HTML tags?".
- Include keywords. In the body of your webpage, H2 headings are particularly important for SEO. Typically, there is only one H1 (the title of the page), so H2s create structure in your body content. Place your keywords in these as often as possible without being spammy.
- Keeping the H1 and title tag the same is usually fine, but know when to differentiate them.
H1 is commonly conflated with the title tag — but they are different HTML tags. However, many website owners will use the same text in the title tag and the H1 tag, and many CMSs will treat them as the same.
For instance, HubSpot’s CMS will make the H1 and title tag the same for a blog post unless you click “Customize blog’s page title.”
So, when should you make the title tag different from the H1? I asked HubSpot’s SEO pro, Victor Pan.
“That’s a loaded question,” he replied.
Without getting into the nitty gritty, suffice it to say, it’s complicated. In the end, Pan advised: “In most cases, there's no need for further optimizations.” So you’re probably fine keeping your H1 and title tag the same.
However, here are some cases in which Pan says you might want to change your title tag to be different from your H1:
- “You have a page that is ranking for multiple search terms and you'd like to test if changing the title tag improves the ranking for a particular search term.”
- “Google is choosing to ignore both your title and H1 search results, and you‘d like to change it without changing the original ‘page title’ that’s in that H1.”
- “You don‘t like how your content shows up when a link is shared on social media sites (title too long, words get truncated in the wrong place, etc.), and the title is what’s being used to generate those preview snippets.”
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
4. Img alt text
The <img> tag includes the alt attribute, which is used for adding image alternative (alt) text. Alt text does three things:
- It tells Google what a photo looks like.
- It provides text for screen reader software to read aloud.
- It tells sighted folks what image was supposed to appear on the screen if the image fails to load.
That makes image alt tags important for SEO and accessibility.
The image alt tag looks like this in the page’s source code:
<img src="flowers.jpg" alt="Flowers in a vase">
What Google says about image alt text
Google writes, “The most important attribute when it comes to providing more metadata for an image is the alt text.” Did you see that? The most important. So don’t leave the alt text blank when you have images on your page!
Best practices for image alt text
- Don’t use the words “image” or “photo.” Because screen readers will announce “image” or “graphic” when they come across the <img> HTML tag, writing alt text that says, “Image of a blue coffee mug” is redundant. Instead, just write, “Blue coffee mug.”
- Add alt text to every image — unless it is there only for decoration. If the image doesn’t convey information, leave the alt text blank.
For example, Vanta includes alt text on most of its images but chose not to for this graphical element since it’s purely decorative:
- Include your keyword if it makes sense. As usual, it’s good to include your keyword for SEO purposes, but not at the cost of the user experience. And as always, don’t keyword-stuff.
- When writing alt text, imagine how you would briefly describe that image to someone who could not see it. Remember that, beyond SEO, image alt text helps people who cannot see the image on your web page. For that reason, spell out any relevant words in the photo that have not already been described in the body of the web page, such as an image of a sign with important information on it.
5. Image file names
To be clear, image file names are not technically HTML tags. However, I didn’t want to leave this piece out while we’re on the topic of images, especially since image file names matter for SEO.
“That‘s all been kind of de-emphasized in the past couple of years, so maybe it matters less,” clarifies Krum. “We don’t see Google talking about it very much. So, it's not the first thing we would fix.”
However, Krum still advises: “In the file naming, it‘s better, especially if it’s a unique image, to have a keyword-optimized file name.”
What Google says about image file names
While alt text is still the most important aspect of image metadata, Google says, “The filename can give Google very light clues about the subject matter of the image.”
Best practices
- When naming an image, keep it short and descriptive and include a keyword. So if you’re writing a blog post about standing desks, don’t upload an image with its original file name of “IMG_4087.jpg.” Instead, rename it to something like “wood-standing-desk.jpg.”
- Rename your image file with a keyword before uploading to your CMS. Once you upload, you generally can’t rename the file. So this needs to be done on your computer before you add the image to your CMS.
6. Anchor tag
In HTML, an anchor tag (<a>) creates hyperlinks. Hyperlinks are critical to SEO because they pass “link juice” — also known as SEO juice, link value, or link equity — to the page it links to.
It’s kind of like getting referred to a job versus applying cold. A good backlink tells Google, “Hey, I know this web page is legit,” helping the page appear more authoritative and, hopefully, rank higher in SERPs.
Internal linking, where you link to pages on your own site, matters for SEO too. Let’s say you’re writing a blog post about HTML and SEO. You might link to a related post on your blog, say, one about how to use internal links. In fact, that’s exactly what I did at the beginning of this paragraph.
What Google says about hyperlinks
Google advises: “Every page you care about should have a link from at least one other page on your site.”
It also adds: “The better your anchor text, the easier it is for people to navigate your site and for Google to understand what the page you're linking to is about.”
Best practices for anchor tags
- Write descriptive anchor text (e.g., not “click here”): Google reads the anchor text to help determine what the link is about. So instead of saying, “To learn more about the anchor tag, click here,” it’s better to write, “Learn more about the anchor tag.”
- Make sure you link internally to your most important pages. If there’s a page or a blog post you really want to rank, find other high-quality, related pages on your website and link to that page from each one.
7. "Sponsored" and "nofollow" values
Sponsored and nofollow “tags” are technically values for the “rel” attribute in the anchor tag (<a>). You can see them in bold in the HTML code below:
<a href="https://www.hubspot.com" rel="nofollow sponsored">HubSpot</a>
- Rel="sponsored" tells Google that a link was paid for.
- Rel="nofollow" tells Google not to crawl that link, either because you can’t vouch for the quality or perhaps because it’s a competitor and you don’t want to pass link juice to it.
What Google says about "sponsored" and "nofollow"
"Nofollow" has been around much longer than "sponsored," but now, Google prefers the latter for paid links, stating: “The nofollow attribute was previously recommended for these types of links and is still an acceptable way to flag them, though sponsored is preferred.”
Best Practices for "sponsored" and "nofollow"
Use "sponsored" or "nofollow" anytime you:
- Are paid to place a link (such as writing a sponsored post for a brand)
- Are using affiliate links
Remember, Google prefers the "sponsored" attribute for affiliate links, but in reality, it allows you to use "nofollow" alone — or both.
Personally, I prefer to use both "sponsored" and "nofollow" for affiliate links on my websites and haven’t noticed any negative SEO effects.
But if you’re curious, here are some big brands I analyzed and how they use these attributes:
Good Housekeeping marks its affiliate links with "nofollow" only.
Wirecutter marks its affiliate links with "sponsored" only.
And Travel + Leisure uses both:
8. Robots meta
Use a robots meta tag to control if and how your web page appears in search results. Now, you may be wondering, why would you not want your page to rank? Some examples include:
- A website that’s still under construction and isn’t ready for public viewing
- An offer page. I can’t tell you how many times I’ve accidentally stumbled upon gated content (like ebooks) in search results.
- A paid search landing page that people are only supposed to view after clicking one of your ads
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
In my 14+ years of blogging, I’ve never once thought about the robots meta tag, so I nearly left it off of this list.
“This one's really important, actually,” says Krum, “because Google kind of changed their guidelines. It used to be that robots text files that are stored at the root … were the rule, and on-page meta robots were a suggestion. And they reversed that after mobile-first indexing. And now, they take on-page meta robots as the rule and robots text file as a suggestion.”
What Google says about robots meta tags
In its documentation, Google explains, “The robots meta tag lets you use a granular, page-specific approach to controlling how an individual HTML page should be indexed and served to users in Google Search results.”
Pro tip: Do not confuse the robots meta tag (<meta name="robots">) with the robots.txt file — they are two different things.
|
Robots meta tag |
Robots.txt file |
|
Requires editing the <head> section of an individual web page |
Requires root access to your server to edit the robots.txt file |
|
Has a page-specific effect |
Has a site-wide effect |
|
Is viewed by Google as the rule when it determines what to crawl and index |
Is viewed by Google as a suggestion when it determines what to crawl and index |
|
Fairly easy and less technical to implement |
More complex and technical to implement |
Best practices for robots meta tags
To wrap my brain around this new-to-me tag, I, once again, asked Pan.
“Search engines default to indexing pages and following links on the page,” he explains. He gave me the following guidance on when and how to use the robots meta tag:
- Use "noindex, nofollow" when you:
- Don’t want your web page to appear in search results
- Don’t want to pass “link juice” to any pages linked to on that web page
- Don’t want any of those linked pages to appear in search results
Pan says it’s “a very common treatment for paid search landing pages you don't want suddenly ranking in organic search results.”
By using the following HTML code, you’re telling Google not to index your page nor follow any of the links on it.
Code snippet: <meta name="robots" content="noindex, nofollow">
- Use "noindex" when you:
- Don’t want your web page to appear in search results
- Do want to pass link juice to the pages linked to on that web page
Pan adds, “In practice, when a page gets removed from subsequent visits by a search engine, this basically behaves like 'noindex, nofollow.'"
Code snippet: <meta name="robots" content="noindex">
- Use "nofollow" when you:
- Do want your web page to appear in search results
- Don’t want to pass link juice to the pages linked to on that web page
“This is more rare out in the wild,” says Pan, “but a treatment an affiliate website may do instead of inlinking specific links with 'nofollow' link attributes.”
The "nofollow" value of a robots meta tag, then, differs from the "nofollow" tag we talked about earlier in this way: The robots meta tag "nofollow" tells Google not to follow any of the links on that web page. The "nofollow" tag, however, applies to an individual link.
Code snippet: <meta name="robots" content="nofollow">
9. Canonical
Before we ended our call, Krum emphasized the importance of the canonical tag, which tells Google which version of a page is the preferred one. But we didn’t have time to delve into why. So I asked HubSpot’s Killian Kelly for clarification.
“Canonical tags are essential for managing content that appears in multiple locations, especially when it’s similar or duplicated,” Kelly explains.
For example, when HubSpot does split testing (testing the performance of different variations of the same page), the duplicated page typically has the rel="canonical" tag pointing to the original.
“This setup identifies the original page as the main one, guiding search engines on which page to prioritize,” says Kelly.
But what if you don’t do split testing and don’t intend to have duplicate content? According to Pan, it’s still good to use a canonical tag on every page. Failure to do so can have downsides, especially for websites with lots of pages.
As Pan explains: “The potential negative consequence for larger websites is that a parameterized variant of the URL or a scraper website which likes to copy your website's content may sometimes be chosen as the canonical version in search results without it.”
Personally, I’ve never intentionally used a canonical tag. But when I looked back at my old WordPress blog posts, I discovered that the Yoast plugin had automatically set canonical URLs for me.
Best practices for the canonical tag
The biggest lesson I learned while researching canonical tags is this relatively new development: For syndicated content, use the robots meta tag "noindex" — not the canonical tag. While canonical tags have been widely used to prevent duplication when a publishing partner republished original content on their website, that’s no longer a best practice.
What Google says about canonical tags
In 2023, Google stopped recommending canonical tags for syndicated content. Instead, it advises publishers to block syndicated content using the robots meta tag (aren’t you glad you learned about that HTML tag earlier?).
HTML and SEO Go Hand in Hand
Blogging is a huge passion of mine as well as my career. When I first started learning how to write blog posts that ranked well in Google, learning SEO and HTML tags gave me a huge advantage over other bloggers who didn’t want to bother with the more technical aspects.
I hope this article helps you realize that HTML is not some big, scary thing but rather a tool you can use to get more eyes on the content you work so hard on. There are other levers you can (and should) pull as well, such as improving website speed.
And remember, SEO is always changing. I thought I knew a lot about HTML tags, but while writing this article, I realized some of my SEO tactics were outdated.
To stay up to date, follow SEO experts like Cindy Krum on X (formerly Twitter), read blogs (the HubSpot Website blog is my shameless plug), and, of course, go straight to the source: Google Search documentation.
HubSpot's Free Website Builder
Create and customize your own business website with an easy drag-and-drop website builder.
- Build a website without any coding skills.
- Pre-built themes and templates.
- Built-in marketing tools and features.
- And more!
![19 Website Speed Optimization Strategies for 2024 [New Data]](https://knowledge.hubspot.com/hubfs/how-to-optimize-website-speed-1-20241203-1468927.webp)
