Skip to main content

Hey there! Free trials are available for Standard and Essentials plans. Start for free today.

How to add Meta Tags to the Website Head: Metadata in HTML

Metadata is the unsung hero of website SEO. Review this guide to make sure you’re adding meta tags in HTML the right way.

Meta tags, also known as metadata, are HTML snippets used in web development to describe the content on a web page. Meta tags don't appear on the pages but instead exist within the website's source code, also known as the HTML code, located in the website head. These tags provide search engines with descriptions about the page content to help them determine what the page is about and deliver the most relevant pages to search engine users.

Meta tags are used in HTML at the head of the page, making them only visible to search engines and those who know how to look at website source code. Metadata tells search engines about the data on a website to help your content rank on popular search engines like Google. Unfortunately, adding meta tags can be difficult if you don't know how to create website metadata or code HTML.

What is the HTML Head tag?

The HTML head tag is the container for metadata. It’s located between the HTML <html> tag and Body <body> tags. This is the location you put all of your meta tags in HTML to define the title, styles, crips, and other information. This area of the page is not displayed in the web browser. Instead, search engines use the information to determine what a page is about, including its title, content, keywords, and more. Browsers use information in the head to render the website page correctly. Unlike the head, the body element is displayed on the page when loaded in a browser, so it should not contain any metadata.

Where is the HTML Head?

The HTML head is located between the HTML tag and the body tag. It's typically much smaller than the body tag because its main job is to contain metadata. You can use developer tools in your web browser to find the HTML head of any website page.

What is Website Metadata?

Meta tags in HTML serve as important pieces of information for search engines. . They are used to describe HTML elements and communicate the content of a website for search engines. Website metadata includes page titles, descriptions, keywords, and more to help search engines crawl and rank web pages. Search engines interpret data and information on website pages to determine how relevant it is to a user's search query. Keywords within the body and backlinks to the page play essential roles, but metadata explains the general purpose of a page to allow it to rank for keywords.

Meta tags can improve SEO efforts to help search engines understand the purpose of a page. However, not all meta tags are designed for SEO purposes.

You can add metadata to the head of a website in a few different ways. First, you'll need access to the head section of the HTML file. You can download it and edit it with a text editor or create a new file. You may also choose to add or edit the file in the cPanel File Manager. Once you have the HTML file, locate the head section at the top. Depending on how the page was developed, you may already have a title tag and other types of meta tags.

If you're not a website developer, you may be able to use a WordPress plugin like SEOPress or Yoast to easily add metatags to your web pages.

Title tag

The title tag is what's displayed on search engines results pages (SERPs) as the title of your web page. Every page on your website should have a unique title. The title is not to be confused with the H1 tag that exists within the body of the page and can serve as a title for the on-page content. Title tags should be around 50-60 characters to avoid being truncated on search engines.

You can add the title to a webpage by finding the <title> tag within the source code and entering the words. When you're finished adding your title tag, it should look something like this:

<title> Title goes here</title>

Title tags are important because they help search engines determine what a web page is about, ultimately helping them decide whether or not to rank your page for a particular query. Title tags also appear in browser tabs to help you navigate your browser.

Effective title tags should use your target keywords to help search engines rank the page. However, they must also entice users to click to read your articles or web pages. High-priority keywords should appear as close to the beginning of the title as possible since you don't have a lot of space to work with. Additionally, every page should have a unique title to avoid confusing search engines and their users.

Meta description tag

A meta description is the short text summary that appears on SERPs below the title. Your pages should all have unique and accurate descriptions of the content on them. A meta description should be between 150 and 160 characters to avoid being truncated in search results. Unfortunately, you can't always have a say in what your meta description is. Even if you write them yourself, search engines may still decide you provided information that wasn't relevant and choose to rewrite your meta descriptions or display the wrong content from the page.

To add the meta description tag to your website page, locate the <meta name=" description" content= "Content goes here." > section of the HTML code.

A meta description is an important piece of information for search engines and users. Using an effective meta description can promote more clicks to your website by setting clear expectations for what users can expect to find.

Including target keywords in your meta description can help people discover your content more easily while telling search engines what the page is about. You can also explain the purpose of the page and what customers will find once they click. You can also perform A/B testing on your meta descriptions to see which versions get more clicks, help you rank higher, and ultimately bring in more website traffic. Learn how to write an effective description by checking out these meta description examples.

Meta robots tag

The meta robots tag tells search engines how to crawl your website, letting them know which pages you want to rank and which you don't. There are many purposes for these tags, so you must use them correctly if you want to rank certain pages and ignore others.

Robots tags tell search engines whether or not to index or follow a page by labeling them as INDEX and FOLLOW or NOINDEX and NOFOLLOW. When you label a page as INDEX, you tell search engines you want it to show up in SERPs. Meanwhile, when you tell them to FOLLOW a page, it means you want to pass PageRank to a specific page. A NOFOLLOW tag is not followed, so it can't transfer page rank to any other type of webpage. These pages can still appear in Google's index if another site links to them without using the NOFOLLOW tag. Other search engines may have different rules for these robot tags.

Robot tags can look something like this:

<meta name= “robots” content=noindex, nofollow”>
<meta name= “robots” content=noindex, follow”>
<meta name= “robots” content=index, nofollow”>

