Schema-gegevens toevoegen aan Next.js-sites

In dezelfde geest van de post van vorige week over het toevoegen van citaties aan Schema.org gegevens, biedt deze post een snelle en eenvoudige methode voor het toevoegen van Schema.org gegevens aan een Next.js site.

In dit project gebruik ik Apollo om gegevens op te halen via GraphQL van een Wordpress site (die uiteindelijk een statische HTML site genereert) - dus ga uit van een standaard WP post datastructuur. Deze methode gaat ervan uit dat je het Schema component hebt aangeroepen in je Post (of vergelijkbaar) component in je Next.js app. Roep de Schema component dus als volgt aan:

<Schema post={post} />

En de Schema-component zelf:

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;

Je zult een strip function that I left in place in the example. I am trying to decide whether or not to include the post content zien in de Schema-gegevens. Als dat zo is, wordt die functie gebruikt om de HTML op te schonen die als inhoud wordt geretourneerd, zodat we die kunnen opnemen in het JSON-antwoord.

Hier is een samenvatting van dit fragment als je ideeën hebt over hoe het beter kan. PR's zijn natuurlijk welkom.

Schema-gegevens toevoegen aan Next.js-sites

Boek een kennismakingsgesprek met onze productexperts.