Meta Tags in SEO: The Ultimate Guide to On-Page Optimization

Reading Time: 11 minutes

Hello readers! How are you all? Today, in is blog we are going to discuss what is on-page optimization and what are the different types of meta tags used during on-page optimization. Just read this blog till the end so you can clear everything that is important in the journey of learning SEO. So, let’s get started.

What is On-Page Optimization?

On-page optimization is an SEO technique where various elements inside a website are optimized so that the website ranks well on Google. Let’s understand this by taking an example:

Imagine you own a shop (website) and want more customers (users) to visit. If your shop is clean, products are placed correctly, and a signboard clearly states what you sell, people will easily understand the purpose of your shop and make purchases.

In the case of a website, on-page SEO does the same job by optimizing the content and structure of the website so that it is recognized correctly (getting closer to the top position in the search results).

Why is On-Page Optimization Important?

Do you know why it is important? Let’s take a look below to understand its importance.

Importance	Description
Improves Google Ranking	It provides proper content and optimization to help websites rank higher.
Enhances User Experience	A fast-loading, easy-to-navigate website ensures users return.
Increases CTR (Click-Through Rate)	Well-written titles and meta descriptions attract more clicks from search results.
Boosts Leads & Sales.	Engaging content and good website speed convert visitors into customers.

Also Read: What is SEO? How Does It Work? Crawling, Indexing, and Ranking

Essential On-Page Optimization Factors

Here are the factors that are essential factors including the meta tags in SEO that are crucial for on-page optimization. Let’s learn them with examples.

1. Title Tag (<title>)

Also known as meta title, it defines the title of a webpage that is visible in search engines and browsers. It appears as a blue link in Google search results.

Example:

<title>Best SEO Guide for Beginners in 2026 – Skillwaala<title>

The best practice is to keep it short below 65 characters. Include the main/primary keyword. Avoid clickbait and make it useful for users.

2. Meta Description (<meta name=”description”>)

It is a short description that is displayed below the title tag in search results which gives users an idea about the page content.

Example:
When searching for “Best SEO Tips” on Google, the text shown below the title is the meta description in black color text. It will be shown like this:

<meta name=”description” content=”Learn the best SEO techniques to rank higher on Google in 2026. A complete guide for beginners and experts.”>

The best practice is to keep it below 155 characters. While writing, use keywords naturally and add a CTA (Call-to-Action) like “Read More” or “Start Learning.”

3. Meta Keywords (<meta name=”keywords”>)

It was previously used to define the keywords for SEO, but now Google ignores this tag. Google focuses more on the user intent of the content rather than meta keywords.

Example:

<meta name=”keywords” content=”SEO, Digital Marketing, Online Business, Search Engine Optimization”>

No best practices to follow as it is no longer beneficial. So avoid it.

Also Read: What is Keyword Research and How to Do it?

4. Meta Robots (<meta name=”robots”>)

They inform search engines whether a page should be indexed or not and whether its links should be followed or not.

Example:

<meta name=”robots” content=”index, follow”>

🔹 Values & Meaning:

Value	Meaning
index, follow	Google indexes the page and follows links
noindex, follow	The page is not indexed, but links are followed
index, nofollow	The page is indexed, but links are not followed
noindex, nofollow	Neither page nor links are indexed

Use For Private pages:  (noindex, nofollow)
Use For Duplicate pages: (noindex, follow)

5. Viewport Meta Tag (<meta name=”viewport”>)

It ensures websites are mobile-friendly. Without this, the website may appear zoomed-out or distorted on mobile screens.

Example:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Without this tag, websites may appear zoomed-out and with this tag, websites become responsive and mobile-friendly. The best practice is to include it in every webpage, especially for mobile optimization.

6. Canonical Tag (<link rel=”canonical”>)

It is one of the most important meta tags in SEO. This tag helps prevent duplicate content issues by telling the search engine like Google which page is the original version.

Example:

<link rel=”canonical” href=”https://example.com/original-page”>

