HTML meta tags have been called one of the most important aspects of SEO for quite a long time. And you know what? This is still true.

Google’s John Mueller said that Google uses HTML meta tags to form SERP snippets, not for rankings. In this statement, he also says that a good search snippet makes people visit your page. So, meta tags are definitely what you must care about to get traffic.

But it isn’t just about SERP snippets. HTML tags specify entities and how they relate to one another. This is crucial for SEO success because they tell Google about the page’s content in the most digestible way. The same is true for HTML elements and attributes on the page, like H2s and image alt tags.

So, let’s dive in. Here are the top 14 meta tags and HTML elements for you to use on your site. Read carefully and borrow best practices.

Meta Tags

1. Title Tags

The title tag is your main and most important anchor.

The

Title tags are placed in the of your webpage and are meant to provide a clear and comprehensive idea of what the page is all about.

But do they have a major impact on rankings as they used to for many years?

Over the past few years, user behavior factors have often been discussed as logical proof of relevance and, thus, a ranking signal – even Google representatives admit their impact here and there.

The page’s title is still the first thing a searcher sees in SERPs, and it helps them decide if the page is likely to answer the search intent.

A well-written one may increase the number of clicks and traffic, which has at least some impact on rankings.

A simple experiment can also show that Google no longer needs your title tag to include an exact match keyword to determine the topic the page covers.

For instance, a couple of years ago, a Google search for [how to build brand awareness] would bring up two out of the top 5 results with titles exactly matching your query.

Today, though, we see a different picture:

Screenshot from search for [how to build brand awareness], Google, April 2024Not a single exact match.

And yet, not a single irrelevant result either; every single page given here explains how to build awareness, and the titles reflect that.

However, note that Google may rewrite title tags based on factors such as title length or relevance to the search query. To minimize the chance of rewriting, make sure your title is informative, user-friendly, reflects what the page is about, and matches the H1 tag on the page.

Example of a title tag that is more likely to be rewritten since it contains keyword stuffing and is not optimized for users but for search engines:

Instead, I would change it to:

By eliminating the repetition of “recipes” and removing the unnatural separator “|” you can make it read smoothly.

Remember that search engines are looking at the whole picture and tend to evaluate a page’s content as a whole, but the cover of a book still matters – especially when it comes to interaction with searchers.

Best Practices:

• Give each page a unique title that describes the page’s content concisely and accurately.
• Even though Google doesn’t have a limit on the title length, keep it up to 50-60 characters so they do not get truncated in the SERPs, and users can read the whole meaning. Remember that long titles are shortened to about 600-700px on the SERP.
• Put important keywords first, but in a natural manner, as if you write titles for your visitors in the first place and avoid keyword stuffing.
• Avoid using a brand name in the title as they are displayed above each search result in SERP. Including the brand name would be redundant. Instead, save space for including relevant keywords about which the page can rank.

Tip: Use Your Title To Attract Attention

The title tag is precious not only because it’s prime SERP real estate but also because it functions as a tab title in your web browser.

This can be used to attract a user’s attention. For example:

Screenshot from author, April 2024

This is the exact approach used by Facebook and LinkedIn to show you that you have notifications, and it can be used to good effect.

2. Meta Description Tags

Meta description also resides in the of a webpage and is commonly (though not always) displayed in a SERP snippet along with a title and page URL.

For example, this is the meta description for this article:

A nofollow attribute instructs not to follow any links on that page.

It is possible to combine multiple directives in the same meta tag like:

Also, it is possible to specify crawlers using the “name” attribute:

An example scenario when you would like to use the “noindex” directive is to block thin content from being indexed by search engines, since those are low-quality pages which can cause Google’s helpful content algorithm to apply a sitewide classifier to a website and decrease ranking.

Additionally, there may be “draft” or placeholder pages that need publishing before they are fully optimized and you wouldn’t want these pages to be considered when assessing the overall quality of your site.

In other cases, you may want certain pages to stay out of SERPs as they feature a special deal that is supposed to be accessible only by a direct link (e.g., from a newsletter) or landing pages for paid campaigns.

Additionally, if you have a sitewide search option or facets on ecommerce websites, Google recommends closing search results pages, which can be crawled indefinitely and waste the search bot’s resources on no unique content.

Another important rule to use for robots meta tag is “max-image-preview:large, max-snippet:-1, max-video-preview:-1” which you can combine like:

This will help you improve your website’s appearance on Google Discover.

This rule instructs Google to display large image previews, unlimited text snippets, and full-length video previews in search results, which can greatly help improve your CTR in Discover.

However, please note that Google may bypass this and still pull small thumbnails.

In the above cases, the discussed meta tag rules are very helpful, as they give you certain control over your site’s appearance to search engines.

Best Practices:

