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 for an instant meta tag audit.

Reviewed by the thecalcu.com team · Last updated July 18, 2026

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.

Why Use an HTML Meta Tags Validator?

Manual audits of meta tags require opening source code, scanning through dozens of lines of markup, and remembering which length limits apply to which tags, a process that is error-prone and slow when repeated across tens or hundreds of pages.

The most common mistakes are easy to miss:

  • A title that is 63 characters long looks fine in the editor but will be truncated in Google's SERPs
  • An og:image tag pointing to a relative path (/images/hero.jpg) instead of an absolute URL (https://example.com/images/hero.jpg) silently breaks all social previews
  • A <link rel="canonical"> that is absent on paginated or filtered URLs lets search engines index duplicate content and split ranking signals

This validator surfaces those issues in seconds. It is particularly useful before a page goes live, during a CMS migration, or when auditing a site you have just taken ownership of. For a complementary check on your HTML structure itself, use the HTML Validator alongside this tool.

Who Should Use This Validator?

SEO specialists and consultants use it to audit client sites quickly before presenting findings. Running the validator on key landing pages surfaces the most common technical SEO gaps, missing canonical tags, thin descriptions, absent OG images, without requiring crawl access or third-party subscriptions.

Frontend developers and web agencies use it as a pre-deploy checklist item. Pasting the built <head> output into the validator before a site launch confirms that all required tags are present and within limits, catching regressions introduced during CMS theming or template changes.

Content editors and marketing teams use it when publishing new pages or blog posts through a CMS. Even with a well-configured CMS, a forgotten custom description field or a broken image URL in an OG tag can go unnoticed until a share on social media reveals a blank preview.

Independent bloggers and site owners who manage their own WordPress, Ghost, or Webflow sites use it to verify that SEO plugin settings are rendering correctly in the actual HTML output, plugin configuration does not always match what ends up in the document source.

QA engineers building pre-release checklists include meta tag validation alongside performance and accessibility audits. Pair this validator with the Robots.txt Validator to cover the full set of crawl and indexing controls in a single session. If you are generating OG tags programmatically, use the Open Graph & Twitter Card Generator to produce the markup, then validate it here.

What Insights Does the Meta Tags Validator Give You?

The validator returns two levels of output: a top-level Valid / Invalid badge and a per-check detail list. Understanding what each check actually reports helps you act on the results.

Title presence and length, The check first confirms the <title> element exists, then measures its text content length. A title that exists but is fewer than 10 characters triggers a warning rather than a hard failure; a missing title triggers a failure. The length window (10–60) reflects where truncation occurs in standard Google SERP display at 1280 × 800 viewport.

Description presence and length, The check reads the content attribute of <meta name="description">. An empty content="" counts as missing. The 50–160 character window is a practical guideline based on observed snippet display across major search engines; Google may still rewrite the snippet using on-page text, but a well-crafted description within this range appears unchanged more often.

Viewport, A binary check: the tag is either present or absent. Any <meta name="viewport"> content value passes, the validator confirms presence, not the specific content value.

Charset, Confirms a charset declaration exists in any form (<meta charset="UTF-8"> or the older <meta http-equiv="Content-Type" content="text/html; charset=utf-8">). The validator does not prescribe a specific charset, it flags pages with no declaration at all.

Open Graph trio (og:title, og:description, og:image), Each is checked independently. An absent og:image is flagged separately from an absent og:title, so you can see exactly which social preview elements are missing rather than a single combined "OG tags missing" message.

Canonical, Confirms <link rel="canonical" href="..."> exists with a non-empty href. The validator checks presence only, it does not follow the URL or verify it resolves to the correct page.

Robots, Reported as informational (ℹ): the tag is noted if present, and the absence of a robots tag is not treated as a failure (the default crawl behaviour when the tag is absent is to allow indexing and following).

The scope of this tool is format and presence validation. It does not check whether your canonical URL resolves, whether your og:image returns a valid image, or whether your description is compelling copy. Use URL Validator to check individual URL values extracted from the markup.

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.

Show formula & methodology ↓Show less ↑

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

What is an HTML meta tag and why does it matter for SEO?
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.
What is the recommended length for an HTML title tag?
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.
What is the recommended length for a meta description?
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.
What is a canonical link and what does it prevent?
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.
What are Open Graph meta tags and which platforms use them?
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.
How do I check if my HTML meta tags are valid?
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).
What should I do if my title tag fails the length check?
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.
Does the HTML Meta Tags Validator upload or store my HTML?
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.
Does a Valid result mean my page will rank well in search engines?
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.
What does the meta viewport tag do and why is it checked?
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.
What is the meta charset tag and which value should I use?
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.
Can I use this validator for pages built with WordPress, Shopify, or other CMSs?
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