Checklist SEO technique pour un portfolio Next.js

Un portfolio développé avec Next.js peut être rapide et élégant sans pour autant être correctement compris par Google. Pour attirer des recruteurs ou des clients, chaque page doit être accessible, utile, bien structurée et reliée à une intention de recherche précise. Voici une checklist SEO technique concrète, pensée pour les portfolios de développeurs.

1. Définir une intention de recherche pour chaque page

La page d’accueil présente votre spécialité et votre proposition de valeur. Les études de cas démontrent votre travail, les pages de services répondent aux besoins commerciaux et les articles de blog traitent de questions techniques. Évitez de répéter le même titre et la même description sur toutes les routes.

Associez à chaque URL un titre unique, une description convaincante, un H1 descriptif et des sous-titres H2/H3 logiques. Les expressions « développeur Next.js freelance », « développeur web au Maroc » ou « création d’application SaaS » ne sont pertinentes que si elles reflètent réellement votre offre et le contenu de la page.

2. Configurer les métadonnées avec Next.js App Router

Dans l’App Router, utilisez l’export `metadata` pour les pages statiques et `generateMetadata` pour les pages dont le contenu varie, comme les projets ou les articles. Définissez un titre et une description propres à chaque route, ainsi que les informations Open Graph et les URL canoniques.

Centralisez le domaine public préféré, par exemple `https://zkahlaoui.com`, afin d’éviter les variations entre `www`, l’ancien domaine et les environnements de préproduction. Vérifiez le HTML réellement envoyé, pas seulement les composants React.

3. Vérifier l’indexation, les canoniques et les redirections

Chaque page publique importante doit retourner un code HTTP 200, avoir une URL canonique cohérente et ne pas comporter de directive `noindex` involontaire. Une ancienne URL remplacée doit rediriger proprement vers son équivalent avec une redirection permanente. Évitez les chaînes de redirections.

Une URL canonique sert à indiquer la version préférée de contenus similaires ; elle ne remplace ni une redirection ni une bonne architecture d’URL. Une page en français devrait normalement posséder une canonique vers sa propre URL française, pas vers l’anglais.

4. Générer sitemap.xml et robots.txt

Incluez dans le sitemap les URL canoniques publiées : accueil, services, réalisations, articles et pages pertinentes. Excluez les brouillons, les routes privées et les redirections. Avec Next.js, les conventions `app/sitemap.ts` et `app/robots.ts` permettent de générer ces fichiers.

Le fichier `robots.txt` doit faciliter l’exploration des pages publiques, mais il ne suffit pas à garantir ou empêcher l’indexation : pour une page que vous souhaitez retirer des résultats, utilisez une méthode adaptée, comme `noindex` sur une page accessible au robot. Soumettez le sitemap dans Google Search Console.

5. Soigner le SEO multilingue français–anglais

Créez une traduction réellement utile, avec un titre, une description et un texte adaptés aux recherches francophones. Reliez les deux versions équivalentes avec `hreflang` réciproque (`fr` et `en`) et gardez des canoniques propres à chaque langue. Ne déclarez pas une traduction qui n’existe pas ou qui n’est pas publiée.

6. Rendre le contenu accessible au moteur de recherche

Les moteurs de recherche peuvent exécuter du JavaScript, mais le contenu essentiel ne devrait pas dépendre d’une interaction utilisateur. Contrôlez le HTML initial, les liens sous forme de véritables balises `<a>`, les titres, les descriptions d’images et les réponses du serveur. Testez les pages avec l’outil d’inspection d’URL de Search Console.

7. Améliorer Core Web Vitals et l’expérience mobile

Mesurez notamment le LCP (chargement du contenu principal), l’INP (réactivité aux interactions) et le CLS (stabilité de la mise en page). Pour améliorer ces indicateurs, limitez le JavaScript côté client, dimensionnez les médias, optimisez les polices et évitez les animations ou effets lourds au premier affichage.

Utilisez les outils adaptés de Next.js pour les images lorsque cela convient, choisissez une image de couverture de taille raisonnable et testez sur un vrai appareil mobile. PageSpeed Insights et le rapport Core Web Vitals de Search Console donnent des signaux complémentaires : données de laboratoire et expérience réelle.

8. Ajouter des données structurées honnêtes

Des données JSON-LD de type `Person`, `WebSite`, `BreadcrumbList` ou `BlogPosting` peuvent aider à contextualiser votre identité, votre site, vos chemins de navigation et vos articles. Les propriétés doivent correspondre au contenu visible. N’ajoutez pas de notes, d’avis clients ou de résultats inventés.

9. Transformer chaque projet en étude de cas

Une fiche de projet utile expose le problème, votre rôle, la solution, les choix techniques et le résultat observable. Les captures d’écran seules et une liste de technologies ne suffisent pas. Si vous ne disposez pas de métriques vérifiables, décrivez les améliorations sans inventer de pourcentages.

Reliez les études de cas à vos services, à votre page de contact et aux articles pertinents. Un maillage interne naturel guide à la fois les lecteurs et les robots vers les pages importantes.

10. Optimiser les images et les aperçus sociaux

Renseignez des textes alternatifs descriptifs pour les images utiles, conservez des dimensions adaptées et évitez les fichiers trop lourds. Vérifiez l’image `og:image`, les titres et descriptions Open Graph ainsi que l’aperçu lors du partage sur LinkedIn ou d’autres plateformes.

11. Mesurer après publication

Dans Google Search Console, surveillez les pages indexées, les requêtes, les impressions, les clics et le taux de clics. Complétez avec des mesures de conversion : visites de la page contact, clics sur les appels à l’action et demandes qualifiées. Une hausse de trafic sans demandes utiles n’est pas forcément un progrès.

Après quelques semaines de données, cherchez les pages qui génèrent des impressions mais peu de clics, les pages peu visibles malgré un contenu solide et les sujets qui méritent un approfondissement. Évitez de changer un slug sans raison après quelques jours seulement.

Checklist SEO avant mise en ligne

✓ Titre, description et H1 uniques par page. ✓ Canonique HTTPS correcte. ✓ `hreflang` français/anglais réciproque. ✓ Sitemap des pages publiées. ✓ `robots.txt` accessible. ✓ Absence de `noindex` accidentel. ✓ Liens internes fonctionnels. ✓ Images optimisées avec `alt`. ✓ Données structurées fidèles au contenu. ✓ Tests mobile et Core Web Vitals. ✓ Search Console configurée. ✓ Appel à l’action clair.

Questions fréquentes

Combien de temps faut-il pour référencer un portfolio ?

Il n’existe pas de délai garanti. Google doit découvrir, explorer et éventuellement indexer vos pages. Observez les tendances dans Search Console avant d’évaluer l’efficacité d’un nouvel article.

Est-ce que Next.js garantit un bon référencement ?

Non. Next.js fournit des outils pratiques pour les métadonnées, le rendu et les fichiers SEO, mais la qualité du contenu, l’architecture, les performances et la pertinence restent déterminantes.

Faut-il une page dédiée pour chaque projet ?

Oui, lorsque vous pouvez présenter une véritable étude de cas. Une page riche et crédible vaut mieux que plusieurs pages presque vides.

Comment gérer un portfolio en français et en anglais ?

Proposez des contenus adaptés à chaque langue et associez les URL équivalentes avec des liens `hreflang`. Chaque version publiée garde sa propre URL canonique.

Ressources officielles

Documentation Next.js : Metadata and OG images, sitemap et robots.txt. Consultez aussi Google Search Central pour les recommandations sur l’exploration, l’indexation et les données structurées.

Vous préparez votre propre portfolio ou une application web ? Parlons de votre projet.