Home›Validators›Data›HTML Meta Tags Validator

HTML Meta Tags Validator

Data

Validate HTML meta tags for SEO: title, description, og:title, og:description, canonical, and robots. Paste HTML and get an instant meta tag audit. Free, client-side.

What is a Meta Tags?

The HTML Meta Tags Validator checks the <head> section of any web page for the meta tags that matter most to search engines and social platforms. Paste a <head> block or a full HTML document, and the validator runs nine structured checks in your browser — returning a Valid or Invalid badge alongside a per-check breakdown with exact pass, warning, or failure status for each tag.

Meta tags are invisible to page visitors but carry outsized weight in how a page performs in organic search and on social media. A missing <title> tag means Google has to invent one; a <meta name="description"> that exceeds 160 characters gets truncated in search results; absent Open Graph tags mean WhatsApp and LinkedIn show a plain URL with no preview image when someone shares your link. These are not edge-case concerns — they affect every page, every share, and every search impression.

The validator covers the nine checks that account for the majority of meta tag mistakes found in real-world audits:

Check What passes
<title> presence Tag exists
<title> length 10–60 characters
<meta name="description"> presence Tag with non-empty content
<meta name="description"> length 50–160 characters
<meta name="viewport"> Any viewport tag present
<meta charset> Any charset declaration present
og:title Open Graph title present
og:description Open Graph description present
og:image Open Graph image URL present
<link rel="canonical"> Canonical href present
<meta name="robots"> Present (informational only)

Because validation runs entirely client-side, no HTML content is transmitted to any server. You can paste staging pages, internal drafts, or confidential content without concern.

How to use this Meta Tags calculator

  1. Get the page source. In your browser, navigate to the page you want to check and press Ctrl+U (Windows/Linux) or Cmd+Option+U (Mac) to view the page source. Alternatively, right-click anywhere on the page and select View Page Source. If your tags are injected by JavaScript after page load, open browser DevTools (F12), click the Elements tab, and copy the content of the <head> element from the rendered DOM instead.

  2. Copy the head section. You can paste the entire HTML document or just the content between <head> and </head>. The validator will locate the relevant tags either way. Copying only the head section keeps the paste area manageable for large pages.

  3. Paste into the input box. Click into the field labelled "Paste HTML (head section or full page)" and paste your copied markup with Ctrl+V / Cmd+V. The default placeholder shows a minimal valid example so you can see the expected input format.

  4. Click Validate. The validator parses the pasted HTML in your browser and runs all nine checks. No data is sent to any server — processing happens locally and returns results immediately.

  5. Read the top-level badge. The Result badge at the top shows Valid (green) if every check passes, or Invalid (red) if one or more checks fail. A page with only warnings (tags present but outside recommended lengths) may show as Invalid depending on your configuration — read the detail lines to distinguish hard failures from advisory warnings.

  6. Work through the per-check detail lines. Each check appears with a status icon:

    • ✓ — present and within recommended limits
    • ⚠️ — present but outside the recommended length range
    • ✗ — missing entirely
    • ℹ — informational (robots tag: noted but not scored)

    Focus first on ✗ failures, then address ⚠️ warnings in order of SEO impact (title length and description length typically matter most).

  7. Edit, re-paste, and re-validate. Fix the flagged issues in your CMS or source file, copy the updated source, and paste it back into the input box to confirm all checks now pass before deploying.

Formula & Methodology

The HTML Meta Tags Validator parses pasted markup using browser-native DOM parsing (DOMParser with text/html mime type). This means the parsed tree matches exactly what a browser would produce from the same markup — no custom HTML parser is involved. Once the DOM is built, each check queries specific elements and attributes.

### Check rules in detail

Title check
Element query: document.querySelector('title') Text length: title.textContent.trim().length Pass: exists AND length >= 10 AND length <= 60 Warning: exists AND (length < 10 OR length > 60) Fail: element not found

Meta description check
Element query: document.querySelector('meta[name="description"]') Content length: element.getAttribute('content').trim().length Pass: exists AND length >= 50 AND length <= 160 Warning: exists AND (length < 50 OR length > 160) Fail: element not found OR content is empty

Viewport check
Element query: document.querySelector('meta[name="viewport"]') Pass: element found (content value not checked) Fail: element not found

Charset check
Element queries:   document.querySelector('meta[charset]')   document.querySelector('meta[http-equiv="Content-Type"]') Pass: either element found Fail: neither found

Open Graph checks (og:title, og:description, og:image)
Element query: document.querySelector('meta[property="og:title"]') (etc.) Pass: element found AND content attribute is non-empty Fail: element not found OR content is empty

Canonical check
Element query: document.querySelector('link[rel="canonical"]') Pass: element found AND href attribute is non-empty Fail: element not found OR href is empty

Robots check
Element query: document.querySelector('meta[name="robots"]') Result: informational only — presence noted, absence not penalised

### Valid example head

html <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>SIP Calculator — Monthly Investment Returns</title>   <meta name="description" content="Calculate your SIP returns with our free online SIP calculator. Enter your monthly amount, rate, and tenure to see projected corpus.">   <meta property="og:title" content="SIP Calculator — Monthly Investment Returns">   <meta property="og:description" content="Free SIP calculator for Indian investors. See total corpus, wealth gained, and year-by-year growth.">   <meta property="og:image" content="https://thecalcu.com/og/sip-calculator-india.jpg">   <link rel="canonical" href="https://thecalcu.com/sip-calculator-india/"> </head> 

