SEO

Optimisation pour les moteurs de recherche avec métadonnées, OpenGraph, Twitter cards, sitemap et données structurées.

Vue d'ensemble

ScaleRocket inclut une configuration SEO intégrée utilisant l'API metadata de Next.js. La configuration couvre les titres de page, les descriptions, les balises OpenGraph, les Twitter cards, les données structurées et les directives de crawl.

Configuration des métadonnées

Les métadonnées racine sont définies dans src/app/layout.tsx :

export const metadata: Metadata = {
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate with authentication, payments, emails, admin panel, and more.",
  keywords: [
    "saas boilerplate",
    "saas template",
    "next.js starter",
    "supabase template",
    "stripe integration",
    "saas starter kit",
  ],
};

Mettez à jour title, description et keywords pour correspondre à votre produit.

Métadonnées par page

Surchargez les métadonnées sur n'importe quelle page en exportant un objet metadata :

// src/app/blog/page.tsx
export const metadata: Metadata = {
  title: "Blog — YourBrand",
  description: "Latest updates and tutorials.",
};

OpenGraph et Twitter Cards

Les deux sont configurés dans les métadonnées du layout racine :

openGraph: {
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate...",
  type: "website",
  // Add these for richer previews:
  url: "https://yoursite.com",
  siteName: "ScaleRocket",
  images: [{ url: "/og-image.png", width: 1200, height: 630 }],
},
twitter: {
  card: "summary_large_image",
  title: "ScaleRocket — Ship your SaaS in days, not months",
  description: "The production-ready SaaS boilerplate...",
  // images: ["/og-image.png"],
},

Image OG

Placez votre image OpenGraph dans public/og-image.png (taille recommandée : 1200x630px). Ajoutez la propriété images aux objets openGraph et twitter.

Sitemap

Créez un fichier sitemap.ts pour la génération automatique du sitemap :

// src/app/sitemap.ts
import { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    { url: "https://yoursite.com", lastModified: new Date(), priority: 1 },
    { url: "https://yoursite.com/docs", lastModified: new Date(), priority: 0.8 },
    // Add more URLs as needed
  ];
}

Robots.txt

Créez un fichier robots.ts pour contrôler l'accès des robots d'indexation :

// src/app/robots.ts
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: { userAgent: "*", allow: "/", disallow: ["/api/", "/admin/"] },
    sitemap: "https://yoursite.com/sitemap.xml",
  };
}

Données structurées (JSON-LD)

Ajoutez des données structurées pour aider les moteurs de recherche à comprendre votre contenu :

// In any page component
<script
  type="application/ld+json"
  dangerouslySetInnerHTML={{
    __html: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "SoftwareApplication",
      name: "ScaleRocket",
      description: "SaaS boilerplate for rapid development",
      applicationCategory: "DeveloperApplication",
      offers: {
        "@type": "Offer",
        price: "99",
        priceCurrency: "USD",
      },
    }),
  }}
/>

Liste de vérification

Mettre à jour title et description dans src/app/layout.tsx
Remplacer keywords par des termes pertinents pour votre produit
Ajouter une image OG dans public/og-image.png
Créer src/app/sitemap.ts avec vos URLs
Créer src/app/robots.ts pour contrôler l'indexation
Ajouter des données structurées JSON-LD sur les pages clés
Tester avec le Test des résultats enrichis Google

Fini ? Marquez cette page comme terminée.

SEO

On this page