How to Add Meta Tags to Your Website HTML

What is the HTML head tag?

The HTML head tag is the container for metadata. It’s located between the HTML tag and 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 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 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:

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

Your options for what you can put in an open graph include:

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:

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. These other meta tags serve various purposes, from avoiding duplicate content issues to improving accessibility and user experience. Let's take a look at some of the most useful additional meta tags you might want to use on your website.

• 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.

How meta tags impact SEO and user experience

Meta tags do much more than just describe your content to search engines; they directly influence how users interact with your site before they even visit it. When used correctly, these behind-the-scenes elements can boost your visibility, drive more traffic, and create a better first impression.

Click-through rates in search results

Title tags and meta descriptions are opportunities to make a good impression when someone performs a Google search. A compelling, keyword-rich title paired with a clear, benefit-focused description can increase how many people click through to your site.

Even when your page ranks well, poor meta tags can result in lower click-through rates as users choose competitors with more appealing descriptions. Each click is a potential customer, so crafting attention-grabbing meta tags is worth the effort.

Crawlability and indexation

The robots meta tag directly tells search engines which pages to include in search results and which to ignore. Without proper instructions, search engines might waste time crawling irrelevant pages or miss your most important content entirely.

Canonical tags prevent duplicate content issues by identifying your preferred version of similar pages, focusing your ranking power instead of diluting it across multiple URLs.

These technical meta tags ensure search engines can efficiently process your site and rank your best content.

Social preview appearance

Open Graph tags determine how your content appears when shared on social platforms. Without these tags, social sites might pull random text or images that don't represent your content well.

Properly configured social meta tags give you control over which images, titles, and descriptions accompany your links on social media, making your content more visually appealing and clickable.

Common mistakes to avoid with meta tags

Many website owners rush through implementing meta tags or rely on outdated practices that can sabotage their SEO results. These technical mistakes can dramatically impact how search engines interpret your site and whether visitors click through to your content. Before you finalize your meta tag strategy, watch out for these three common mistakes:

Using duplicate titles or meta descriptions

Each page on your website has a unique purpose, so using identical meta tags across multiple pages confuses both users and search engines. Duplicate titles and descriptions make it difficult for search engines to understand what differentiates your pages and may cause them to choose which page to rank themselves.

Take the time to write unique, descriptive meta information for every page, highlighting what makes each one valuable and distinct from others on your site.

Stuffing keywords in meta tags

Cramming too many keywords into your meta tags in hopes of getting higher search rankings actually achieves the opposite effect. Search engines recognize this outdated tactic and may penalize your site for it.

More importantly, keyword-stuffed titles and descriptions read unnaturally to users, decreasing click-through rates. Instead, write clear, compelling meta tags that use your primary keywords naturally while accurately describing your page content.

Neglecting mobile and social sharing metadata

Many website owners optimize their meta tags for traditional search results but forget about how their content appears on mobile devices or when shared socially.

Mobile search results often display fewer characters, making concise, front-loaded meta tags essential. Similarly, failing to implement Open Graph and Twitter Card meta tags means missing opportunities to control how your content looks when shared.

Always preview how your meta tags appear across different platforms to ensure they're effective everywhere your audience might find you.

What to remember about meta tags

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.

---

Key Takeaways

• Meta tags are HTML snippets used by search engines to rank your web pages.
• Properly implemented meta tags can improve your site's visibility in search results, increase click-through rates, and control how your content appears on social media.
• While adding meta tags requires basic HTML knowledge, tools like plugins make implementation accessible even without technical expertise.

---