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.

HTML Meta Tags Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

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.

How it works

Each tag pairs a key attribute with a content value:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A 150–160 character summary.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Page title for sharing">
<meta property="og:image" content="https://example.com/card.png">
<meta name="twitter:card" content="summary_large_image">
<meta http-equiv="content-security-policy" content="default-src 'self'">

charset must come first (within the first 1024 bytes). name and property declare document-level facts; http-equiv simulates a response header when one cannot be set server-side.

Tips and notes

Put <meta charset="utf-8"> and viewport first; everything else follows.
description has no direct ranking weight but is the snippet text crawlers often show, so write it for clicks (~150–160 chars).
Open Graph uses property=og:*; Twitter cards use name=twitter:* — don’t mix the attribute up or platforms ignore the tag.
Prefer real HTTP headers over http-equiv for security (CSP, X-Frame-Options) when you control the server.
theme-color tints mobile browser UI; pair it with a media query for dark mode.