next-seoを使ってNext.jsプロジェクトのSEOを管理する

2023年4月12日

この記事ではNext.jsでnext-seoを使う方法をご紹介します。
next-seoはNext.jsのプロジェクトでSEOで必須となるタイトルタグやメタタグを管理するプラグインです。

Next.jsをインストール済みとして進めていくので、Next.jsのインストールがまだの方は「Next.jsをインスールする」でNext.jsをインストールしておいてください。

Next.jsでの開発がまだイマイチ。。。という方はこちらの書籍がおすすめです。
わかりやすく丁寧にNext.jsの開発が解説されています。

TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

created by Rinker

next-seoでできることは次のとおりです。

titleタグやmetaタグの出力
OGPの出力
構造化マークアップの出力

これらのことをnext-seoで管理します。

まずは次のコマンドでnext-seoをインストールします。

$ npm install next-seo
$ yarn add next-seo

デフォルトSEO設定

デフォルトのSEOは<DefaultSeo />で次のように設定します。
デフォルトのSEOはpages/_app.tsxに書くとすべてのページに反映されます。

デフォルトの設定ではタイトルタグとメタタグの出力を行います。

import { DefaultSeo } from 'next-seo';

const MyApp = ({ props, Component, pageProps }: AppProps) => {
	return (
		<>
			<Head>
				<meta
					name="viewport"
					content="minimum-scale=1, initial-scale=1, width=device-width"
				/>
			</Head>
			<DefaultSeo
				defaultTitle="デフォルトのタイトル"
				description="デフォルトの説明"
				openGraph={{
					type: "website",
					title: "デフォルトのタイトル",
					description: "デフォルトの説明",
					site_name: "サイトの名前",
					url: "サイトのURL",
					images: [
					 {
					 　url: "https://www.example.ie/og-image-01.jpg",
					   width: 800,
					   height: 600,
					   alt: 'Og Image Alt',
					   type: 'image/jpeg',
					 },
					],
				}}
				twitter={{
					handle: '@handle',
					site: '@site',
					cardType: "summary_large_image",
				}}
			/>
      ...
		</>
	);
};

上記のように設定した場合、出力されるタイトルタグとメタタグは以下のとおりです。

タイトルタグ
description
各種OGP

が出力されます。

<head>
      ...
      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
      <title>デフォルトのタイトル</title>
      <meta name="robots" content="index,follow">
      <meta name="googlebot" content="index,follow">
      <meta name="description" content="デフォルトの説明">
      <meta name="twitter:card" content="summary_large_image">
      <meta name="twitter:site" content="@site">
      <meta name="twitter:creator" content="@handle">
      <meta property="og:title" content="デフォルトのタイトル">
      <meta property="og:description" content="デフォルトの説明">
      <meta property="og:url" content="サイトのURL">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="サイトの名前">
      ...
</head>

プロパティ

next-seoで使用できるプロパティは以下のとおりです。

Property	Type	Description
`titleTemplate`	string	タイトルに追加されるデフォルトのタイトルテンプレートを設定できます
`title`	string	ページのメタタイトルを設定する
`defaultTitle`	string	ページにタイトルが設定されていない場合、空の`titleTemplate`の代わりにこの文字列が使用されます。
`noindex`	boolean (default false)	ページにインデックスを付けるかどうかを設定します
`nofollow`	boolean (default false)	ページをフォローするか
`robotsProps`	Object	`X-Robots-Tag` の詳細情報のメタ情報を設定
`description`	string	ページメタディスクリプションを設定する
`canonical`	string	ページの正規URLを設定する
`mobileAlternate.media`	string	モバイルウェブサイトの配信元の画面サイズを設定
`mobileAlternate.href`	string	モバイルページの代替URLを設定
`languageAlternates`	array	代替URLの言語を設定します。次の形状のオブジェクトの配列が必要`{ hrefLang: string, href: string }`
`additionalMetaTags`	array	ここに記載されていないメタタグを追加できます。
`additionalLinkTags`	array	ここに記載されていないリンクタグを追加
`twitter.cardType`	string	カードの種類は、 `summary`, `summary_large_image`, `app`, `player`
`twitter.site`	string	カードフッターで使用されるWebサイトの@username
`twitter.handle`	string	コンテンツ作成者/作成者の@username（twitter：creatorとして出力）
`facebook.appId`	string	Facebook Insightsに使用される場合は、FacebookアプリIDをページに追加する必要がある
`openGraph.url`	string	グラフで永続IDとして使用されるオブジェクトの正規URL
`openGraph.type`	string	オブジェクトのタイプ。指定するタイプによっては、他のプロパティも必要になる場合があります。
`openGraph.title`	string	オープングラフのタイトル。これはメタタイトルとは異なる場合がある
`openGraph.description`	string	オープングラフの説明。これはメタの説明とは異なる場合がある。
`openGraph.images`	array	ソーシャルメディアプラットフォーム、Slackなどでプレビューとして使用される画像（オブジェクト）の配列。複数提供されている場合は、共有時に1つを選択
`openGraph.videos`	array	ビデオの配列 (object)
`openGraph.locale`	string	開いているグラフタグがマークアップされているロケール。形式はlanguage_TERRITORYです。デフォルトはen_USです。
`openGraph.site_name`	string	オブジェクトがより大きなWebサイトの一部である場合、サイト全体に表示される名前。
`openGraph.profile.firstName`	string	名前
`openGraph.profile.lastName`	string	苗字
`openGraph.profile.username`	string	ユーザーネーム
`openGraph.profile.gender`	string	性別
`openGraph.book.authors`	string[]	著者
`openGraph.book.isbn`	string	ISBN（書籍の識別用国際規格コード）
`openGraph.book.releaseDate`	datetime	出版日
`openGraph.book.tags`	string[]	この本に関連するタグ
`openGraph.article.publishedTime`	datetime	記事公開日
`openGraph.article.modifiedTime`	datetime	記事更新日
`openGraph.article.expirationTime`	datetime	記事公開後の経過日数
`openGraph.article.authors`	string[]	記事の著者
`openGraph.article.section`	string	ハイレベルセクション名（テクノロジーなど）
`openGraph.article.tags`	string[]	記事に関連するタグ

