Hinzufügen von Schemadaten zu Next.js-Seiten

In Anlehnung an den Beitrag von letzter Woche über Hinzufügen von Zitaten zu Schema.org-Daten bietet dieser Beitrag eine schnelle und einfache Methode zum Hinzufügen von Schema.org-Daten zu einer Next.js-Website.

In diesem Projekt verwende ich Apollo, um Daten über GraphQL von einer Wordpress-Site zu beziehen (die am Ende eine statische HTML-Site erzeugt) - gehen Sie also von der Standard-WP-Post-Datenstruktur aus. Diese Methode setzt voraus, dass Sie die Schema-Komponente in Ihrer Post (oder einer ähnlichen) Komponente in Ihrer Next.js-App aufgerufen haben. Rufen Sie also die Schema-Komponente wie folgt auf:

<Schema post={post} />

Und die Schemakomponente selbst:

import Head from "next/head";
import { site, siteTitle } from "../../config";

function strip(html) {
  const one = html.replace(/<\/?[^>]+(>|$)/gm, "");
  const two = one.replace(/[\r\n]\s*[\r\n]/gm, "");

  return two;
}

const Schema = ({ post }) => {
  const {
    title,
    blurb,
    featuredImage,
    date,
    modified,
    slug,
    commentCount,
    author,
    ratingCount,
    ratingAverage,
    citations,
  } = post;
  const published = new Date(date);
  const copyrightYear = published.getFullYear();

  let mediaDetails, sourceUrl;

  if (featuredImage) {
    sourceUrl = featuredImage.sourceUrl;
  }

  const citationsList = citations.map((citation, i) => {
    return `{ "@type": "CreativeWork", "citation": ${JSON.stringify(
      citation
    )} }${i === citations.length - 1 ? "" : ","}\n`;
  });

  const citationsText = citationsList.join("");

  const org = `{ "@id": "${site}#organization", "type": "Organization", "name":"${siteTitle}", "logo": {
    "@type": "ImageObject",
    "name": "${siteTitle} Logo",
    "width": "230",
    "height": "67",
    "url": "${site}images/logo.png"
} }`;

  return (
    <Head>
      <script type="application/ld+json">{`
    {
      "@context":"https://schema.org/",
      "@type":"Article",
      "name":"${title}",
      ${
        ratingAverage > 4
          ? `"aggregateRating": {
        "@type":"AggregateRating",
        "ratingValue":${ratingAverage},
        "reviewCount":${ratingCount}
      },`
          : ""
      }
      "about": "${blurb}",
      "author": { "@type": "Person", "@id": "${site}author/${
        author.slug
      }", "name": "${author.name}" },
      ${
        citationsText.length
          ? `"citation": [
        ${citationsText}
      ],`
          : ""
      }
      "commentCount": ${commentCount},
      "copyrightHolder": { "@id": "${site}#organization" },
      "copyrightYear": ${copyrightYear},
      "datePublished": "${date}",
      "dateModified": "${modified}",
      "description": "${blurb}",
      "discussionUrl": "${site}articles/${slug}#comments",
      "editor": { "@id": "${site}author/${author.slug}#author" },
      "headline": "${title}",
      ${sourceUrl ? `"image": "${sourceUrl}",` : ""}
      "inLanguage": "English",
      "mainEntityOfPage": "${site}articles/${slug}",
      "publisher": { "@id": "${site}#organization" },
      "sourceOrganization": ${org},
      "url": "${site}articles/${slug}"

    }
    `}</script>
    </Head>
  );
};

export default Schema;

Sie werden in den Schema-Daten eine strip function that I left in place in the example. I am trying to decide whether or not to include the post content sehen. Wenn ja, wird diese Funktion verwendet, um den als Inhalt zurückgegebenen HTML-Code zu bereinigen, so dass wir ihn in die JSON-Antwort aufnehmen können.

Hier ist eine Zusammenfassung dieses Schnipsels wenn Sie Ideen haben, wie man es verbessern kann. PRs sind natürlich willkommen.

Hinzufügen von Schemadaten zu Next.js-Seiten

Buchen Sie ein Informationsgespräch mit unseren Produktexperten.