SEO technique et performance : Les fondamentaux pour un site Next.js qui ranke

Vous avez un beau site Next.js, mais il n'apparaît pas dans les résultats de recherche ? Le problème vient probablement du SEO technique et de la performance. Chez Barry Hub, nous optimisons chaque site pour qu'il soit à la fois visible et performant.

Pourquoi le SEO technique est crucial

Google a évolué. Aujourd'hui, l'algorithme prend en compte :

• Le contenu (toujours important)
• La performance (Core Web Vitals depuis 2021)
• L'expérience utilisateur (mobile-first, accessibilité)
• La technique (structure, métadonnées, sitemap)

Résultat : Un site lent ou mal structuré ne rankera pas, même avec un excellent contenu.

Les 5 piliers du SEO technique Next.js

1. Server-Side Rendering (SSR) et Static Site Generation (SSG)

Le problème avec React seul (SPA) :

• Contenu injecté via JavaScript
• Google peut avoir du mal à indexer
• First Contentful Paint lent

La solution Next.js :

// SSG pour les pages statiques (blog, produits)
export async function getStaticProps() {
  return {
    props: { data },
    revalidate: 3600 // ISR : régénération toutes les heures
  }
}

// SSR pour les pages dynamiques (dashboard, contenu personnalisé)
export async function getServerSideProps() {
  return {
    props: { data }
  }
}

Impact :

• ✅ HTML complet côté serveur
• ✅ Indexation garantie par Google
• ✅ First Contentful Paint < 1s

2. Métadonnées dynamiques et Open Graph

Chaque page doit avoir :

export const metadata = {
  title: "Titre unique et descriptif | Barry Hub",
  description: "Description de 150-160 caractères avec mots-clés",
  openGraph: {
    title: "Titre pour les réseaux sociaux",
    description: "Description pour le partage",
    images: [{ url: "/og-image.jpg" }],
  },
  alternates: {
    canonical: "https://barryhubs.com/page"
  }
}

Pourquoi c'est important :

• Titre et description dans les résultats Google
• Prévisualisation attractive sur les réseaux sociaux
• Évite le contenu dupliqué (canonical)

3. Structure sémantique et données structurées

HTML sémantique :

  

    

      
Titre principal
      2024-11-15
    
    

      
Sous-titre
      
Contenu...
    
  

JSON-LD pour les données structurées :