Now, if the same content exists on multiple URLs like:

1. https://example.com/seo-guide
2. https://example.com/seo-guide?ref=blog

A canonical tag ensures Google recognizes the original version. It is important to use in E-commerce sites where products exist on multiple URLs. You must also use it in blogs if the same content is republished elsewhere.

7. Open Graph (OG) Tags (For Facebook, LinkedIn)

It enhances link previews when sharing pages on Facebook & LinkedIn.

Example:

<meta property=”og:title” content=”Best SEO Guide”>

<meta property=”og:description” content=”Learn SEO techniques to rank higher on Google.”>

<meta property=”og:image” content=”https://example.com/seo-guide.jpg”>

<meta property=”og:url” content=”https://example.com”>

You must use this tag if your website is frequently shared on Facebook or LinkedIn.

8. Twitter Card Meta Tags

It optimizes how your website appears when shared on Twitter.

Example:

<meta name=”twitter:card” content=”summary_large_image”>

<meta name=”twitter:title” content=”SEO Guide 2026″>

<meta name=”twitter:description” content=”Master SEO techniques to rank higher.”>

<meta name=”twitter:image” content=”https://example.com/seo-guide.jpg”>

You must use this tag if your content is frequently shared on Twitter.

9. Author Meta Tag (<meta name=”author”>)

It defines the author of a webpage.

Example:

<meta name=”author” content=”Krishan”>

This tag is useful for blogs and articles as it helps the user to know who has written it.

10. Hreflang Tag (<link rel=”alternate” hreflang=”x”>)

It is used when a website has multiple language versions like English, Hindi, or French. It ensures that the users see the correct language version. The hreflang tag tells Google which page to show for which language and country.

This tag is useful when a website is available in multiple languages, shows different content in different countries, or has different versions of the same language (like en-us and en-gb).

Example:

Imagine Skillwaala.com has two versions:

1. English version: https://skillwaala.com/en/seo-guide
2. Hindi version: https://skillwaala.com/hi/seo-guide

If someone from India searches in Hindi, they should see the Hindi page. If someone from the USA searches in English, they should see the English page.

code:

<link rel=”alternate” hreflang=”en” href=”https://skillwaala.com/en/seo-guide” />

<link rel=”alternate” hreflang=”hi” href=”https://skillwaala.com/hi/seo-guide” />

<link rel=”alternate” hreflang=”x-default” href=”https://skillwaala.com/” />

The best practice is to add the correct hreflang tag to every language version. Use the correct language and country code like en-us, fr-fr, hi-in. Always include “x-default” for users who don’t match any specific language. Self-referencing hreflang: Every page should also include its own hreflang tag. Place the hreflang tag inside the <head> section or in the XML sitemap.

Real-Life Example:

If Amazon has two websites:

• Amazon India: amazon.in
• Amazon USA: amazon.com

Google needs to know that Indian users should see amazon.in and US users should see amazon.com. And in real life, as Indian users we see Amazon.in site.

Amazon’s hreflang tag will look like this:

<link rel=”alternate” hreflang=”en-us” href=”https://www.amazon.com/” />

<link rel=”alternate” hreflang=”hi-in” href=”https://www.amazon.in/” />

<link rel=”alternate” hreflang=”x-default” href=”https://www.amazon.com/” />

11. Meta Keywords (<meta name=”keywords”>)

It was used earlier as an SEO practice to tell keywords to search engines like Google. But now it is not used and Google ignores it.

Example:

<meta name=”keywords” content=”SEO, Digital Marketing, Online Business, Search Engine Optimization”>

12. Meta Charset Tag

The meta charset tag tells the browser which character encoding to use for rendering an HTML page. If this tag is not included, characters may not display correctly, especially non-English text, emojis, and special symbols. Let’s understand its importance with real-life examples.

What is Character Encoding?

It is a way to assign a unique code to each letter, number, symbol, or emoji so that computers can understand and display them properly.

