【Next.js/next-seo】next-seoで記事ページ毎のSEO設定をする【React/TypeScript】

12/6/2022

前回の記事の続きです。

ページ全体のデフォルトのSEO設定はできたので、今度は記事ページ固有のSEO設定ができるようにします。
本記事の環境ではNewt（ヘッドレスCMS）を利用しているため、Newtのapiから返ってくる値を利用して自動で各記事ページにSEO設定が行われるようにすることを目標とします。

そのため本記事ではNextSeoに設定される値はNewt由来の変数がほとんどになりますが、Newtを使用していない環境の方の場合も、設定する値の取得方法が異なるだけで設定する項目は変わらないと思うので、基本的にやることも変わらないと思います。

実装

記事ページのコンポーネントを編集

本記事ブログはNewtのNext.jsテンプレートが土台となっているため、もともと最小限のseoに関する記述が記事ページのコンポーネントに書かれていますので、それらを削除しnext-seoでの設定の記述に書き換えます。

↓が元々の状態です。

...
  return (
    <Layout app={app}>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:type" content="article" />
        <meta property="og:title" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:image" content={ogImage} />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
...

これを以下のように書き換えました。

...
import { NextSeo } from "next-seo";
...
  return (
    <Layout app={app}>
      <NextSeo
        title={title}
        description={description}
        openGraph={{
          title,
          description,
          type: "article",
          article: {
            tags: currentArticle.tags.map((tag) => tag.name),
            authors: [currentArticle.author.fullName],
            publishedTime: currentArticle?._sys?.createdAt,
            modifiedTime: currentArticle?._sys?.updatedAt,
          },
          images: [
            {
              url: currentArticle.coverImage.src,
              width: 700,
              height: 420,
              alt: title,
            }
          ],
        }}
      />
...

※<Head>は削除しました。
基本的にNewtのapiから取得している値を流用してセットしているだけです。

記事ページを確認

ではnpm run devで立ち上げて記事ページにアクセスしてSEO設定を確認してみます。
確認すると以下のようにmetaタグが生成されています。

以上です。

Share this post