Result: all nine checks pass. The title is 43 characters, the description is 110 characters, OG trio is complete, canonical is present, and charset and viewport are declared.

### Invalid example head

html <head>   <title>Home</title>   <meta name="description" content="Welcome to our website. We offer various services and products for your needs. Please browse our site to learn more about what we do and how we can help you achieve your goals today.">   <meta property="og:title" content="Home"> </head> 

Result: multiple failures.
- <title> — ⚠️ "Home" is 4 characters, below the 10-character minimum
- <meta name="description"> — ⚠️ 181 characters, above the 160-character maximum
- <meta name="viewport"> — ✗ missing
- <meta charset> — ✗ missing
- og:description — ✗ missing
- og:image — ✗ missing
- <link rel="canonical"> — ✗ missing

Frequently Asked Questions

An HTML meta tag is a short snippet placed inside a page's `<head>` section that gives browsers and search engines structured information about the page — its title, description, character encoding, and intended audience. Search engines use this data to generate the snippet shown in results pages, so a missing or poorly written `<meta name="description">` can directly suppress click-through rates. Social platforms like Facebook, LinkedIn, and WhatsApp pull Open Graph meta tags to render rich link previews. Getting these tags right is one of the lowest-effort, highest-impact on-page SEO improvements you can make.
The recommended length for a `<title>` tag is between 10 and 60 characters. Titles shorter than 10 characters rarely describe the page meaningfully enough for search engines or users. Titles longer than 60 characters are typically truncated in Google's search results with an ellipsis, which obscures the end of the title and can reduce click-through rates. Aim for a descriptive, keyword-rich title that fits comfortably within this range.
Meta descriptions should be between 50 and 160 characters for optimal display in search engine results pages. Descriptions shorter than 50 characters are generally too thin to communicate real value to searchers. Descriptions exceeding 160 characters get cut off in most search engine snippets, meaning users see an incomplete sentence. A well-crafted meta description acts as an organic ad copy — it should summarise the page's value proposition clearly and include a natural call to action.
A canonical link (`<link rel="canonical" href="...">`) tells search engines which URL is the definitive version of a page when the same or similar content is accessible at multiple URLs. Without a canonical tag, parameters like `?sort=price` or `?ref=newsletter` create duplicate content in the eyes of crawlers, splitting your link equity across several URLs instead of consolidating it on one. Adding a canonical keeps your crawl budget efficient and prevents rankings from being diluted across near-identical pages.
Open Graph (OG) meta tags are a set of `<meta property="og:...">` attributes originally defined by Facebook that control how a page appears when shared on social networks. The three most important are `og:title`, `og:description`, and `og:image`. Facebook, LinkedIn, WhatsApp, Slack, and many other platforms read OG tags to render rich previews with an image, headline, and short description. Without them, platforms fall back to guessing the content, often producing a plain URL with no image.
Paste your page's HTML — either the full document or just the `<head>` section — into the input box labelled "Paste HTML (head section or full page)" and click Validate. The HTML Meta Tags Validator parses the pasted markup entirely in your browser and returns a Valid or Invalid badge along with a per-check breakdown. Each check shows a tick (present and within limits), a warning (present but outside recommended range), or a cross (missing entirely).
If the validator flags your `<title>` as too short (under 10 characters), expand it to include the page's primary keyword and context — for example, changing "Home" to "thecalcu.com — Free Online Calculators" immediately satisfies the minimum. If it is too long (over 60 characters), trim filler words and move secondary details to the meta description instead. After editing, paste the revised HTML back into the validator to confirm the check passes before deploying.
No. The validator runs entirely in your browser using client-side JavaScript — your HTML is never transmitted to any server or stored anywhere. This means you can safely paste internal staging pages, draft content, or sensitive marketing copy without any data leaving your machine. You can even use it offline once the page has loaded.
A Valid result confirms that your meta tags are structurally present and within recommended length limits — it does not guarantee rankings. Search engine rankings depend on hundreds of additional signals including content quality, backlinks, page speed, Core Web Vitals, and domain authority. Think of meta tag validation as a hygiene check: passing it removes a known obstacle, but it is one step in a broader SEO strategy. Use it alongside a full [HTML Validator](/html-validator/) check and a [Robots.txt Validator](/robots-txt-validator/) review to cover more ground.
The `<meta name="viewport" content="width=device-width, initial-scale=1">` tag instructs mobile browsers to render the page at the device's physical width rather than zooming out to a desktop-sized layout. Without it, smartphones display a shrunken, unzoomed version of the page, resulting in a poor user experience and lower scores in Google's mobile-usability assessment. Google uses mobile-first indexing, so a missing viewport tag is a practical ranking signal.
The `<meta charset>` tag declares the character encoding used for the page. The correct and universally recommended value is `UTF-8`, which covers every language including Arabic, Hindi, Chinese, and special symbols without encoding issues. Omitting this tag means browsers must guess the encoding, which can cause garbled text for non-ASCII characters. Place it as the very first tag inside `<head>` so the browser knows the encoding before it parses any other content.
Yes. View the page source in your browser (right-click → View Page Source), copy everything from the opening `<head>` tag to the closing `</head>` tag, and paste it into the validator. This works regardless of how the HTML was generated — WordPress, Shopify, Webflow, custom frameworks, or hand-coded pages all produce standard HTML that the validator can parse. If your CMS injects tags dynamically via JavaScript after page load, use the rendered source from browser DevTools (Elements panel) rather than the raw source.
Also known as
meta tags validatorSEO meta checkog:title validatorHTML head validatormeta description checker