Home › Code Snippets › HTML Snippets › Reference › <meta>

HTML Reference

<meta> — The Metadata Element

The invisible tags that tell browsers and search engines what your page is about.

Last updated: October 2026

Definition: The <meta> element provides metadata about the HTML document — information that isn't visible on the page but tells browsers how to render it and search engines how to index and display it. It is a void element placed inside <head>.

🎬 The Complete Head

This is the head of the page you're reading right now. Every tag below is live.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML <meta> Tag — Metadata Reference for SEO (2026)</title>
<meta name="description" content="Complete reference for the HTML meta tag...">
<meta name="keywords" content="html meta tag, meta description seo...">
<meta name="author" content="MAK Studio">
<meta name="robots" content="index, follow">
<meta property="og:title" content="HTML <meta> Tag — Metadata Reference">
<meta property="og:image" content="https://makuistudio.com/images/social-card.png">
<link rel="canonical" href="https://makuistudio.com/code/html/reference/html-meta-tag.html">

💡 Every tag here affects how the page appears in search or social — but none of them are visible on the page itself.

📝

Basic Syntax

<meta name="description" content="Page description here">
<meta property="og:title" content="Social share title">
<meta charset="UTF-8">

Three forms: charset, name+content, and property+content.

🎯 Essential Meta Tags

Tag	Purpose	Required?
`charset`	Character encoding for the document.	Yes
`viewport`	Mobile rendering behavior.	Yes
`description`	Search result snippet (150-160 chars).	Recommended
`robots`	Index/follow rules for crawlers.	Recommended
`author`	Page author.	Optional
`theme-color`	Browser UI color on mobile.	Optional
`og:*`	Social media previews.	Recommended

Character Encoding

<meta charset="UTF-8">

UTF-8 supports every character in every language — including emojis, accents, and Asian scripts.

Place it as the first tag inside <head>.
Must appear in the first 1024 bytes of the document.
Without it, characters may render as Ã© instead of é.

Viewport for Mobile

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

Tells mobile browsers to render at the device's actual width. Without this, mobile users see a zoomed-out desktop page.

Common values:

width=device-width — match the device screen width.
initial-scale=1.0 — start at 100% zoom.
viewport-fit=cover — extend to the notch on modern phones.

Never use user-scalable=no or maximum-scale=1.0. They prevent pinch-to-zoom, which is a serious accessibility failure.

SEO Meta Tags

<title>Page Title — Under 60 Characters</title>
<meta name="description" content="150-160 character summary that shows in search results.">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/canonical-url">

Best practices:

Title: Under 60 characters. Primary keyword near the start.
Description: 150-160 characters. Include a call to action. Google may rewrite it.
Keywords: Google ignores this, but other search engines may use it. Not harmful.
Robots: index, follow for public pages. noindex for private pages.
Canonical: The preferred URL for this page. Prevents duplicate content issues.

Open Graph Tags (Social Sharing)

<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Description for social preview.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">

These control the preview card when someone shares your page on Facebook, LinkedIn, Discord, Slack, WhatsApp, and more.

💡 Image dimensions: Use 1200×630px for the best preview. Always use an absolute URL — relative paths won't work.

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title">
<meta name="twitter:description" content="Short description.">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:site" content="@yourhandle">

Card types:

summary — small square image.
summary_large_image — full-width image (recommended).
player — for video/audio embeds.
app — for app store links.

X (formerly Twitter) also reads Open Graph tags as a fallback.

Complete Production Head

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    <title>Page Title — Under 60 chars (2026)</title>
    <meta name="description" content="150-160 character summary.">
    <meta name="author" content="Your Name">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/page">

    <!-- Open Graph -->
    <meta property="og:title" content="Page Title">
    <meta property="og:description" content="Summary">
    <meta property="og:image" content="https://example.com/og.jpg">
    <meta property="og:url" content="https://example.com/page">
    <meta property="og:type" content="article">

    <!-- Twitter / X -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://example.com/og.jpg">

    <!-- Icons -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- Theme -->
    <meta name="theme-color" content="#0f172a">
</head>

🎯 Meta Tag Cheatsheet

Tag	When to use
`charset`	Every page. First tag in head.
`viewport`	Every page. Essential for mobile.
`description`	Every public page.
`robots`	When you need to control indexing.
`og:*`	Any page that will be shared.
`twitter:*`	For specific X card control.
`author`	Blog posts, articles.
`theme-color`	PWA, mobile-chrome theming.

⚠️ Common Mistakes

Missing charset. Characters render as garbage (Ã© instead of é) on non-English content.
Missing viewport. Mobile users see a zoomed-out desktop layout.
Duplicate description tags on every page. Search engines may ignore them. Each page needs a unique description.
Relative URLs in og:image. Open Graph requires absolute URLs. /image.jpg won't work. Use https://example.com/image.jpg.
Using user-scalable=no. Breaks accessibility. Users must be able to pinch-zoom.
Forgetting the canonical tag. Duplicate URLs (with/without www, with query params) confuse search engines.
Placing <meta> outside <head>. Meta tags must be inside <head>. They don't work in <body>.
Setting og:image to a small image. Use at least 1200×630px for a good preview.

♿ Accessibility Notes

viewport without restrictions — never disable zoom. Users with low vision depend on pinch-to-zoom.
lang on the <html> tag — screen readers use this to choose the right pronunciation.
theme-color — helps users with light sensitivity by tinting the browser chrome.
Meta tags don't replace real content. A great meta description doesn't help if the page content is poor.
og:image alt text is limited. Provide context in the surrounding page. Some platforms ignore image alts.

❓ Frequently Asked Questions

What is the HTML meta tag?

The <meta> element provides metadata about the HTML document — information that isn't visible to users but tells browsers and search engines what the page is about. It sets character encoding, viewport behavior, SEO descriptions, and social sharing previews.

Which meta tags are essential?

The essentials are: charset=UTF-8 (character encoding), viewport (mobile rendering), description (SEO snippet), and title (page title). Open Graph tags (og:title, og:description, og:image) are essential for social sharing.

What does the viewport meta tag do?

The viewport meta tag tells mobile browsers to render the page at the device's actual width instead of a zoomed-out desktop width. Without it, mobile users see a tiny, unreadable version of your page.

What are Open Graph tags?

Open Graph (og:) tags control how your page appears when shared on social media — Facebook, LinkedIn, Discord, Slack, WhatsApp, and more. They set the preview title, description, image, and URL.

Do meta tags affect SEO?

Yes. The meta description influences click-through rate in search results (Google may rewrite it but often uses it). The title tag (also a meta tag) is one of the strongest on-page SEO signals. Charset and viewport affect usability, which is a quality signal.