Skip to main content
HTML for Beginners
CHAPTER 12 Beginner

HTML Meta Tags and SEO Basics

Updated: May 10, 2026
5 min read

# HTML Meta Tags and SEO Basics

1. Introduction

The <head> of your HTML document contains data *about* data, known as metadata. This information isn't visible on the webpage itself, but it is critically important for Search Engines (Google) and Social Media (Twitter/Facebook) to understand your site.

2. Learning Objectives

  • Define page titles and descriptions for SEO.
  • Configure the viewport for mobile devices.
  • Use Open Graph tags for social media link previews.

3. Detailed Explanations

The <title> Tag

This is the most important SEO tag. It defines the text that appears in the browser tab and acts as the clickable headline in Google Search results.
html
123 
<head>
    <title>Buy Fresh Apples Online | The Fruit Store</title>
</head>

The Description Meta Tag

This defines the small paragraph of text that appears under the title in Google Search results.
html
1 
<meta name="description" content="Order the freshest organic apples delivered straight to your door. 20% off your first order!">

The Viewport Meta Tag (CRITICAL)

Without this tag, mobile browsers will assume your site is meant for a desktop and will zoom way out, making text unreadable. Always include this.
html
1 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Character Set

Tells the browser what character encoding to use (always use UTF-8 to support all languages and emojis).
html
1 
<meta charset="UTF-8">

Open Graph (Social Media) Tags

When you paste a link into WhatsApp, Twitter, or Discord, it automatically generates a preview card with an image. This is done using Open Graph (og:) tags!
html
123 
<meta property="og:title" content="My Awesome Website">
<meta property="og:description" content="Check out my new portfolio!">
<meta property="og:image" content="https://example.com/preview-card.jpg">

4. Mini Project: The Perfect <head>

Every professional HTML document should start looking something like this:
html
12345678910111213141516171819202122 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Technical Meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO Meta -->
    <title>Jane Doe | Frontend Developer</title>
    <meta name="description" content="Portfolio of Jane Doe, a React developer based in London.">
    
    <!-- Social Media Meta -->
    <meta property="og:title" content="Jane Doe Portfolio">
    <meta property="og:image" content="https://janedoe.com/og-image.png">
    
    <!-- Links -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Content goes here -->
</body>
</html>

5. MCQs

Q1: Which meta tag is absolutely required to make a website mobile-friendly? A) <meta name="mobile" content="true"> B) <meta name="viewport" content="width=device-width, initial-scale=1.0"> C) <meta name="responsive" content="yes"> D) <meta charset="UTF-8"> *Answer: B*

6. Summary

Meta tags are invisible to the user but highly visible to robots. Properly configuring your title, description, and viewport is step number one in Search Engine Optimization (SEO).

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter HTML iframe and Embedding Content
Next Chapter HTML Responsive Design Basics

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 6

🎥 Related Videos 1