ReviseAlgo Logo

HTML Basics

Meta Tags

Master HTML meta tags, covering charsets, SEO descriptions, mobile viewport configurations, and Open Graph social media sharing previews.

Last Updated: July 15, 2026 • 10 min read

1. Learning Objectives

In this lesson, you will master page metadata configurations. By the end of this topic, you will be able to:

  • Configure metadata using the void <meta> element inside the page head.
  • Apply character encoding declarations (charset="UTF-8") to ensure proper text rendering.
  • Build mobile responsive views using the viewport configuration tag.
  • Optimize search engine visibility using SEO-focused description tags.
  • Implement Open Graph (og:) attributes to customize social media sharing previews.

2. Overview

Meta tags are void elements located inside the <head> block of an HTML document. They define page metadata—information about the page that is not visible in the main viewport but is processed by browsers, search engine indexers, and social sharing platforms.

3. Why This Topic Matters

Metadata controls search appearance, device responsiveness, and social display. Incorrect configurations lead to major penalties:

  • Search Engine Failures: Without a descriptive meta tag, search engines generate random snippet descriptions from the first text they find on the page, resulting in low click-through rates.
  • Unformatted Social Previews: If you omit Open Graph properties, links shared on Slack, Discord, or LinkedIn display without images, titles, or site descriptions.
  • Broken Mobile Rendering: Forgetting the viewport meta tag causes mobile browsers to treat pages like standard desktop sites, rendering tiny, unreadable text.

4. Real-World Analogy

Think of HTML meta tags like **shipping logs attached to a cargo crate**:

  • The Shipping Manifest (Charset): Specifies the catalog format of the cargo (e.g. telling the recipient how to read foreign character sets).
  • The Box Description (SEO Description): A short summary printed on the box explaining what is inside, helping warehouse managers index it.
  • The Promotional Photo (Open Graph Tags): The sticker wrapped around the box displaying a beautiful preview image when the cargo crate is cataloged in public directories.

5. Core Concepts

Tag Attribute Core Description Syntax Example
charset Declares the character encoding for the HTML document. UTF-8 supports almost all written languages. <meta charset="UTF-8">
viewport Controls how mobile viewports scale, preventing default desktop zoom scaling. width=device-width, initial-scale=1.0
description Provides a summary of the page for search engine listings. name="description" content="..."

6. Syntax & API Reference

Meta tags are placed in the page head. Ensure the charset declaration is within the first 1024 bytes of the file:

7. Visual Diagram

This diagram displays how metadata is distributed to different systems:

8. Live Example — Full Working Code

A sample HTML file showing a fully configured head tag:

9. Interactive Playground

Try It Yourself Challenges:

  1. Change the og:image URL address and check how link previews update using an Open Graph testing tool.
  2. Test what happens if you add user-scalable=no to the viewport tag. Note that this is generally discouraged for accessibility.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Too long SEO description Writing descriptions longer than 160 characters, which gets cut off in search results. content="A very long sentence..." (250+ characters) content="Keep it clean, concise, and under 160 characters."
Using name instead of property for OG tags Declaring `name="og:title"` instead of `property="og:title"`. <meta name="og:title" ...> <meta property="og:title" ...>

11. Best Practices

  • Keep descriptions short: Keep meta descriptions between 120 and 160 characters so they display properly in search engine results.
  • Declare charset early: Place <meta charset="UTF-8"> within the first 1024 bytes of the HTML document to ensure proper text rendering.
  • Always include the viewport tag: Use <meta name="viewport" content="width=device-width, initial-scale=1.0"> to enable mobile responsiveness.
  • Use Open Graph for social platforms: Implement Open Graph tags to control how your pages look when shared on social networks and chat apps.

12. Browser Compatibility

Feature Chrome Firefox Safari Edge
Meta viewport attribute Supported Supported Supported Supported

13. Interview Questions

🟢 Q1: Why is the viewport meta tag necessary for responsive web design?

Answer: Mobile browsers default to rendering desktop layouts by using a virtual viewport (typically 980px wide) and scaling it down to fit the screen. This makes text tiny and unreadable. The viewport tag tells the browser to match the viewport width to the device's physical width (width=device-width) and set the initial zoom level to 1, enabling responsive CSS layout rules to work correctly.

14. Debugging Exercise

Find and fix the syntax errors in this head section metadata:

View Solution

Fixed code:

15. Practice Exercises

Exercise 1: Social Media Card Setup

Build a complete HTML head containing the meta tags required to display a clean preview card on LinkedIn when sharing a blog post link. Include a title, description, and link preview image.

16. Scenario-Based Challenge

The International Translation Font Crash Challenge:

Your company launches an e-commerce platform in Japan. Japanese characters display as broken question mark squares (like " ") on user viewports. Explain why adding the charset="UTF-8" meta tag at the top of the page head resolves this text rendering bug.

17. Quick Quiz

Q1: Which attribute should be used to define social metadata properties like og:image?

A) name

B) property

C) rel

Answer: B — Open Graph tags require the property attribute to specify metadata keys.

18. Summary & Key Takeaways

  • • Always declare meta charset="UTF-8" as the very first child of the head tag.
  • • Implement the viewport meta tag to enable responsive styles on mobile devices.

19. Cheat Sheet

Meta Property Key Purpose
<meta name="robots" content="index, follow"> Instructs search engine crawlers whether to index the page and follow its links.