# Open Graph Metadata Generator - Full Documentation

This document provides a comprehensive overview of the Open Graph Metadata Generator project, including its architecture, component breakdown, and technical details.

## Project Overview

The Open Graph Metadata Generator is a specialized web application designed to simplify the process of creating and validating meta tags for search engine optimization (SEO) and social media sharing. It streamlines the creation of tags for Open Graph (Facebook/LinkedIn), Twitter Cards, and structured data (JSON-LD).

- **Production URL**: https://og-meta.ytools.in
- **Repository**: https://github.com/om-chauhan/open-graph-metadata-generator

---

## Technical Architecture

The project is built using modern web technologies focused on performance, type safety, and user experience.

- **Frontend Framework**: [Next.js 15](https://nextjs.org/) using the App Router.
- **Language**: [TypeScript](https://www.typescriptlang.org/) for robust type checking.
- **Styling**: [Tailwind CSS](https://tailwindcss.com/) for utility-first styling.
- **UI Components**: [Radix UI](https://www.radix-ui.com/) primitives styled with [Shadcn UI](https://ui.shadcn.com/).
- **Validation**: [Zod](https://zod.dev/) for schema-based form validation.
- **Form Management**: [React Hook Form](https://react-hook-form.com/).
- **Icons**: [Lucide React](https://lucide.dev/).

---

## Core Components

### 1. Metadata Generator (`components/metadata-generator.tsx`)
The central hub of the application. It manages the global form state using `react-hook-form` and `zod`. It coordinates between the input tabs and the preview/output sections.

### 2. Social Preview (`components/social-preview.tsx`)
Provides a pixel-perfect (representative) rendering of how the metadata will appear on:
- **Twitter/X**: Both "summary" and "summary_large_image" card types.
- **Facebook**: Standard post preview.

### 3. Code Output (`components/code-output.tsx`)
Generates and formats the final code snippets based on the user's input. It supports:
- **Next.js Metadata API**: Modern `export const metadata = {}` format.
- **HTML**: Classic `<meta>` tags.
- **JSON-LD**: Structured data script blocks.
- **React Helmet**: For legacy React applications.

### 4. Image Uploader (`components/image-uploader.tsx`)
Allows users to either provide a direct URL or upload/select an image to be used as the `og:image`.

---

## Features In-Depth

### Basic Metadata
- **Title**: Recommended length ~60 characters.
- **Description**: Recommended length ~160 characters.
- **URL**: The canonical absolute URL of the page.
- **Image**: High-quality visual for social sharing (1200x630px recommended).

### Twitter Specifics
- Customization of Twitter Card types.
- Attribution to site and creator handles.

### Facebook Specifics
- Open Graph type selection (Website, Article, Book, Profile, etc.).
- Facebook App ID association for analytics.

### SEO & Advanced
- **Locale**: Support for multiple languages (en_US, en_GB, es_ES, fr_FR, etc.).
- **Site Name**: Global site identifier.
- **JSON-LD**: Automatic generation of `Website` structured data.
- **Canonical Tag**: Ensures search engines index the primary version of the page.

### Validation Engine
The tool provides real-time feedback on:
- Title length (warns if > 60 chars)
- Description length (warns if < 10 or > 160 chars)
- Image presence
- URL validity

---

## Technical Details

### File Structure
- `/app`: Next.js App Router pages and layouts.
- `/components`: UI and logic components.
- `/components/ui`: Low-level Shadcn UI components.
- `/hooks`: Custom React hooks (e.g., `use-toast`).
- `/lib`: Helper functions and utilities.

### Deployment
Optimized for deployment on [Vercel](https://vercel.com) or any platform supporting Next.js 15.

---

## Contribution

For contributions, please refer to the [GitHub repository](https://github.com/om-chauhan/open-graph-metadata-generator).