SEO

Tout est branché. Le travail consiste à penser à le remplir.

Métadonnées par page#

export const metadata: Metadata = {
  title: "Tarifs",
  description: "Un paiement, les deux dépôts, aucun renouvellement.",
  alternates: { canonical: "/pricing" },
};

Le layout racine pose metadataBase et un gabarit de titre, donc une page fournit "Tarifs" et l'onglet affiche Tarifs — Acme. Les pages dynamiques exportent generateMetadata à la place, et cette fonction peut être asynchrone, donc le titre d'un article peut venir du fichier qu'il affiche.

Sitemap et robots#

src/app/sitemap.ts et src/app/robots.ts sont du code, pas des fichiers à maintenir. Le sitemap lit vos répertoires de contenu, donc un nouvel article y apparaît dès que le fichier existe. Tout ce que vous ajoutez avec ses propres URL demande quelques lignes là-dedans, sinon rien ne le listera.

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await allPosts();
  return [
    { url: `${base}/`, priority: 1 },
    ...posts.map((post) => ({ url: `${base}/blog/${post.slug}` })),
  ];
}

Images sociales#

src/app/opengraph-image.tsx génère la carte à la requête avec le runtime d'image de Next. C'est du JSX, donc il peut lire le titre de la page au lieu d'être un PNG statique que quelqu'un doit réexporter à chaque renommage.

Testez-le en ouvrant /opengraph-image directement. Puis vérifiez avec le post inspector LinkedIn, le plus strict des trois grands et celui qui met le plus en cache.

Ce qui déplace vraiment l'aiguille#

Le SEO technique est le minimum vital et prend un après-midi. Pour un outil de développeur, presque tout le trafic vient de deux endroits :

• Une documentation publique. Chaque page est une requête de longue traîne que quelqu'un est en train de taper. Cette page-ci existe en partie pour cette raison, et le kit embarque le même système de docs si vous en voulez un.
• Écrire sur le problème précis que vous avez résolu. Pas « 10 conseils pour les fondateurs SaaS ». La chose qui vous a pris une journée à comprendre, écrite comme vous auriez aimé la trouver.