Example:
Imagine you are sending a WhatsApp message saying “नमस्ते 🌍”, but if the receiver’s phone cannot properly decode it, they might see gibberish (random) text like: ÌÉÉÎÇÇÉ ÍÉÑÉÈÇ! 🌍

This issue occurs due to wrong character encoding.

Solution: If <meta charset=”UTF-8″> is set in the HTML, the browser will automatically use the correct encoding so that the text is readable.

Why Should You Use UTF-8?

UTF-8 is a universal encoding standard that supports 65,000+ characters including:

• Hindi (हिन्दी)
• Arabic (العربية)
• Chinese (中文)
• Russian (Русский)
• Emojis (🚀🔥💖)
• Special Symbols (€ £ ¥ ☠)

Example:
Suppose you run an E-commerce website with product descriptions in multiple languages, such as:

• “बेहतरीन स्मार्टफोन 📱” (Hindi)
• “Excellent Smartphone📱” (English)
• “أفضل هاتف ذكي 📱” (Arabic)
• “最佳智能手机 📱” (Chinese)

If <meta charset=”UTF-8″> is not used, customers might see gibberish text or question marks (�) instead which negatively impacts user experience (UX) and SEO.

Which Charset is Best?

• UTF-8: The universal standard that is used by 90% of websites.
• UTF-16: Prefer this if you need heavy support for special characters and emojis.
• ISO-8859-1: An older encoding for Western European languages.

For modern websites, UTF-8 is the best choice as it supports nearly all languages and symbols worldwide.

13. GEO Meta Tag

It is an HTML meta tag that defines a website’s geographical location (latitude, longitude, or region). The tag helps search engines understand which location a website is targeting. However, Google does not use these tags anymore because it determines location from IP addresses, structured data, Google My Business (GMB), and hreflang tags instead.

Example of GEO Meta Tag Syntax:

<meta name=”geo.region” content=”IN-DL”> <!– Country and State Code –>

<meta name=”geo.placename” content=”New Delhi”> <!– City Name –>

<meta name=”geo.position” content=”28.6139;77.2090″> <!– Latitude;Longitude –>

<meta name=”ICBM” content=”28.6139, 77.2090″> <!– Same as geo.position –>

Explanation of above codes:

• geo.region → Country & state code (e.g., IN-DL for Delhi, India)
• geo.placename → City name
• geo.position → Latitude & Longitude
• ICBM → Old version of geo.position, no longer widely used

Who Should Use GEO Meta Tags?

1. Local Business Websites

• If you have a restaurant, hospital, gym, coaching center, or any physical store that serves only a specific location.
• Example: A website like Skillwaala.com targeting only students in Delhi.

2. City-Specific Service Providers

• Businesses like Packers & Movers, Real Estate Agencies, or Car Rentals that operate in one or two cities.
• Example: A real estate website showing properties only in Mumbai.

3. Local News Websites

• If your news website covers only one city or state.
• Example: A Bangalore-based news portal.

Who Should NOT Use GEO Meta Tags?

1. E-commerce Websites

If your website sells products across India or globally (e.g., Amazon, Flipkart), GEO tags can confuse search engines.

2. Multi-City Business Websites

If your company operates in many cities (e.g., Zomato, UrbanClap, OYO), use hreflang tags and Google My Business instead.

3. Blogs & Affiliate Websites

If your blog or affiliate site has a global audience, GEO tags are not useful.

What Happens If You Don’t Use GEO Meta Tags?

Nothing much! Since Google already ignores these tags, your website’s SEO won’t be affected. Google uses IP addresses, structured data, GMB, and hreflang tags to detect location.

So, GEO Meta Tags are not important for SEO today but can still be used for minor local business improvements.

Conclusion

This was a brief blog on different meta tags considered during the on-page optimization of a web page. If you have any doubts then give us a call or drop down a message on our official WhatsApp number. Our trainers will get in touch with you to clear your doubts. Till then continue your journey towards learning SEO!

Frequently Asked Questions

About The Author