← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 6 of 20

HTML Meta Tags

Meta tags live in the head section and are invisible to users but crucial for search engines and social media platforms. They tell Google what your page is about and tell Facebook or Twitter what image and title to show when someone shares your link.

In this page:

  1. Basic Meta Tags
  2. Open Graph Meta Tags
  3. Viewport Meta Tag
  4. Character Encoding Meta Tag
  5. Author and Keywords Meta Tags
Syntax
markup 
<meta name="name" content="value">
<meta charset="UTF-8">
<meta http-equiv="header" content="value">

Basic Meta Tags

The description meta tag tells search engines what your page is about. It appears as the snippet under your page title in Google search results. Keeping the description under about 160 characters avoids it being cut off in search results.

Note:
  • Keep meta descriptions between 150-160 characters for best display in search results.
  • Accepted attributes:
  • name — description | keywords | author | robots | viewport | theme-color
  • content — value for that name
  • charset — utf-8
  • http-equiv — refresh | content-security-policy | content-type
Warning: Duplicate meta descriptions across pages confuse search engines and hurt rankings.

Example: Basic Meta Tags

markup 
<meta name="description" content="Learn HTML basics with simple examples.">

Open Graph Meta Tags

Open Graph tags control how your page looks when shared on Facebook, LinkedIn, or WhatsApp. Without them platforms guess what to show and often get it wrong.

Testing your Open Graph tags with a link debugger before publishing avoids an embarrassing broken preview card.

Note:
  • Always include og:image — posts with images get significantly more engagement.
  • Accepted attributes:
  • property — og:title | og:description | og:image | og:url | og:type
  • content — value for that property
Warning: og:image must be an absolute URL with https — relative paths do not work.

Example: Open Graph Meta Tags

markup 
<meta property="og:title" content="My Page">
<meta property="og:image" content="https://example.com/preview.jpg">

Viewport Meta Tag

The viewport meta tag controls how a page scales on mobile devices -- without it, phones render the page at a fixed desktop width and then shrink it down, making text and buttons too small to use comfortably.

Note:
  • Accepted attributes:
  • name — viewport
  • content — width=device-width | initial-scale=1 | minimum-scale | maximum-scale | user-scalable=yes|no

Example: Viewport Meta Tag

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

Character Encoding Meta Tag

The charset meta tag tells the browser which character encoding to use when decoding the page's text, and UTF-8 is the standard choice since it correctly displays virtually every language's letters and symbols.

Note:
  • Accepted attributes:
  • charset — utf-8

Example: Character Encoding Meta Tag

markup 
<meta charset="UTF-8">

Author and Keywords Meta Tags

The author meta tag credits who wrote or maintains a page, and while the keywords meta tag was once used by early search engines, modern engines like Google now ignore it entirely and rely on actual page content instead.

Note:
  • Accepted attributes:
  • name — author | keywords
  • content — free text (comma-separated for keywords)

Example: Author and Keywords Meta Tags

markup 
<meta name="author" content="Jane Doe">
<meta name="keywords" content="html, tutorial, web">
Live Example
Related Topics

HTML Deprecated Tags · HTML Audio/Video Reference · HTML ARIA Roles · HTML Doctypes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting og:image uses absolute URLs not relative paths.
  2. Writing meta descriptions longer than 160 characters — search engines truncate them.
  3. Using the same meta description on every page.
Chapter Summary
  • Meta tags live in the head and are invisible to users.
  • The description tag controls your Google search snippet.
  • Open Graph tags control social media sharing appearance.
  • Twitter cards require their own separate meta tags.
Browser Support

Meta tags are supported in all browsers. Open Graph is a Facebook standard supported by all major social platforms.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Audio/Video Reference Next Lesson → HTML ARIA Roles

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.