• Close unnecessary/unfinished pages with thin content that have little value and no intent to appear in the SERPs.
• Close pages that unreasonably waste crawl budget.
• Make sure carefully you don’t mistakenly restrict important pages from indexing.

4. Canonical Link Tag

The rel=”canonical” link tag is a way of telling search engines which version of a page you consider the main one and would like to be indexed by search engines and found by people.

It must have a meta tag that tells search engines which version of the page URL should be displayed in search result pages because webpages can have an unlimited number of accessible URLs which doesn’t change content.

For example, URLs with UTM tracking parameters like:https://www.example.com/?utm_source=daily-newsletter&utm_medium=email&utm_campaign=blast-01.

Google treats each URL with different parameters as unique, but they all serve the same content. So, how does Google know which one it should index and serve in SERPs? The answer is a canonical meta tag.

Google typically respects the canonical meta tag, but it’s a hint rather than a rule, meaning Google might still choose a different version.

For example, if you internally link to a webpage using a query parameter like https://www.example.com/?tracking=bottom-cta, Google may prefer to index that version instead of the canonical one, as internal linking is a strong signal for Google when determining canonical pages.

The selected URL gets crawled more frequently, while the others are being left behind.

Another benefit is that canonicalizing a page makes it easier to track performance stats associated with the content.

Using a rel=canonical for duplicate content helps Google consolidate all your efforts and pass the link signals from all the page’s versions to the preferred one.

That is where using the canonical tag may help you steer the SEO effort in one direction.

Best SEO Practices:

• Pages with similar content on the same subject.
• Duplicate pages available under multiple URLs.
• Versions of the same page with session IDs or other URL Parameters that do not affect the content.
• Use canonical tags for near-duplicate pages carefully: If the two pages connected by a canonical tag differ too much in content, the search engine will simply disregard the tag.

5. Social Media Meta Tags

Facebook initially introduced Open Graph to let you control how a page would look when shared on social media.

Twitter cards offer similar enhancements but are exclusive to X (Twitter).

Here are the main Open Graph tags:

1. og:title

Here, you put the title to which you want to be displayed when your page is linked.

2. og:url

Here, you put the title you want displayed when your page is linked. It usually has the same value as the canonical meta tag.

3. og:description

Your page’s description. Remember that Facebook will display only about 300 characters of description.

4. og:image

Here, you can put the URL of an image you want shown when your page is linked to.

Use the specific social media meta tags in order to boost how your links look to your following.

It’s not a huge tweak and doesn’t influence your rankings on the search engines.

However, by configuring how the links to your pages look, you can greatly boost your CTR and UX metrics.

Best Practices:

6. Viewport Meta Tag

The viewport meta tag is an HTML element used to control the layout and scaling of a webpage on different devices. It tells the browser how to adjust the page’s dimensions and scaling to match the screen size of the device being used.

This setting ensures that the width of the viewport matches the width of the device, making the page responsive. Theinitial-scale=1.0 ensures that the page loads at a 1:1 scale, meaning the content is not zoomed in or out when the page first loads.

Best Practices:

• Allowing users to zoom in and out is important for accessibility. Avoid usinguser-scalable=no, which disables zooming. If not set, Google Search Console will throw an error “viewport not set.”
• Ensure your CSS and HTML are responsive. The viewport meta tag is just one part of responsive design; your layout, images, and other elements should also adapt to different screen sizes.

7. Meta Charset

The meta charset meta tag is an HTML element that specifies the character encoding for the HTML do., which supports a wide range of characters from different languages.

It supports virtually all characters and symbols from all languages, ensuring that your content displays correctly across different platforms and languages.

8. Meta Refresh Tag

The only thing you should know about this tag is that you should never use it for implementing redirects. Instead, set up server side redirects for Google to pick it up right.

9. Keywords Meta Tag

The keywords meta tag is an HTML element used to specify a list of keywords relevant to the content of a web page.

But, back in 2009, Google announced that it doesn’t use this meta tag, because it was abused by website owners.

The second biggest search engine, Bing, also announced it no longer uses it back in 2014.

However, the most popular WordPress plugin, Yoast SEO, has a focus keyword setting that is a bit confusing.

That setting has nothing to do with the keyword meta tag but is used for analyzing your content and suggesting tips on how to improve it to better target the keyword you want.

10. Schema Markup

Schema markup is a specific technique for organizing the data on each of your web pages in a way that search engines recognize.

It’s a great feature to implement because it’s a real win-win.

Having a structured schema markup:

• It is a great boost to your UX.
• Carries huge SEO value.
• Improves content understanding.
• Helps get into SERP features.
• Increases chances of winning rich snippets.

SEO has grown far beyond just keywords and backlinks. Having relevant and properly implemented structured data on your pages is, in many cases, a must if you want to lure traffic and rank high.

