HTML Meta Tag

When you visit a website, you see images, text, and videos but beneath that visual layer is a set of instructions specifically designed for machines. This is done with the help of HTML Meta Tags.

Table of Contents

HTML Meta Tags Explained

The HTML Meta tag is an empty element, meaning it does not have a closing tag. It lives exclusively inside the <head> section of your HTML document. Its primary job is to define “metadata”, data about data.

While your friends won’t see these tags on the actual page, browsers use them to figure out how to display the page, and search engine bots use them to index your site properly. Let’s look at the basic structure:

Placement: Always inside the <head> element.
Content: Usually consists of name-value pairs.
Visibility: Hidden from the front-end user interface.

Common attributes used within these tags include:

Charset: Tells the browser which character encoding to use (usually UTF-8).
Name: Specifies the type of metadata (like description or keywords).
Content: Gives the actual value or text for that name.

Why are Meta Tags Important for SEO?

You might have heard the term “SEO” or Search Engine Optimisation. When we talk about Meta tags for SEO, we are referring to the specific tags that help Google or Bing rank your page.

Search engines use the description meta tag to create the little snippet of text you see under a website’s title in search results. If you don’t provide an HTML meta tag for the description, Google will just grab random text from your page, which might not look very professional.

Key SEO Benefits:

Better Click-Through Rates: A clear description invites people to click.
Accurate Indexing: Keywords and descriptions tell bots exactly what your page is about.
Mobile Ranking: The viewport tag tells Google your site is mobile-friendly.

Common Types of HTML Meta Tags

There are several variations of the HTML meta tag, each serving a unique purpose. Here is a breakdown of the ones you will use most often.

1. Character Encoding

This is arguably the most important HTML meta tag. It ensures your website can display almost any character or symbol from any language in the world without turning them into weird blocks or question marks.

2. The Description Tag

This tag provides a brief summary of your page. For effective HTML Meta tags for SEO, keep this under 160 characters.

3. The Keywords Tag

While not as powerful as it used to be, some search engines still look at this HTML meta tag to find relevant topics associated with your site.

4. Author and Viewport

Author: Lets you claim credit for your work.
Viewport: This is the magic tag that makes websites look good on tablets and phones. It sets the width of the page to follow the screen-width of the device.

Using the HTML Meta Tag to Redirect

Sometimes, you want to move a visitor from an old page to a new one automatically. You can use a specific type of Meta tag to redirect the browser after a certain number of seconds.

This is known as a “Meta Refresh.” While it is not always the best way for SEO (permanent 301 redirects are usually better), it is a very handy trick for beginners to know.

Example of an Meta tag to redirect:

In this example, the “5” represents the number of seconds the browser waits before jumping to the new URL.

Meta Tag Attributes

Here’s a quick overview of important meta tag attributes with their purpose and examples:

Attribute	Purpose	Example
Charset	Defines character encoding.	charset=”UTF-8″
Name=”description”	Summarises page content for SEO.	content=”A guide to HTML”
Name=”viewport”	Controls layout on mobile browsers.	content=”width=device-width”
Http-equiv=”refresh”	Used as an Meta tag to redirect.	content=”30;url=home.html”
Name=”author”	Names the creator of the page.	content=”PW Skills”

How to Use HTML Meta Tags?

To get the most out of your code, follow these simple rules when implementing an HTML meta tag:

Don’t Overstuff Keywords: When using html meta tags, avoid listing too many keywords. This can look like spam to search engines.
Unique Descriptions: Every page on your website should have a different description meta tag.
Always Include Viewport: In today’s world, everyone uses phones. Never forget the viewport HTML meta tag.
Keep it in the Head: Ensure all your html meta tags are placed between <head> and </head>. If you put them in the <body>, they won’t work correctly.

FAQs

Does every page need an HTML meta tag for description?

Yes. While the page will still work without it, having a unique description helps your site look better in search results and is a key part for SEO.

What happens if I forget the charset HTML meta tag?

Your website might display strange symbols instead of apostrophes, quotes, or foreign characters. Using UTF-8 ensures everything stays readable.

Is the Meta tag to redirect good for SEO?

It is useful for quick jumps, but search engines prefer permanent redirects. Use it sparingly for things like "Thank you" pages that lead back to a home screen.

Can I see another website's Meta tags?

You certainly can! Right-click on any webpage and select "View Page Source." Look near the top inside the section to see how they use the HTML meta tag.

How many Meta tags in HTML should I use?

There is no set number, but at a minimum, you should have charset, viewport, and description tags on every single page you build.