On-Page SEO

Auf hoher Ebene bezieht sich On-Page-SEO auf die Überschriften und Links, die die Gesamtstruktur einer Seite ausmachen. Überschriften zeigen die Wichtigkeit innerhalb des Dokuments an und Links verbinden das Web miteinander.

Überschriften und H1

Überschriften helfen Nutzern, die Struktur einer Seite zu verstehen und zu erkennen, was sie in den folgenden Absätzen lesen werden. Sie erleichtern auch Suchmaschinen die Arbeit, die wichtigsten Teile einer Seite zu identifizieren.

Überschriften reichen von 1 bis 6, wobei Heading 1 als die wichtigste gilt. Es wird empfohlen, das H1-Tag auf jeder Seite zu verwenden. H1 sollte repräsentieren, worum es auf der Seite geht, und dem title-Tag ähneln.

function Page() {
  return <h1>Ihre Hauptüberschrift der Seite</h1>;
}

Interne Links

Das Internet ist durch Links verbunden. Ohne Links von einer Website zur anderen würde das Internet wahrscheinlich nicht existieren. Websites, die mehr Links erhalten, gelten tendenziell als vertrauenswürdiger bei Nutzern.

Google hat dieses Prinzip mit der Erfindung des PageRank-Algorithmus eingeführt.

Der PageRank-Algorithmus bewertet grob gesagt Domains basierend darauf, wie viele Links sie erhalten (Quantität) und von welchen Domains (Qualität). Viele Links von Spam-Websites haben wahrscheinlich wenig bis keinen Wert.

Ein Link von einer großen nationalen Nachrichtenwebsite ist jedoch wahrscheinlich sehr wertvoll für Suchmaschinen. Deshalb sind Links wichtig und Sie sollten sie sowohl intern zwischen Ihren Seiten als auch extern zu anderen Websites einbinden. Links müssen immer href verwenden, um für PageRank-Berechnungen berücksichtigt zu werden.

next/link

Next.js bietet die Link-Komponente, die clientseitige Übergänge zwischen Routen ermöglicht. Eine einfache Anwendung sieht wie folgt aus:

function NavLink({ href, name }) {
  return (
    <Link href={href}>
      <a>{name}</a>
    </Link>
  );
}
 
export default NavLink;

Die href-Prop ist erforderlich und fügt den Link korrekt zum Anchor-Tag hinzu, was für die SEO entscheidend ist. Wenn Google eine Seite crawlt, wird es diesem Link folgen, ohne auf JavaScript angewiesen zu sein.

Falls das Kindelement von Link jedoch eine benutzerdefinierte Komponente ist, die ein a-Tag umschließt, müssen Sie passHref zu Link hinzufügen. Dies ist notwendig, wenn Sie Bibliotheken wie styled-components verwenden. Ohne dies hätte das a-Tag kein href-Attribut, was sich auf die SEO Ihrer Seite auswirkt.

So verwenden Sie passHref:

import Link from 'next/link';
import styled from 'styled-components';
 
// Dies erstellt eine benutzerdefinierte Komponente, die ein <a>-Tag umschließt
const RedLink = styled.a`
  color: red;
`;
 
function NavLink({ href, name }) {
  // passHref muss zu Link hinzugefügt werden
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  );
}
 
export default NavLink;

Falls Sie ESLint verwenden, bietet Next.js eine Regel, um dies zu verhindern.

Weiterführende Literatur

• Next.js: Link
• Next.js: eslint-plugin-next