Comment ajouter un blog SEO-ready à un site Next.js (guide 2026)

Vous avez un site Next.js — vitrine, SaaS ou portfolio — mais pas de blog. Et vous ne voulez pas ouvrir WordPress, monter un CMS headless ou passer deux semaines à développer un panneau d'administration.

Ce guide s'adresse aux développeurs qui ont un site Next.js (souvent hébergé sur Vercel) et veulent ajouter un blog sous /blog, indexable par Google, en quelques minutes avec bloglet.

Ce dont vous aurez besoin

• Un compte bloglet (gratuit)
• Un site Next.js existant, déployé ou en local
• Environ 10 minutes

Note : pour servir le blog sous monsite.com/blog avec des URLs SEO personnalisées, l'offre Pro est requise. L'URL bloglet par défaut fonctionne dès le plan gratuit.

Étape 1 — Créer votre site bloglet

1. Connectez-vous au dashboard bloglet.
2. Cliquez sur Nouveau site.
3. Renseignez :
   • Nom : le nom public de votre blog (ex. « Blog Acme »)
   • Slug : identifiant en kebab-case (ex. acme) — il apparaîtra dans l'URL bloglet
4. Validez.

Votre blog est immédiatement accessible à :

https://bloglet.app/acme/blog

C'est fonctionnel, indexable, et ne demande aucune configuration côté serveur. Vous pouvez vous arrêter ici si cette URL vous convient.

Étape 2 — Publier votre premier article

1. Dans le dashboard, ouvrez votre site → Articles → Nouvel article.
2. Rédigez votre contenu en Markdown.
3. Renseignez les champs importants :
   • Titre — clair et descriptif
   • Slug — en kebab-case (ex. mon-premier-article)
   • Excerpt — résumé court (≤ 300 caractères), utilisé pour le SEO et les cartes d'articles
   • Tags — pour organiser votre contenu
4. Passez le statut sur Publié et enregistrez.

Votre article est en ligne à :

https://bloglet.app/acme/blog/mon-premier-article

Chaque publication régénère automatiquement les pages HTML côté serveur — pas de contenu injecté uniquement en JavaScript. C'est ce qui rend le blog indexable.

Étape 3 — Choisir votre méthode d'intégration

Deux approches, selon votre besoin :

La suite de ce guide couvre la méthode domaine racine, la plus courante pour un blog professionnel sur Next.js.

Étape 4 — Configurer votre domaine dans bloglet

Cette étape ne modifie pas votre projet Next.js. Elle indique à bloglet quelles URLs utiliser pour le SEO : canonical, Open Graph, RSS et JSON-LD.

1. Allez dans API & clés de votre site.

2. Dans Domaine personnalisé, entrez votre domaine racine :

   monsite.com
   

3. Enregistrez.

Désormais, bloglet génère ses métadonnées vers https://monsite.com/blog/... au lieu de https://bloglet.app/acme/blog/....

Important : bloglet ne reçoit pas encore le trafic sur monsite.com. Il sert le contenu en interne et attend que votre projet Next.js redirige /blog vers lui. C'est l'étape suivante.

Étape 5 — Connecter /blog à bloglet avec Next.js

Ajoutez des rewrites dans next.config.ts de votre site :

import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  async rewrites() {
    return [
      {
        source: "/blog",
        destination: "https://bloglet.app/acme/blog",
      },
      {
        source: "/blog/:path*",
        destination: "https://bloglet.app/acme/blog/:path*",
      },
      {
        source: "/rss.xml",
        destination: "https://bloglet.app/acme/rss.xml",
      },
      {
        source: "/blog-sitemap.xml",
        destination: "https://bloglet.app/acme/sitemap.xml",
      },
    ]
  },
}

export default nextConfig

Remplacez acme par le slug de votre site bloglet.

Le dashboard bloglet génère ce snippet automatiquement dans API & clés, prêt à copier.

Redéployez votre site sur Vercel. Le flux devient :

Visiteur → monsite.com/blog/mon-article
              ↓
    Rewrites Next.js (votre projet)
              ↓
    bloglet.app/acme/blog/mon-article
              ↓
    HTML complet renvoyé au visiteur

Le visiteur reste sur monsite.com. Google reçoit du HTML serveur. Les canonical pointent vers monsite.com/blog/....

Cas particulier : bloglet sur bloglet.com

Si vous ajoutez le blog de bloglet sur le site marketing bloglet lui-même, le principe est identique : rewrites internes dans le même projet Next.js. bloglet sert le contenu à /{slug}/blog et votre domaine public expose /blog.

Étape 6 — Vérifier que le SEO fonctionne

Avant de soumettre votre sitemap à Google Search Console, vérifiez ces points :

1. Le HTML est servi côté serveur

Ouvrez https://monsite.com/blog/mon-premier-article, faites Afficher le code source (pas l'inspecteur). Vous devez voir le contenu de l'article directement dans le HTML — pas un <div> vide rempli par JavaScript.

2. Les canonical sont corrects

Dans le code source, cherchez :

<link rel="canonical" href="https://monsite.com/blog/mon-premier-article" />

L'URL doit pointer vers votre domaine, pas vers bloglet.app.

3. Les métadonnées Open Graph

Vérifiez la présence de balises og:title, og:description et og:url avec vos URLs.

4. Le sitemap et le RSS

• Sitemap : https://monsite.com/blog-sitemap.xml
• Flux RSS : https://monsite.com/rss.xml

Soumettez le sitemap dans Google Search Console.

Bonus — Intégration rapide sans SEO (widget)

Si vous voulez afficher une liste d'articles sur une page existante sans vous soucier de l'indexation (ex. section « Derniers articles » sur votre homepage), bloglet propose un script embed :

<script src="https://bloglet.app/embed.js" data-site="acme" async></script>

Ajoutez-le avant </body>. C'est instantané, mais le contenu n'est pas indexable par les moteurs de recherche. Réservez cette méthode aux cas où le SEO n'est pas l'objectif.

Autres méthodes d'intégration

Ce guide couvre Next.js. D'autres guides arriennent bientôt pour les stacks suivantes :

• Cloudflare Worker
• nginx
• Netlify

En attendant, l'URL bloglet par défaut (bloglet.app/{slug}/blog) fonctionne sans aucune configuration, quel que soit votre hébergeur.

Prochaines étapes

• Personnalisez le thème de votre blog dans les paramètres du site
• Explorez l'API REST pour des intégrations avancées (/api/v1/posts)
• Publiez régulièrement — la qualité prime sur la quantité pour le SEO

Créer mon blog gratuitement →