HTML Meta Tag Analyzer

Overview

A high-performance, single-file browser utility designed for developers and content creators to audit their HTML meta tags. This tool accepts raw HTML strings or simple URL inputs (via user copy-paste) and provides an immediate breakdown of SEO health, Open Graph implementation, and social card availability.

Technical Specification

• Architecture: Single HTML file utilizing vanilla JavaScript, HTML5, and Tailwind CSS (via CDN).
• Sandboxing: Runs in a null-origin iframe environment. No localStorage, cookies, or IndexedDB. All state is maintained in-memory.
• Parsing: Uses the native DOMParser API to safely parse the user-provided string without executing any scripts embedded in the input.

Core Features

1. Comprehensive Scan: Validates essential tags including <title>, <meta name="description">, <link rel="canonical">, and <meta name="viewport">.
2. Social Media Audit: Checks for og:title, og:description, og:image, og:url, and all twitter:* tags.
3. Validation Feedback: Provides visual "Pass/Warning/Fail" indicators based on standard SEO best practices (e.g., description length checks, missing image tags).
4. Copy-Paste Input: An easy-to-use textarea input area with a 'clear' button.
5. Responsive Layout: A clean, modern interface that stacks content vertically on mobile and uses a split-view on desktop for input/output.

UI/UX Design

• Aesthetic: Strictly light-mode design. Use high-contrast whites (#ffffff), soft grays (#f9fafb, #e5e7eb), and primary branding colors in muted, professional tones (e.g., Indigo/Blue).
• Typography: Sans-serif, legible system fonts (Inter or system-ui).
• Interactions:
  • Smooth fading transitions when results generate.
  • Success/Error color coding (Green for good tags, Orange for warnings, Red for critical failures).
  • Hover states on buttons to indicate interactivity.
• Layout:
  • Header: Clean app title and brief instructional text.
  • Main: A large, clean textarea for raw HTML pasting.
  • Results Area: A structured card-based list showing each tag status clearly.

Developer Directives

1. Performance: Ensure DOM parsing is optimized so the UI does not freeze on large HTML documents.
2. Security: Sanitize all output. Never inject the user's raw HTML into the document body to prevent XSS. Display tag names and values as text content only.
3. Constraint Enforcement: Strictly prohibit localStorage or cookies. If data needs to be cleared, use a simple reset function on the internal state variable.
4. Accessibility: Use semantic HTML (<main>, <section>, <article>) and ensure all inputs have associated <label> or aria-label attributes.