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

Vous avez un site Next.js (une vitrine, un SaaS, un portfolio) mais pas encore de blog. Et vous n'avez pas envie d'installer WordPress, de brancher un CMS headless ou de coder vous-même les pages, le sitemap et les balises SEO.

Ce guide vous montre comment ajouter un blog sous monsite.com/blog, rendu côté serveur et prêt pour Google, en une dizaine de 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.

Étape 1 : créer votre blog

1. Connectez-vous au tableau de bord bloglet.
2. Cliquez sur Nouveau site.
3. Renseignez :
   • le nom du site, affiché publiquement (par exemple « Blog Acme ») ;
   • l'identifiant, en minuscules et avec des tirets (par exemple acme). Il sert d'adresse à votre blog sur bloglet et ne pourra plus être changé ;
   • le domaine de votre site, facultatif à ce stade (nous y revenons à l'étape 4).
4. Validez.

Votre blog est immédiatement en ligne à cette adresse :

https://bloglet.app/acme/blog

Il est déjà rendu côté serveur et indexable. Si cette adresse vous suffit, vous pouvez vous arrêter là. Mais pour que vos articles profitent à votre site, la suite du guide le place sous votre propre domaine.

Étape 2 : publier votre premier article

1. Dans le tableau de bord, ouvrez votre site, puis Articles et Nouvel article.
2. Écrivez votre texte en Markdown. L'onglet Aperçu l'affiche avec le thème de votre blog.
3. Complétez les réglages :
   • le titre, clair et descriptif ;
   • le résumé, une ou deux phrases qui servent de description dans Google et dans la liste des articles ;
   • l'adresse de l'article, générée automatiquement à partir du titre ;
   • la catégorie et les tags, pour organiser votre contenu ;
   • une image de couverture, utilisée aussi pour les aperçus sur les réseaux sociaux.
4. Passez le statut sur Publié et enregistrez.

Le panneau Aperçu dans Google vous montre comment l'article apparaîtra dans les résultats de recherche, et vous signale un titre ou un résumé trop long pour être affiché en entier.

Votre article est en ligne :

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

Chaque page est générée côté serveur : le texte est présent dans le HTML dès le premier chargement, sans attendre le JavaScript. C'est ce qui permet à Google, et aux robots d'IA, de le lire. J'explique pourquoi c'est si important dans Pourquoi votre site React ou Next.js est mal indexé.

Étape 3 : choisir où afficher votre blog

Deux options, selon votre besoin :

La suite de ce guide couvre la seconde option, la plus intéressante pour votre référencement : chaque article renforce votre site principal au lieu d'un site voisin. Si vous hésitez, les arguments sont détaillés dans Blog en sous-domaine ou en /blog : lequel choisir pour le SEO ?

Étape 4 : déclarer votre domaine dans bloglet

Cette étape ne touche pas à votre projet Next.js. Elle indique à bloglet l'adresse officielle de vos articles, utilisée pour l'URL canonique, les balises Open Graph, le flux RSS, le sitemap et les données structurées. Si vous avez déjà saisi votre domaine à l'étape 1, passez directement à l'étape 5.

1. Ouvrez Intégration & API dans le menu de votre site, onglet Publier sous /blog.

2. Dans Indiquez le domaine de votre site, saisissez votre domaine :

   Copier le code

   monsite.com
   

3. Enregistrez.

bloglet génère désormais toutes ses adresses en https://monsite.com/blog/... au lieu de https://bloglet.app/acme/blog/....

Important : à ce stade, monsite.com/blog n'affiche encore rien. C'est votre projet Next.js qui va aller chercher les pages chez bloglet. C'est l'étape suivante.

Étape 5 : brancher /blog sur bloglet

Ajoutez ces quatre règles de rewrite dans le fichier 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 l'identifiant de votre blog. Si votre fichier contient déjà une fonction rewrites(), ajoutez simplement les quatre lignes au tableau qu'elle renvoie.

Astuce : l'onglet Publier sous /blog de la page Intégration & API affiche ce code avec votre identifiant, prêt à copier.

Redéployez votre site. Voici ce qui se passe désormais quand quelqu'un visite un article :

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

Un rewrite n'est pas une redirection : l'adresse affichée dans le navigateur reste monsite.com/blog/mon-article. Le visiteur ne quitte jamais votre site, et Google voit vos articles sous votre domaine. Pour comprendre en détail le fonctionnement des rewrites, les pièges à éviter et les alternatives, lisez Next.js rewrites : servir un blog sous /blog.

Étape 6 : vérifier que tout fonctionne

Avant d'annoncer votre blog, prenez deux minutes pour contrôler ces quatre points.

1. Le contenu est dans le HTML

Ouvrez un article sur monsite.com/blog/..., puis affichez le code source de la page (clic droit, puis « Afficher le code source », et non l'inspecteur). Le texte de l'article doit y apparaître directement.

2. L'URL canonique pointe vers votre domaine

Dans le code source, cherchez la balise canonique :

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

Elle doit contenir votre domaine, pas bloglet.app. Si ce n'est pas le cas, vérifiez le domaine saisi à l'étape 4.

3. Les balises de partage sont présentes

Vérifiez la présence des balises og:title, og:description, og:image et og:url. Le plus simple : collez le lien d'un article dans une conversation Slack ou LinkedIn et regardez l'aperçu.

4. Le sitemap et le flux RSS répondent

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

Déclarez ensuite le sitemap dans Google Search Console, rubrique Sitemaps. Pour aller plus loin, la checklist SEO technique d'un blog passe en revue les 15 points à surveiller.

Bonus : afficher vos articles ailleurs sur votre site

Vous voulez montrer vos derniers articles sur votre page d'accueil ? bloglet propose un petit script à intégrer :

<div id="blog"></div>

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

Créez une clé publique (elle commence par pk_) dans Intégration & API, onglet Clés API, puis collez-la à la place de pk_VOTRE_CLE. L'onglet Widget détaille toutes les options. Ce widget est chargé en JavaScript : son contenu n'est pas indexé par les moteurs de recherche. Utilisez-le en complément de votre blog sous /blog, pas à sa place.

Si vous préférez construire vous-même l'affichage, l'API (/api/v1/posts) renvoie vos articles publiés au format JSON.

Et si mon site n'est pas en Next.js ?

Ce guide couvre Next.js. D'autres guides arrivent pour les autres hébergements : Cloudflare Workers, nginx et Netlify.

En attendant, l'adresse bloglet (bloglet.app/votre-identifiant/blog) fonctionne sans aucune configuration, quel que soit votre hébergeur.

Récapitulatif

Environ 10 minutes pour un blog sous votre domaine, rendu côté serveur, avec sitemap, flux RSS, balises Open Graph et données structurées, sans rien à maintenir.

Pour aller plus loin

• Personnalisez l'apparence de votre blog dans Apparence : mise en page, couleurs, polices, logo et liens de votre site dans l'en-tête.
• Organisez vos articles avec des catégories, pour aider vos lecteurs à naviguer.
• Publiez régulièrement : un article utile par mois vaut mieux que dix articles vides.

Prêt à vous lancer ? Créez votre blog gratuitement.