Techie BabajiLearn to Code. Build Real Skills.
HTML · Production

Meta Tags

Meta tags are notes you leave for browsers, search engines and social networks. Visitors never see them, but they decide how your page appears in Google and on WhatsApp.

Intermediate 5 min Lesson 17 of 22Follows the WHATWG HTML Living Standard.
Before you start:HTML Document Structure
0/22 in HTML
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Code example
  4. Step by step
  5. Real-world use
  6. Common mistakes
  7. Best practices
  8. Remember this
  9. Practice exercise
  10. Mini quiz
  11. Related topics
  12. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write the essential meta tags every page needs
  • Control how a page appears in search results
  • Add Open Graph tags for social sharing previews
  • Add a favicon and canonical URL

Explanation#

Essential: <meta charset="UTF-8"> and the viewport tag. Without these, text and mobile layout break.

Search: <title> and <meta name="description"> usually become the blue link and the grey text under it in Google. Keep the title under ~60 characters and the description under ~160.

<link rel="canonical"> tells search engines the “official” URL when the same page is reachable at several addresses.

Social: Open Graph tags (og:title, og:description, og:image) control the preview card on WhatsApp, Facebook and LinkedIn.

<meta name="robots" content="noindex"> keeps a page out of search results — useful for admin or thank-you pages.

Code example: A production-ready head#

HTMLA production-ready head Illustrative
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <title>Handmade Leather Wallets | Kaarigar Store</title>
  <meta name="description" content="Slim handmade leather wallets with free delivery across India. 1-year warranty.">
  <link rel="canonical" href="https://kaarigar.example/wallets">


  <!-- Social sharing -->
  <meta property="og:title" content="Handmade Leather Wallets">
  <meta property="og:description" content="Slim, durable, handmade in Jaipur.">
  <meta property="og:image" content="https://kaarigar.example/img/wallet-share.jpg">
  <meta property="og:url" content="https://kaarigar.example/wallets">
  <meta name="twitter:card" content="summary_large_image">


  <!-- Browser -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <meta name="theme-color" content="#7c3aed">
</head>
Expected output
Nothing visible on the page — but Google shows the title and description, and WhatsApp shows a card with the wallet image.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

  1. charset and viewport always come first.
  2. <title> follows the pattern “Page topic | Brand”.
  3. description is a short, persuasive summary — it is your advert in Google.
  4. canonical points to the one true URL for this page.
  5. og:* tags build the social preview card; the image should be about 1200 × 630 pixels.
  6. icon sets the favicon; theme-color tints the mobile browser bar.

Real-world use case#

When someone shares your product link in a WhatsApp group, the Open Graph tags decide whether it shows a nice image card or a plain URL.

Common mistakes#

Same title and description on every page

Google may ignore them or show the wrong page. Each page needs its own unique title and description.

Relative og:image URL

Social networks need an absolute URL starting with https://.

Using meta keywords

<meta name="keywords"> has been ignored by Google for over a decade. Spend the time on good titles and content.

Disabling zoom

user-scalable=no or maximum-scale=1 stops people with low vision from zooming. Leave zoom enabled.

Best practices#

  • Unique title (≤60 chars) and description (≤160 chars) per page
  • Always set canonical on pages with URL parameters
  • Use a 1200×630 og:image
  • Test previews with the Facebook Sharing Debugger or LinkedIn Post Inspector

Remember this#

Title + description = your shop sign in Google.

og: = “how I look when shared”.

charset + viewport: the two you never skip.

Practice exercise#

Your task: Write the <head> for a blog post called “10 Tips for Learning CSS”, including description, canonical and Open Graph title/image.

Need a hint?
Use absolute https:// URLs for canonical and og:image.
Show solution
HTML Illustrative
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>10 Tips for Learning CSS | My Blog</title>
  <meta name="description" content="Ten practical tips to learn CSS faster, from the box model to Flexbox and Grid.">
  <link rel="canonical" href="https://myblog.example/css-tips">
  <meta property="og:title" content="10 Tips for Learning CSS">
  <meta property="og:image" content="https://myblog.example/img/css-tips.png">
</head>

Mini quiz#

Meta Tags quizMultiple choice Question 1 of 3

Which tag controls the preview image when a link is shared on WhatsApp?

Score so far: 0/0

Want more? Practise all HTML MCQs · HTML interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.