Design & UI Validation

Meta & SEO

Extract and validate all SEO meta tags, OpenGraph social cards, Twitter Card markup, and technical crawlability signals from the live preview.

Overview

Complete SEO & Social Meta Auditing

The invisible <head> metadata of your pages is critical for search engine indexing and social media sharing. Mistakes here are impossible to see visually — but they cost you SEO ranking positions and make your links look broken when shared on LinkedIn, Slack, or Twitter. The Meta & SEO panel extracts all metadata from the live preview frame and audits it with pass/fail indicators.

  • Title Tag Validation: Shows the page title with character count. Flags as Warning if too short (<30 chars) or too long (>60 chars — truncated in Google SERPs).
  • Meta Description Validation: Shows description with character count. Optimal range is 120–158 characters for maximum SERP snippet length.
  • Canonical URL: Displays the canonical link to detect duplicate content issues that split link equity.
  • Robots Directive: Shows the robots meta content to ensure the page is set to index, follow where appropriate (and noindex is not accidentally left on production).
  • Viewport Meta: Validates the presence and content of the responsive viewport meta tag (required for Google's mobile-first indexing).
  • OpenGraph Tags: Validates og:title, og:description, og:image, og:type, and og:url for correct social sharing previews.
  • Twitter Card Tags: Validates twitter:card, twitter:title, twitter:description, and twitter:image.
  • Structured Data: Detects the presence and type of JSON-LD structured data markup for rich results eligibility.
Critical Mistakes to Avoid
⚠️
Always use absolute URLs for OG images The og:image must be a full absolute URL (e.g., https://yoursite.com/og-image.png). Relative paths will fail to resolve when your page is shared on social media platforms like LinkedIn or Slack, resulting in a broken or missing preview image.
⚠️
Check for accidental noindex on production A <meta name="robots" content="noindex"> tag left over from a staging configuration is one of the most catastrophic and hardest-to-debug SEO mistakes. The Meta panel surfaces this immediately as a high-priority Error flag.
💡
Check meta tags on SPAs after navigation Single-page applications often update meta tags dynamically via JavaScript. Navigate to a specific route in your previewed app, then open the Meta panel to verify the tags actually updated for that route — many SPA meta tag implementations are broken on non-root routes.