🔗 URL Metadata Preview & SEO Analyzer

A lightweight client-side web tool that generates rich previews for URLs by extracting metadata such as title, description, Open Graph tags, and preview images.
The project also provides a basic SEO checklist and stores recently analyzed URLs using browser localStorage.

---

🌐 Live Demo

👉 https://vsarvani2004.github.io/URLMetadataPreview/

---

🎯 Purpose of the Project

When users share links on platforms like WhatsApp, LinkedIn, or Slack, a preview card is automatically generated using website metadata. This project simulates that behavior in a simplified way and helps users:

• Preview how a URL will appear when shared
• Check if essential SEO and Open Graph tags are present
• Validate URLs before publishing or sharing

---

✨ Features

• 🔍 URL validation (auto-detects invalid URLs)
• 🖼️ Rich metadata preview (title, description, image)
• 📊 SEO tag checklist:
  • Title tag
  • Meta description
  • Open Graph title
  • Open Graph image
• 🕘 URL history (stored using localStorage)
• 🎨 Clean, responsive UI with modern styling
• ⚠️ Graceful error handling for restricted websites

---

...

📸 Screenshots

🛠️ Tech Stack

• HTML5
• CSS3
• JavaScript (ES6)
• Browser APIs:
  • Fetch API
  • DOMParser
  • localStorage

---

## 📂 Project Structure

URLMetadataPreview/
├── index.html
├── README.md
└── images/
├── img1.png
├── img2.png
└── img3.png

🧠 How It Works

1. User enters a valid URL
2. The app fetches the website HTML using a public proxy
3. Metadata is extracted using DOM parsing
4. A preview card and SEO checklist are generated
5. The URL is saved in browser history for quick access

---

⚠️ Limitations

• Some enterprise websites (e.g., Amazon, Google) block client-side scraping
• Since this is a frontend-only project, metadata access depends on website permissions

In production systems, this is typically handled via backend services.

---

📚 Learning Outcomes

• Understanding SEO and Open Graph metadata
• Handling CORS and real-world web limitations
• Improving UX with validation and loading states
• Using browser storage for persistence
• Writing clean, explainable frontend logic

---

📦 Future Enhancements

• Dark mode toggle
• Export SEO report
• Mobile preview simulation
• Backend-based metadata fetching

---

👩‍💻 Author

Sarvani Voolapalli

---

⭐ If you find this project useful, feel free to star the repository!