【Next.js/next-seo】Next.jsで作成されたサイトに「next-seo」モジュールでSEO設定をする【React/TypeScript】

本ブログをWordPressからNewt + Next.js(v13)にリニューアルしてからSEOの設定を行っていなかったため、npmモジュールのnext-seoモジュールを使って設定してみました。

next-seo：https://www.npmjs.com/package/next-seo

NextSeo

※以下公式の情報を基に私の意訳になります。
next-seoはSEOを設定したいページにNextSeoタグ埋め込むことで動作し、headタグ内に設定した内容に沿ってmetaタグ等をレンダリングしてくれるそうです。

これだけ読むとすべてのページにNextSeoタグを埋め込む作業が必要なように思えますが、自動ですべてのページにデフォルトのSEO設定を出力してくれるデフォルトSEO設定機能があるようです。
Next.jsの_app.js(カスタム<App>)を利用する方法が提供されています。

これに加えてページ固有のSEO設定を行いたい場合は、そのページにのみ個別でNextSeoタグを設定すれば上書きしてくれるっぽいです。

next-seo.config.jsのようなファイルを作成しておき、そこにデフォルトのSEO設定を記述しておき読み込ませて使用する方法も紹介されています。

Title Template機能を使用すれば記事タイトルの表示形式の設定もできるようです。

title = 'This is my title';
titleTemplate = 'Next SEO | %s';
// outputs: Next SEO | This is my title

実装

next-seoモジュールインストール

> npm install --save next-seo@5.15.0 --save-exact

※versionは最新のものを確認して各自修正してください。

デフォルトのSEO設定を記述するファイル作成

next-seo.config.tsという名前で設定ファイルを作成（ファイル名はなんでもokです）
今回は以下のように記述してみました。

import { DefaultSeoProps } from "next-seo";

const SITE_NAME = "HarioNote";

const TitleTemplate = `%s | ${SITE_NAME}`;

const config: DefaultSeoProps = {
  title: SITE_NAME,
  titleTemplate: TitleTemplate,
  defaultTitle: SITE_NAME,
  description: "IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート",
  canonical: "https://harionote.net/",
  openGraph: {
    url: "https://harionote.net/",
    title: SITE_NAME,
    description: "IT関連やDIY,気になったモノとかのまとめなど,なんでもありのハリオのノート",
    siteName: SITE_NAME,
  },
  twitter: {
    site: SITE_NAME,
    cardType: "summary_large_image"
  }
}

export default config;

_app.tsxにてデフォルトのSEO設定を適用

next.jsの機能としてある_app.tsx(または_app.js)ファイルを利用して先程作成したデフォルトのSEO設定がすべてのページに適用されるようにします。

※_app.tsxファイルはない場合は新規作成してください。配置場所は/pages

元々↓のような_app.tsxを

import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (<Component {...pageProps} />);
};

export default MyApp;

↓のように編集しました。

import "../styles/globals.css";
import { DefaultSeo } from "next-seo";

import SEO from "../nextSeo/next-seo.config";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...SEO} />
      <Component {...pageProps} />
    </>
  );
};

export default MyApp;

編集後npm run devコマンドで立ち上げて確認すると

となっていたheadタグ内に

のようにmetaタグが生成されるようになりました～。