What is the difference between meta name and meta property?

The name attribute is the HTML-standard way to declare document metadata (name=description, name=viewport). The property attribute comes from the RDFa-based Open Graph protocol (property=og:title). Twitter cards use name, while Facebook/Open Graph use property — both are valid meta tags.

Why is the viewport meta tag important?

Without , mobile browsers render the page at a desktop width and scale it down, breaking responsive layouts. The tag tells the browser to match the layout viewport to the device width so CSS media queries behave as intended.

How does meta robots control indexing?

sends per-page directives to search crawlers: noindex keeps the page out of the index, nofollow stops link equity passing, and noarchive suppresses cached copies. You can target a specific bot with name=googlebot. It applies only to the page it sits on.

Do og: tags affect SEO ranking?

Open Graph tags do not directly change search ranking. They control how a URL appears when shared on social platforms — the title, description and preview image. Better previews raise click-through, which can indirectly help, but the tags themselves are for link unfurling, not the search algorithm.

Is the charset meta tag still needed?

Yes. should be the first element in head so the browser decodes bytes correctly before parsing further. Even though UTF-8 is the default in HTML5, declaring it explicitly avoids encoding mismatches and must appear within the first 1024 bytes.

What is the HTML Meta Tags Reference?

Searchable HTML meta tag reference covering charset, viewport, description, robots, Open Graph og:* and Twitter card values plus http-equiv directives, each with its exact attribute and effect. It runs free in your browser on Gera Tools, with nothing uploaded.

HTML Meta Tags Reference

Name: HTML Meta Tags Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

What meta tags do

<meta> elements in the document <head> carry metadata that never renders but steers the browser, search crawlers and social platforms. They come in three families by attribute: name (HTML-standard metadata), property (Open Graph), and http-equiv (HTTP-header-like directives). This reference lists the common values in each, with the exact markup, what each does, and whether it targets the browser, SEO or social previews.

The three families and when to use each

`name` — standard HTML metadata

The name attribute marks HTML-standard or well-recognised metadata:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A 150–160 character summary for search snippets.">
<meta name="robots" content="index, follow">
<meta name="author" content="Gera Systems">
<meta name="theme-color" content="#1e293b" media="(prefers-color-scheme: dark)">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page title for Twitter">

Note that Twitter cards use name=twitter:* even though they look like Open Graph — the attribute is name, not property.

`property` — Open Graph (and other RDFa vocabularies)

The property attribute comes from the Open Graph protocol (originally by Facebook / Meta) and uses the og: prefix:

<meta property="og:title" content="Page title for sharing">
<meta property="og:description" content="Short social share description">
<meta property="og:image" content="https://example.com/card.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="My Site">

The og:image should be at least 1200×630 px for large previews. LinkedIn, Facebook, Slack, Discord, iMessage and WhatsApp all read Open Graph tags for link unfurling.

`http-equiv` — pseudo-HTTP headers

http-equiv lets you set directives that would normally live in HTTP response headers. Use it only when you cannot control the actual server response headers, because real headers take precedence and are more reliable:

<meta http-equiv="content-security-policy" content="default-src 'self'">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta http-equiv="refresh" content="30">

refresh with content="N;url=..." is a meta-redirect — search engines may not follow it, so prefer a real HTTP 301 when possible.

A minimal but complete head block

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page title</title>
  <meta name="description" content="150–160 char summary for search snippets.">
  <meta name="robots" content="index, follow">

  <!-- Open Graph / social sharing -->
  <meta property="og:title" content="Page title">
  <meta property="og:description" content="Short description for social previews.">
  <meta property="og:image" content="https://example.com/og-image.png">
  <meta property="og:url" content="https://example.com/page">
  <meta property="og:type" content="website">

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Page title">

  <!-- Branding -->
  <meta name="theme-color" content="#1e293b">
</head>

Key rules

<meta charset="utf-8"> must appear within the first 1024 bytes of the document so the browser decodes the rest of the page correctly before it can parse further.
description does not directly affect search ranking but it is the text crawlers most often show as the snippet, so write it for clicks rather than for robots.
Open Graph uses property=og:*; Twitter cards use name=twitter:* — mixing up the attribute name causes the platform to silently ignore the tag.
Prefer real HTTP headers over http-equiv for security headers like CSP and X-Frame-Options when you control the server — HTTP headers cannot be bypassed by the page itself.
theme-color tints the browser chrome on Android; pair it with a media attribute for dark mode to avoid a jarring white flash.

HTML Meta Tags Reference

Get one useful tool a week