For example, if your site is from an ecommerce niche, you will have no choice but to add product schema markup on your product pages. Otherwise, your snippet will just get lost.

The same is true for sites about cooking — search for any recipe, and you will see nothing but the Recipes SERP feature.

Screenshot of search for [beef wellington recipe], Google, April 2024Sure thing, you’d want your site to be there.

Note: Most of today’s popular content management systems, especially those related to ecommerce like Shopify, have relevant structured data built-in by default.

A “semantic web” is a “meaningful web,” where the focus shifts from keywords instances and backlinks alone to concepts behind them and relationships between those concepts.

Structured data markup is exactly what helps search engines not only read the content but also understand what certain words relate to.

The SERPs have evolved so much that you may not even need to click through the results to get an answer to your query.

But if one is about to click, a rich snippet – with a nice image, a 5-star rating, specified price range, stock status, operating hours, or whatever useful information – is very likely to catch an eye and attract more clicks than a plain-text result.

Assigning schema tags to certain page elements makes your SERP snippet rich in information that is helpful and appealing to users.

And, back to square one, user behavior factors like CTR and bounce rate affect how search engines rank your site.

Best SEO Practices:

• Study available schemas on schema.org.
• Create a map of your most important pages and decide on the concepts relevant to each.
• Implement the markup carefully (using Structured Data Markup Helper if needed).
• Thoroughly test the markup to make sure it isn’t misleading or added improperly.

HTML Elements

11. Heading Tags (H1-H6)

Heading tags are HTML tags used to identify different sections of a page’s content and act as mini-titles for different parts.

The usage of heading tags these days is a source of some debate.

While H2-H6 tags are considered less important than search engines, proper usage of H1 tags has been emphasized in many industry studies.

Although H2-H6 tags were initially used for UX purposes, the introduction of passage indexing in 2021 made them pretty valuable. Like, Google can index and rank a part of your page if the query matches with, say, the H3 heading and the paragraph it is related to.

Instead, we should consider that headings are crucial for text and content organization and should be taken seriously.

Utilizing the heading tags certainly adds up to the architecture of the content.

• For search engines, reading and understanding well-organized content is easier than crawling through structural issues.
• For users, headings are like anchors in a wall of text, navigating them through the page and making it easier to digest.

These factors raise the importance of careful optimization, where small details add up to the big SEO- and user-friendly picture and can lead to ranking increases.

Best Practices:

• Keep your headings relevant to the chunk of text they describe. Just because they aren’t a ranking factor doesn’t mean search engines don’t consider them.
• Always have your headings reflect the sentiment of the text they are placed over. Avoid headings like “Chapter 1… Chapter 2… Chapter 3…”.
• Don’t overuse the tags and the keywords in them. Keep it readable for users.

Should Your Title Tag & H1 Match?

According to Google’s recommendations, you are encouraged to match your page’s title and H1, changing the order slightly and changing it up here and there.

So, if you are struggling to come up with the perfect H1, simply use your title again.

12. HTML5 Semantic Tags

HTML5 semantic tags belong to the latest HTML standard and are necessary to help Google and other search engines better understand a page’s content.

Here’s how HTML5 tags look like in the page source code:

HTML5 Tags Examples

There are a lot of HTML5 tags widely used today by SEO pros. If you take a closer look at these tags, you’ll see that their names repeat the most common elements found on any page, such as videos, menus, etc.

So here they are (most of them):

• 
  
  — Defines a big and meaningful piece of content (an article, a forum post, etc.) that goes as a standalone unit.
• — Shows an embedded sound or audio stream.
• 
  
  — Describes a widget from which the user can obtain additional information or controls on-demand.
• — Defines a dialog box or a subwindow a user can interact with in case of necessity.
• — Embeds a piece of multimedia content like videos, sounds, or any external apps.
• 
  
• 
  
  — Defines the content of the header section of the page, document, or section.
• — Defines the most important and meaningful part of the page’s content or of the
  

  (

  can be placed inside the

  section).
• 
  
• — Defines a container for multiple image sources.
• — Shows alternative sources for the embedded media elements like
• 
  
  — Along with the

  , this element provides a summary visible to the user.
• — Embeds an SVG file in an HTML document.
• — Encodes dates and times (birthdays, events, meetings, etc.) in a machine-readable format.
• — Embeds video content in an HTML document without requiring any additional plugin to play a video.

Best SEO Practices:

The truth is that HTML5 tags replace neverending

Related Articles

0 51

Page Pros Transforms Global Digital Marketing Landscape; Wins CanadianSME Award for ‘Digital Business of the Year’

0 25

SEO Solutions: Drive Traffic, Improve Rankings, And Boost Conversions — KHTS Radio — Santa Clarita Radio

0 60

Clash of the SEO Titans (2024)

0 19

SEO Analyzer: Top Tested Tools