Ultimately, which tags you use will depend on your goals for a specific page. The first line in our example tells search engines to ignore the page and links within the page, making it ultimately useless for referral traffic. The second example tells search engines to ignore the page but follow all the hyperlinks on that page, and the third example tells search engines to index the page but not to follow the hyperlinks on the page that may go to other pages.

Each of your pages should have a meta robots tag, but only one tag per page. You would not use all three of your options on the same page.

Open graph tag

Open graph tags are used for sharing messages on social media platforms like Facebook. If you want to pass information from a blog like the featured image and a snippet, you will use the open graph tag. These tags effectively tell social media platforms the type of information you want to display when you share a link from your website.

You've likely already seen some open graph tags in action. Any time you share a link from a website on social media, it automatically generates a preview. This preview is created through the open graph tag. There are many open graph tags you can choose from, but they will appear in the head HTML as

<meta property=”og:xx”>

Your options for what you can put in an open graph include:
<meta property=”og:title”>
<meta property=”og:description”>
<meta property=”og:type”>
<meta property=”og:image”>
<meta property=”og:url”>
<meta property=”og:site_name”>

The title defines the webpage and its subject matter. You can make your open graph title the same as your meta title or change it depending on your social media audience. Meanwhile, the description acts similarly to a meta description, while the type defines the type of content. For example, the type could refer to a song, pdf, or image.

Additionally, the open graph image tag tells social media platforms which image you want to pull in from the web page to serve as the post's image, and the URL defines the URL of the page you're sharing. If you want to display the name of your website, you can do so using the site name tag, but it's not usually an important property for social media users.

Meta keyword tag

The meta keyword tag is used to describe the keywords you want to rank for. However, most search engines ignore this tag, so it's becoming obsolete every year. In fact, if you abuse the meta keyword tag, you could get a penalty, preventing you from ranking for your target keywords. When used correctly, this tag could inform search engines what your content is about by highlighting important keywords found on your page. Unfortunately, Google does not use the meta keyword tag, but other search engines might, so it's worth considering if you want to improve your SEO using search engines other than Google.

At the very least, using the meta keyword tag can help you keep track of which keywords you're targeting on different website pages. The tag looks something like this:
<meta name+" keywords" content=" keywords go here"/>

Since the top search engines no longer use the meta keyword tag as a ranking factor, there's no need to waste your time or add more code that can slow down your website. Instead, you can skip this one and focus on meta tags that can help improve rankings and user experience.

Other HTML Meta Tags

There are many other types of meta tags that can be used in the head or body of a website, including:

  • Canonical tag: The canonical tag is used to indicate if there is an original version of a webpage to tell search engines that one version is the main page and the others shouldn't be indexed. This can prevent you from competing with yourself for rankings and prevent duplicate content from becoming a problem.
  • Alternative text tag: The alt-text tag helps search engines read images through text since they can't tell what an image looks like. When writing alt-text, always use relevant descriptions without keyword stuffing. Alt-text is also important for screen readers to improve website accessibility, so it must make sense to people.
  • Header tags: Header tags are used to change font sizes and structure your content. These tags range from H1 (the largest) to H6 (the smallest) and can help readers scan content.
  • Language tags: The language meta tag tells search engines what language the content is in and identifies the country to improve search results based on language and location.
  • Author tags: Author tags show the author of the content, which can help satisfy Google's Expertise, Authoritativeness, and Trustworthiness (EAT) requirement for ranking content.
  • Publication date: Publication date can be used on blogs to help users understand how relevant and recent the information is. Learn more about metadata for blog posts.
  • Style: The style tag contains CSS code to define how the HTML elements should appear on browsers.

You must weigh the pros and cons of each when considering which tags to use. More code on your website can negatively affect load speed, preventing your website from loading as fast as possible. Page speed defines the amount of time it takes for a page on your website to load. The longer it takes for a page to load, the more likely users will drop off, ultimately losing your web traffic and the opportunity to make a sale. When assessing your page speed, you must consider desktops and mobile device users. Individuals using their mobile devices to visit websites are even less patient, so your mobile page speed should be a top priority to keep users interested in reading your content.

Page speed is also an important ranking factor because it improves user experience. The faster a web page loads, the more likely a user will have a good experience, allowing search engines to deliver better results for users. Page speed also affects your revenue because a page must load quickly to keep your potential customers engaged on the website, allowing them to learn everything they can before converting.

While meta tags are also essential for search engines, it's always best to consider the ones you need the most. We've discussed the top meta tags to use on your website to improve SEO, but adding more code than that to your website can affect page speed and have a direct impact on your rankings.

Why Adding HTML Meta Data in the Website Head is Important

Metadata can only be used in the website head. If you put them in the body section of the page, they will appear when rendered on a browser, ultimately affecting user experience and preventing search engines from being able to use the data effectively to rank your website pages. If your markup is invalid, browsers might not render your pages correctly, so it's always best to keep tags in the head where they're supposed to be since that's the only place search engines will look for them.

Website Metadata Final Notes

Metadata can help take your SEO to the next level by allowing you to write your own titles and descriptions and tell search engines how to interact with and understand your website. Unfortunately, working with HTML code can be difficult if you're not a website developer. Luckily, that's not your only option. If you have a WordPress website, you can use SEO plugins to make adding tags easy, or you can use Mailchimp marketing services. When you build a website with Mailchimp, you can write your own meta tags for your website, including meta titles and meta descriptions, to help you rank on search engines and get more website traffic.

Share This Article