各ページでSEO設定を上書き

各ページではpages/_app.tsxで設定したデフォルトのSEOを上書きします。

<DefaultSeo />の設定を上書きするには<NextSeo />を使います。

次のように<NextSeo />で<DefaultSeo />と同じプロパティを使うとその設定が上書きされます。

import { NextSeo } from 'next-seo';

const Page: React.FC<Props> = (props) => {
	const post: Postprop = props.post.data;

	return (
		<>
			<NextSeo
				title="ページのタイトル"
				description="ページの説明"
				openGraph={{
					url: "ページのURL",
					title: "ページのタイトル",
					description: "ページの説明",
					images: [
						{
							url: "https://www.example.ie/og-image-01.jpg",
						},
					],
				}}
			/>
			
      <p>コンテンツ</p>
		</>
	);
};

上記の様に上書きした場合、以下のように出力されます。

ページのタイトルやURLなどが上書きされています。

<head>
      ...
      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
      <title>ページのタイトル</title>
      <meta name="robots" content="index,follow">
      <meta name="googlebot" content="index,follow">
      <meta name="description" content="ページの説明">
      <meta name="twitter:card" content="summary_large_image">
      <meta name="twitter:site" content="@site">
      <meta name="twitter:creator" content="@handle">
      <meta property="og:title" content="ページのタイトル">
      <meta property="og:description" content="ページの説明">
      <meta property="og:url" content="ページのURL">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="ページの名前">
      ...
</head>

構造化マークアップを設定する

next-seoは構造化マークアップ（schema.org）も管理することができます。

構造化マークアップ（schema.org）とはページ内の情報をGoogleに詳しく伝える表記方法です。

next-seoで用意されている構造化マークアップは

です。

記事の構造化マークアップの場合、以下のように設定します。

import { NextSeo, ArticleJsonLd } from 'next-seo';

const Page: React.FC<Props> = (props) => {
	const post: Postprop = props.post.data;

	return (
		<>
      // SEO設定の上書き
			<NextSeo
				title="ページのタイトル"
				description="ページの説明"
				openGraph={{
					url: "ページのURL",
					title: "ページのタイトル",
					description: "ページの説明",
					images: [
						{
							url: "https://www.example.ie/og-image-01.jpg",
						},
					],
				}}
			/>
      // 記事の構造化マークアップ
      <ArticleJsonLd
          url="ページのURL"
          title="ページのタイトル"
          images="ページの画像URL"
          datePublished="ページの作成日"
          dateModified="ページの編集日"
          authorName="ページの作者名"
          publisherName="発行元"
          publisherLogo="発行元のロゴ"
          description="ページの説明"
        />
			
      <p>コンテンツ</p>
		</>
	);
};

上記のように記事情報を<ArticleJsonLd />に設定すると、記事の構造化マークアップが以下のように出力されます。

<head>
      ...
      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">
      <title>ページのタイトル</title>
      <meta name="robots" content="index,follow">
      <meta name="googlebot" content="index,follow">
      <meta name="description" content="ページの説明">
      <meta name="twitter:card" content="summary_large_image">
      <meta name="twitter:site" content="@site">
      <meta name="twitter:creator" content="@handle">
      <meta property="og:title" content="ページのタイトル">
      <meta property="og:description" content="ページの説明">
      <meta property="og:url" content="ページのURL">
      <meta property="og:type" content="website">
      <meta property="og:site_name" content="ページの名前">
      <script type="application/ld+json">{
        "@context": "https://schema.org",
        "@type": "Article",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "ページのURL"
        },
        "headline": "ページのタイトル",
        "image": ["ページの画像URL"],
        "datePublished": "ページの作成日",
        "dateModified": "ページの編集日",
        "author": {"@type": "Person","name": "ページの作者名"},
        "publisher": {
            "@type": "Organization",
            "name": "発行元",
            "logo": {
            "@type": "ImageObject",
            "url": "発行元のロゴ"
           }
        },
        "description": "ページの説明"
     }</script>
   ...
<head>