SEO: URL-Struktur | Next.js

Die URL-Struktur ist ein wichtiger Bestandteil einer SEO-Strategie. Obwohl Google nicht offenlegt, welches Gewicht die einzelnen SEO-Faktoren haben, gelten gut strukturierte URLs als Best Practice – unabhängig davon, ob sie letztlich einen großen oder kleinen Einfluss auf das Ranking haben.

Es empfiehlt sich, einige Prinzipien zu befolgen:

Semantisch: Es ist am besten, URLs zu verwenden, die semantisch sind, also Wörter statt IDs oder zufällige Zahlen enthalten. Beispiel: /learn/basics/create-nextjs-app ist besser als /learn/course-1/lesson-1
Logische und konsistente Muster: URLs sollten einem konsistenten Muster folgen. Beispielsweise sollten Sie alle Produktseiten in einem Ordner gruppieren, anstatt für jedes Produkt unterschiedliche Pfade zu verwenden.
Keyword-fokussiert: Google stützt einen beträchtlichen Teil seiner Systeme immer noch auf die Keywords einer Website. Die Verwendung von Keywords in Ihren URLs kann dazu beitragen, den Zweck der Seiten besser verständlich zu machen.
Keine parameterbasierten URLs: Die Verwendung von Parametern zum Aufbau Ihrer URLs ist in der Regel keine gute Idee. Sie sind in den meisten Fällen nicht semantisch, und Suchmaschinen könnten sie falsch interpretieren und im Ranking herabstufen.

Wie werden Routen in Next.js definiert?

Next.js verwendet ein Dateisystem-basiertes Routing, das auf dem Konzept von Pages basiert. Wenn eine Datei zum pages-Verzeichnis hinzugefügt wird, ist sie automatisch als Route verfügbar. Die Dateien und Ordner im pages-Verzeichnis können verwendet werden, um die gängigsten Muster zu definieren.

Hier einige Beispiele für einfache URLs und wie Sie sie in Ihrem Next.js-Router implementieren würden:

Startseite: https://www.example.com → pages/index.js
Listen: https://www.example.com/products → pages/products.js oder pages/products/index.js
Detailseite: https://www.example.com/products/product → pages/products/product.js

Für einen Blog oder E-Commerce-Shop möchten Sie wahrscheinlich die Produkt-ID oder den Blog-Namen als Slug für die URL verwenden. Dies wird als dynamisches Routing bezeichnet:

Produkt: https://www.example.com/products/nextjs-shirt → pages/products/[product].js
Blog: https://www.example.com/blog/seo-in-nextjs → pages/blog/[blog-name].js

Um dynamisches Routing zu verwenden, können Sie eckige Klammern zu einem Seitennamen in Ihrem products- oder blogs-Unterordner hinzufügen.

Hier ein Beispiel für eine Seite, die für diesen Zweck mit SSG optimiert ist:

// pages/blog/[slug].js
 
import Head from 'next/head';
 
export async function getStaticPaths() {
  // Externe API aufrufen, um Beiträge zu erhalten
  const res = await fetch('https://www.example.com/api/posts');
  const posts = await res.json();
 
  // Pfade für Pre-Rendering basierend auf Beiträgen generieren
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  // Fallback auf 'blocking' setzen. Neue Beiträge nach dem Build werden SSR verwenden,
  // um SEO zu gewährleisten. Danach sind sie statisch für alle weiteren Anfragen
  return { paths, fallback: 'blocking' };
}
 
export async function getStaticProps({ params }) {
  const res = await fetch(`https://www.example.com/api/blog/${params.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
function BlogPost({ blog }) {
  return (
    <>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </>
  );
}
 
export default BlogPost;

Hier ein weiteres Beispiel mit SSR:

// pages/blog/[slug].js
 
import Head from 'next/head';
function BlogPost({ blog }) {
  return (
    <div>
      <Head>
        <title>{blog.title} | My Site</title>
      </Head>
      <div>
        <h1>{blog.title}</h1>
        <p>{blog.text}</p>
      </div>
    </div>
  );
}
 
export async function getServerSideProps({ query }) {
  const res = await fetch(`https://www.example.com/api/blog/${query.slug}`);
  const data = await res.json();
 
  return {
    props: {
      blog: data,
    },
  };
}
 
export default BlogPost;

URL-Struktur

Wie werden Routen in Next.js definiert?

Weiterführende Literatur

On this page