Social Media Meta Tag Generator & Preview Tool

A professional-grade, browser-based utility designed to help web developers, marketers, and SEO specialists generate and verify Open Graph and Twitter Card meta tags. This tool provides a dual-pane interface: an intuitive input form for meta data and a real-time live preview that mimics the appearance of social media feeds.

Core Features

• Live Input Sync: Updates previews instantly as the user types content.
• Multiple Platform Previews: Toggle between Facebook/LinkedIn (Open Graph) and Twitter Card (Summary vs. Large Image) preview modes.
• Generated Code Panel: Automatically compiles all necessary HTML meta tags into a copy-paste ready block.
• One-Click Copy: A "Copy to Clipboard" button for the generated HTML.
• Data Validation: Real-time feedback if titles or descriptions exceed recommended character lengths for optimal SEO.

UI/UX Specification

• Layout:
  • Header: Clean title with a brief subtitle explaining the tool's purpose.
  • Main Container: Split view on desktop (Left: Form Inputs, Right: Previews). Stacks vertically on mobile.
  • Form Inputs: Card-based interface for Site Name, Title, Description, Image URL, and Page URL.
  • Preview Area: Styled containers that visually represent how a link looks in a real social feed (border, image container, headline, description, domain).
• Aesthetic:
  • Color Palette: Light Mode only. Background: #f8fafc (Slate 50). Card Backgrounds: #ffffff (White). Text: #1e293b (Slate 800). Accent/Buttons: #2563eb (Blue 600).
  • Typography: Clean, sans-serif fonts (Inter or system-ui).
  • Animations: Smooth fade-in transitions when switching between preview types and subtle "pop" scaling on button hover.

Technical Directives (Strict)

• Single File Architecture: Everything must be contained in one index.html file. CSS styles go in a <style> tag, logic in a <script> tag.
• State Management: Use plain JavaScript objects to hold the input state. Update the DOM dynamically based on input events (input, change).
• Sandbox Safety:
  • DO NOT use localStorage or sessionStorage.
  • DO NOT use alert(), confirm(), or prompt(). Create a custom UI component for notifications.
  • All external links must have target="_blank" and rel="noopener noreferrer".
• Accessibility: Ensure high contrast for text and logical tab order for input fields.
• Responsive Design: Use CSS Grid or Flexbox to transition from a 2-column layout to a single column for screens narrower than 768px.