A metadata inspection tool that helps you analyze your website's metadata, social cards, and technical tags in real-time.
- 🔍 Comprehensive metadata inspection
- Title, description, and keywords analysis
- Open Graph protocol support
- Twitter Cards integration
- Facebook verification tags
- Discord and Slack link previews
- 🛠️ Technical metadata analysis
- Canonical URL verification
- Robots meta directives
- Language and viewport settings
- Character encoding detection
- Favicon and touch icons validation
- 📱 Modern UI Features
- Mobile-responsive design
- Dark mode support
- Real-time metadata updates
- Copy to JSON functionality
- Image preview capabilities
- Framework: Next.js 15.2.4
- Language: TypeScript 5
- UI:
- Tailwind CSS 4
- shadcn/ui components
- Radix UI primitives
- State Management: TanStack Query v5
- Icons: Lucide Icons
- Development Tools:
- ESLint 9
- PostCSS
- Turbopack (for development)
src/
├── app/ # Next.js app router
│ ├── api/ # API routes
│ ├── page.tsx # Main application page
│ └── layout.tsx # Root layout
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── metadata-section.tsx
│ ├── metadata-field.tsx
│ └── image-preview.tsx
├── hooks/ # Custom React hooks
│ └── use-metadata.ts
└── lib/ # Utility functions
├── metadata.ts # Metadata processing
├── utils.ts # Helper functions
└── constants.ts # Application constants
- Node.js 20.x or later
- pnpm (recommended) or npm
-
Clone the repository:
git clone https://github.com/rhmnaulia/metalens.git cd metalens -
Install dependencies:
pnpm install
-
Start the development server:
pnpm dev
-
Open http://localhost:3000 in your browser.
The application includes the following API endpoints:
/api/metadata- Fetches and analyzes metadata from a given URL- Additional endpoints for specific metadata types and analysis
MetaLens is built with a modern, component-based architecture:
- Frontend: Next.js with App Router for server-side rendering and API routes
- State Management: React Query for efficient data fetching and caching
- UI Components: Modular components built with Radix UI primitives and shadcn/ui
- Metadata Processing: Server-side metadata extraction and analysis
- Styling: Tailwind CSS for utility-first styling with custom animations
This project is licensed under the MIT License - see the LICENSE file for details.
- Aulia Rahman
- GitHub: @rhmnaulia
- Twitter: @rhmnaul