Open Graph Meta Tag Previewer

Overview

A comprehensive, browser-based utility designed for web developers, digital marketers, and content creators to visualize how their web content will appear when shared on major social media platforms like Facebook, LinkedIn, and X (Twitter). This tool eliminates the need for repeated manual deployments to test meta tag changes.

Core Features

• Live Visual Mockups: Real-time generation of card previews for Facebook (Standard Share), LinkedIn (Article Share), and X (Summary Card).
• Manual Tag Entry Mode: Allows users to input og:title, og:description, og:image, and og:url manually to test how specific content will look before implementation.
• Dimension Validation: Automatic check to warn users if their OG image dimensions deviate from recommended social media standards (e.g., 1200x630 pixels for optimal Facebook rendering).
• Code Snippet Generator: Automatically generates the ready-to-copy HTML <meta> tag code block based on the user's input.
• Zero-Storage Architecture: Operates entirely in volatile memory. No tracking, no cookies, and no localStorage dependencies.

User Interface Design

• Layout: A clean, two-column "Editor vs. Preview" layout on desktop, stacking vertically on mobile devices.
• Aesthetic: Minimalist SaaS style using high-contrast typography (Inter/system-sans), generous whitespace, and subtle shadows for input cards.
• Color Palette: Professional light-mode scheme using a clean white background (#FFFFFF), soft gray surfaces (#F9FAFB), vibrant brand-neutral blue for primary actions (#2563EB), and crisp neutral grays for typography (#374151).
• Interactions:
  • Smooth transition animations when switching between preview modes (tabbed interface for Facebook/LinkedIn/Twitter).
  • Instant reactivity; meta tag updates reflect on the preview card within 100ms of keystroke.

Technical Implementation Directives

1. Environment: Must be a single HTML file containing CSS and Vanilla JavaScript.
2. State Management: Store all input values in a JavaScript object (const state = {}) and re-render the preview DOM elements on input events. Do not use any persistent storage.
3. CORS/Sandbox Compatibility: As this app runs in a null-origin iframe, do not attempt fetch() calls to external domains. Focus on local UI composition and generation.
4. Accessibility: All form inputs must have descriptive <label> tags. The preview areas must be semantically structured to ensure screen-reader clarity.
5. Responsive Mechanics: Use Flexbox and CSS Grid to ensure the preview cards maintain aspect ratios on mobile devices without overflowing.