OG Viewer

Contexte

OG Viewer est un outil web d'analyse de sites qui permet d'extraire et de visualiser les métadonnées d'une URL donnée : balises Open Graph, Twitter Card, informations SEO, technologies détectées et données de chargement.

Le parti pris central est la confidentialité : tout le traitement est effectué localement côté serveur Next.js, sans aucune API externe, sans collecte de données, sans clé d'API requise.

Fonctionnalités

À partir d'une URL saisie dans le formulaire :

• Extraction des métadonnées — titre, description, favicon, images, balises <meta> complètes
• Prévisualisation Open Graph — rendu visuel de la card telle qu'elle apparaîtra sur les réseaux sociaux
• Balises Twitter Card — analyse et prévisualisation des tags spécifiques à X/Twitter
• Détection du stack technique — frameworks, CMS, bibliothèques JavaScript détectés sur la page analysée (via simple-wappalyzer)
• Analyse SEO — contrôle des éléments clés (balises title, meta description, structure…)
• Métriques de chargement — données de performance de la page
• Mode clair / sombre

Stack technique

Next.js 15         Framework (App Router, Turbopack)
TypeScript         Typage intégral
React Hook Form    Gestion du formulaire de saisie d'URL
Zod                Validation et parsing de l'URL saisie
Metascraper        Extraction des métadonnées (suite de plugins)
Cheerio            Parsing HTML côté serveur
JSDOM              Environnement DOM pour l'analyse des pages
Axios              Récupération du contenu des URLs
simple-wappalyzer  Détection du stack technique
Tailwind CSS v4    Styling
Radix UI           Composants d'interface accessibles
next-themes        Gestion du thème clair / sombre

Fonctionnement technique

L'analyse se déroule entièrement côté serveur (Route Handler Next.js) :

1. L'URL saisie est validée avec Zod avant tout traitement
2. Axios récupère le HTML brut de la page cible
3. Metascraper extrait les métadonnées structurées (OG, Twitter, SEO…)
4. Cheerio parse le HTML pour des extractions complémentaires
5. simple-wappalyzer analyse les scripts et headers pour identifier les technologies
6. Le tout est renvoyé au client sous forme d'un objet JSON structuré

Aucune donnée n'est persistée, aucune requête n'est envoyée à un service tiers.

Ce que j'ai appris

Ce projet m'a appris à construire un pipeline de scraping robuste avec Node.js : gérer les timeouts, les pages qui bloquent les bots, les redirections, et les erreurs réseau de manière gracieuse.

L'utilisation de Metascraper m'a montré la valeur des bibliothèques spécialisées : plutôt que de parser manuellement les dizaines de variantes de balises OG et Twitter, déléguer cette logique à une lib éprouvée rend le code plus fiable et maintenable.

C'est aussi un projet où la validation des entrées utilisateur a été particulièrement importante — une URL mal formée ou pointant vers une ressource inaccessible doit produire un message d'erreur clair, pas un crash.