MENU
Khsmty
よわよわプログラマー
メイン言語は TypeScript。Rust を勉強中。
アーカイブ

Next.js で構造化データ (JSON-LD) に対応する

  • URLをコピーしました!

この記事は旧ブログより移植したものです。現在、Next.js および Nuxt.js は使用していません。

なんか SEO によさそうなので、この Next.js のブログで構造化データ (JSON-LD) に対応してみました。

目次

実装

pages ディレクトリ時代は「Seo」みたいなコンポーネントで page title や description でメタ情報を設定するのが主流だったと思いますが、今は <NextHead> が非推奨となっており、Metadata API を使ってメタ情報を設定します。

型定義ファイルの導入

型ファイルがあった方が安心なので、Google が作っている schema-dts というパッケージをインストールします。

$ yarn add schema-dts
// or
$ npm i schema-dts

ページへ JSON-LD を追加

記事表示部分のコンポーネントへ追加しました。

import {
  Article as JsonLDArticle,
  WebPage as JsonLDWebPage,
  WithContext,
} from 'schema-dts';

export default function Article({ data, slug, page = false }: Props) {
  const jsonLd: WithContext<JsonLDArticle | JsonLDWebPage> = {
    '@context': 'https://schema.org',
    '@type': !page ? 'Article' : 'WebPage',
    name: data.title,
    headline: data.title,
    description: data.description,
    image: `${process.env.NEXT_PUBLIC_BASE_URL}/img/icon_r.webp`,
    datePublished: data.publishedAt,
    dateModified: data.updatedAt,
    url: `${process.env.NEXT_PUBLIC_BASE_URL}${
      !page ? '/article' : ''
    }/${slug}`,
    mainEntityOfPage: `${process.env.NEXT_PUBLIC_BASE_URL}${
      !page ? '/article' : ''
    }/${slug}`,
    author: {
      '@type': 'Person',
      name: 'Khsmty',
      url: process.env.NEXT_PUBLIC_BASE_URL,
    },
    publisher: {
      '@type': 'Organization',
      name: 'Khsmty',
      logo: {
        '@type': 'ImageObject',
        url: `${process.env.NEXT_PUBLIC_BASE_URL}/img/icon_r.webp`,
      },
    },
  };

  return (
    <article>
      <script
        key="json-ld"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      // 省略...
    </article>
  );
});

こんな感じになりました。

image をどうするか悩みました。このブログはアイキャッチを絵文字で表現しているので、設定できる画像がないです。。かといって省略したら警告が出るので、とりあえずアイコンを設定しておきました。

そのうち satori とかで動的 OGP を作りたい。

実際のコードは以下にあるので、興味があれば見てみてください↓

https://github.com/Khsmty/Khsmty.com/blob/main/components/Article/index.tsx

検証

Google の Rich Results Test でこのサイトの記事ページを検証してみました。

いい感じにデータが並んでいます。設定できてそうです。

参考

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする


目次