logoNext.js
DokumentationBlogLernen

Metadaten

Metadaten sind eine Zusammenfassung des Website-Inhalts und werden verwendet, um der Seite einen Titel, eine Beschreibung und ein Bild zuzuordnen.

Titel

Das Title-Tag ist eines der wichtigsten SEO-Elemente aus zwei Hauptgründen:

Erstens ist es das, was Nutzer sehen, wenn sie in den Suchergebnissen auf Ihre Website klicken.

Zweitens ist es eines der Hauptelemente, die Google verwendet, um den Inhalt Ihrer Seite zu verstehen. Die Verwendung von Keywords im Titel wird empfohlen, da dies in der Regel zu verbesserten Ranking-Positionen in Suchmaschinen führt.

Hier ein Beispiel:

<title>iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple</title>

Diese Seite enthält alle Haupt-Keywords und macht sie für Nutzer attraktiv, indem sie eine klare Wertaussage zeigt: Rabatte!

Beschreibung

Das Description-Meta-Tag ist ein weiteres wichtiges SEO-Element, allerdings weniger bedeutend als der Titel. Laut Google wird dieses Element nicht für Ranking-Zwecke berücksichtigt, aber es kann Ihre Klickrate in den Suchergebnissen beeinflussen.

Verwenden Sie das Description-Meta-Tag, um die Informationen im Titel zu ergänzen. Fügen Sie hier weitere Keywords ein, falls welche nicht in den Titel passten. Diese Keywords werden fett dargestellt, wenn sie in der Suche eines Nutzers enthalten sind.

Ein Beispiel für ein Description-Meta-Tag in HTML:

<meta
  name="description"
  content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
/>

So sieht es auf der Seite aus, wenn es Teil der Suchmaschinenergebnisseite (SERP) ist:

Beispiel eines SERP-Snippets mit Titel und Beschreibung

Beispiel eines SERP-Snippets mit Titel und Beschreibung

In Next.js legen wir Titel und Beschreibung in der Head-Komponente fest. So könnten Meta-Titel- und -Beschreibungs-Tags in Next.js aussehen:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>
          iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple
        </title>
        <meta
          name="description"
          content="Check out iPhone 12 XR Pro and iPhone 12 Pro Max. Visit your local store and for expert advice."
          key="desc"
        />
      </Head>
      <h1>iPhones for Sale</h1>
      <p>insert a list of iPhones for sale.</p>
    </div>
  );
}
 
export default IndexPage;

Die Head-Komponente kann auf jeder Seite Ihrer Anwendung verwendet werden, um den Inhalt der Seite zu beschreiben oder Informationen darüber bereitzustellen.

Open Graph

Das Open Graph-Protokoll, ursprünglich von Facebook entwickelt, standardisiert die Verwendung von Metadaten auf einer Webseite. Sie können so wenig oder so viele Informationen angeben, wie Sie möchten, aber alle Open-Graph-Elemente fügen sich zu einer Repräsentation der Seite zusammen, der sie zugeordnet sind.

Andere Social-Media-Unternehmen (wie Pinterest, Twitter, LinkedIn usw.) können Open Graph ebenfalls für die Anzeige von Rich Cards beim Teilen einer URL verwenden. Twitter hat auch eigene Tags für Twitter Cards.

Obwohl diese Open-Graph-Tags viele Ähnlichkeiten mit SEO-relevanten Tags aufweisen, bieten sie keinen direkten Vorteil für das Suchmaschinenranking. Dennoch werden sie empfohlen, da Nutzer Ihre Inhalte möglicherweise in sozialen Medien oder Messaging-Tools wie WhatsApp oder Telegram teilen.

Sie können Open-Graph-Tags hinzufügen, indem Sie das property-Attribut in den Meta-Tags innerhalb der Head-Komponente definieren. Beispiel:

import Head from 'next/head';
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>Cool Title</title>
        <meta name="description" content="Checkout our cool page" key="desc" />
        <meta property="og:title" content="Social Title for Cool Page" />
        <meta
          property="og:description"
          content="And a social description for our cool page"
        />
        <meta
          property="og:image"
          content="https://example.com/images/cool-page.jpg"
        />
      </Head>
      <h1>Cool Page</h1>
      <p>This is a cool page. It has lots of cool content!</p>
    </div>
  );
}
 
export default IndexPage;

Ein teilbarer Link mit Beschreibung und Titel sowie einem Bild, das den Seiteninhalt repräsentiert, hat zwar keinen direkten Einfluss auf das SEO-Ranking, erhöht aber indirekt die Klickrate, was letztendlich zu mehr Besuchern auf Ihrer Seite führt.

Strukturierte Daten und JSON-LD

Strukturierte Daten erleichtern Suchmaschinen das Verständnis Ihrer Seiten. Im Laufe der Jahre gab es mehrere Vokabulare, aber derzeit ist schema.org das wichtigste.

Laut der Website ist schema.org eine "gemeinschaftliche Aktivität mit der Mission, Schemata für strukturierte Daten im Internet, auf Webseiten, in E-Mails und darüber hinaus zu erstellen, zu pflegen und zu fördern."

Das Vokabular von schema.org kann mit vielen verschiedenen Kodierungen verwendet werden, darunter RDFa, Microdata und JSON-LD.

Verschiedene Suchmaschinen können unterschiedliche Vokabulare innerhalb von schema.org verwenden, und keine Suchmaschine deckt alle auf der Website beschriebenen Anwendungsfälle ab. Überprüfen Sie daher, welche Vokabulare in jedem Fall akzeptiert werden.

Ein Beispiel dafür, wie eine Produktseite mit JSON-LD-Produkt-Schema-Daten aussehen könnte:

import Head from 'next/head';
 
function ProductPage() {
  function addProductJsonLd() {
    return {
      __html: `{
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Executive Anvil",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
      "sku": "0446310786",
      "mpn": "925872",
      "brand": {
        "@type": "Brand",
        "name": "ACME"
      },
      "review": {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "4",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "Fred Benson"
        }
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.4",
        "reviewCount": "89"
      },
      "offers": {
        "@type": "Offer",
        "url": "https://example.com/anvil",
        "priceCurrency": "USD",
        "price": "119.99",
        "priceValidUntil": "2020-11-20",
        "itemCondition": "https://schema.org/UsedCondition",
        "availability": "https://schema.org/InStock"
      }
    }
  `,
    };
  }
  return (
    <div>
      <Head>
        <title>My Product</title>
        <meta
          name="description"
          content="Super product with free shipping."
          key="desc"
        />
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={addProductJsonLd()}
          key="product-jsonld"
        />
      </Head>
      <h1>My Product</h1>
      <p>Super product for sale.</p>
    </div>
  );
}
 
export default ProductPage;

In diesem Beispiel sind die Daten als String hartkodiert, aber Sie können die Daten leicht an die Methode addProductJsonLd übergeben, um sie vollständig dynamisch zu gestalten.

Weiterführende Literatur

URL-Struktur

Previous Page

On-Page SEO

Next Page

On this page