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

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

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で使用できるプロパティは以下のとおりです。

PropertyTypeDescription
titleTemplatestringタイトルに追加されるデフォルトのタイトルテンプレートを設定できます
titlestringページのメタタイトルを設定する
defaultTitlestringページにタイトルが設定されていない場合、空のtitleTemplateの代わりにこの文字列が使用されます。
noindexboolean (default false)ページにインデックスを付けるかどうかを設定します
nofollowboolean (default false)ページをフォローするか
robotsPropsObjectX-Robots-Tag の詳細情報のメタ情報を設定
descriptionstringページメタディスクリプションを設定する
canonicalstringページの正規URLを設定する
mobileAlternate.mediastringモバイルウェブサイトの配信元の画面サイズを設定
mobileAlternate.hrefstringモバイルページの代替URLを設定
languageAlternatesarray代替URLの言語を設定します。次の形状のオブジェクトの配列が必要{ hrefLang: string, href: string }
additionalMetaTagsarrayここに記載されていないメタタグを追加できます。
additionalLinkTagsarrayここに記載されていないリンクタグを追加
twitter.cardTypestringカードの種類は、
summarysummary_large_imageapp,  player
twitter.sitestringカードフッターで使用されるWebサイトの@username
twitter.handlestringコンテンツ作成者/作成者の@username(twitter:creatorとして出力)
facebook.appIdstringFacebook Insightsに使用される場合は、FacebookアプリIDをページに追加する必要がある
openGraph.urlstringグラフで永続IDとして使用されるオブジェクトの正規URL
openGraph.typestringオブジェクトのタイプ。 指定するタイプによっては、他のプロパティも必要になる場合があります。
openGraph.titlestringオープングラフのタイトル。これはメタタイトルとは異なる場合がある
openGraph.descriptionstringオープングラフの説明。これはメタの説明とは異なる場合がある。
openGraph.imagesarrayソーシャルメディアプラットフォーム、Slackなどでプレビューとして使用される画像(オブジェクト)の配列。 複数提供されている場合は、共有時に1つを選択
openGraph.videosarrayビデオの配列 (object)
openGraph.localestring開いているグラフタグがマークアップされているロケール。形式はlanguage_TERRITORYです。デフォルトはen_USです。
openGraph.site_namestringオブジェクトがより大きなWebサイトの一部である場合、サイト全体に表示される名前。
openGraph.profile.firstNamestring名前
openGraph.profile.lastNamestring苗字
openGraph.profile.usernamestringユーザーネーム
openGraph.profile.genderstring性別
openGraph.book.authorsstring[]著者
openGraph.book.isbnstringISBN(書籍の識別用国際規格コード)
openGraph.book.releaseDatedatetime出版日
openGraph.book.tagsstring[]この本に関連するタグ
openGraph.article.publishedTimedatetime記事公開日
openGraph.article.modifiedTimedatetime記事更新日
openGraph.article.expirationTimedatetime記事公開後の経過日数
openGraph.article.authorsstring[]記事の著者
openGraph.article.sectionstringハイレベルセクション名(テクノロジーなど)
openGraph.article.tagsstring[]記事に関連するタグ

各ページで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>
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

エンジニアを目指す方必見!おすすめプログラミングスクール

最短でエンジニアになるには、いかに効率よく学習するかが重要です。モチベーションを維持しながら最短でエンジニアを目指すならプログラミングスクールを利用するのもおすすめです。

目次
閉じる