Meta Tags
charset, description, viewport, SEO Examples

Meta Tags: The Silent Signals Behind Every Smart Web Page

Meta tags don’t show up on your webpage, but they speak volumes to search engines, browsers, and social platforms. They're your site’s introduction, translator, and rulebook — all hidden in the <head>.

1. What Are Meta Tags?

Meta tags provide metadata — information about your page — to search engines and browsers. They help define character encoding, page descriptions, viewport behavior, and more.

2. The meta charset Tag

This tag defines the character encoding — the set of characters your page supports. Without it, browsers may misinterpret text like “café” or “naïve”.

<meta charset="UTF-8">

[ Tells the browser: This page uses UTF-8, which supports nearly all characters. ]

Best Practice: Always place this at the very top of your <head> for fast interpretation.

3. The meta name="description" Tag

This tag tells search engines what your page is about. It often shows up in search result snippets.

<meta name="description" content="Learn fun facts about apples, bananas, and cherries — and which fruit wins the crown.">

[ Appears as the description beneath the link in Google Search. ]

Tips:

  • Keep it under 160 characters
  • Write like a teaser — informative but intriguing
  • Include important keywords naturally

4. The meta name="viewport" Tag

This tag controls how your webpage scales on different screen sizes — especially crucial for mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1">

[ Ensures your layout adapts to the width of the user’s device. ]

Without this tag, mobile visitors might see your page zoomed out and unreadable.

5. Other Common Meta Tags

| Tag | Purpose | |-----|---------| | <meta name="author"> | Sets the content author | | <meta name="robots"> | Tells search bots how to crawl/index | | <meta property="og:title"> | Open Graph title for social media sharing | | <meta http-equiv="refresh"> | Automatically refreshes or redirects a page | 
<meta name="author" content="Fruit Team">
<meta name="robots" content="index, follow">

6. A Sample <head> with Meta Tags

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fruit Catalog: Apple, Banana, Cherry</title>
  <meta name="description" content="Explore sweet and healthy fruit facts: apples, bananas, cherries, and more!">
</head>

[ Search engines and browsers use this metadata to index and display your page ]

Summary

Meta tags shape how your webpage is understood — by bots, browsers, and beyond. Today you learned:

  • How to define character encoding with meta charset
  • Why meta name="description" affects SEO visibility
  • How meta viewport ensures mobile responsiveness
  • Which other meta tags can support SEO, sharing, and control

What’s Next?

In the next tutorial, we’ll dive into building a complete <head> section for a real-world HTML page — with SEO, accessibility, and social sharing in mind.

QUIZ

Question 1:What does the tag specify in an HTML document?

Question 2:The meta description tag affects how a page appears in search engine results.

Question 3:Which of the following attributes are commonly used in meta tags for SEO and responsiveness?

Question 4:What is the purpose of the meta viewport tag like ?

Question 5:Using multiple meta description tags on the same page improves SEO rankings.

Question 6:Which of these are valid values for the meta name attribute?