Next.jsにはnext/headのHeadタグ内でmetaタグを1つずつ設定すればOGPのパラメータ設定はできますがかなり大変です。
Next.jsでOGPなどSEO系パラメータ設定するにはnext-seoが便利です。今回は簡単な使い方の説明まで。詳しくはgithubを見てください。
https://github.com/garmeeh/next-seo
目次
next-seoのインストール
npm install next-seonext-seoの簡単なデフォルト値設定
ルートのコンポーネントである_app.tsxにデフォルト設定をしておきましょう。
まずは_app.tsx。pages直下に_app.tsxを作り、以下のような実装をします。以下はミニマムな例です。
import React from 'react'
export default function MyApp({ Component, pageProps }) {
return (
<Component {...pageProps} />
)
}
次にNextSeoのデフォルト設定。
各ページで何も設定しないと_app.tsxで設定したデフォルト値が適用されます。
import { DefaultSeo, NextSeo } from 'next-seo'
import React from 'react'
export default function MyApp({ Component, pageProps }) {
return (
<>
<DefaultSeo
defaultTitle=<タイトル>
canonical=<サイトの正規のURL>
description=<デフォルトの説明文>
twitter={{
handle: <アカウントID(@~の値)>,
site: <アカウントID(@~の値)>,
cardType: 'summary',
}}
openGraph={{
type: <websiteなどのタイプ>,
title: <タイトル>,
description: <デフォルトの説明文>,
site_name: <サイト名>,
url: <URL>,
// TODO OGP画像
images: [
{
url: <画像URL>,
width: 800,
height: 600,
alt: <Alt>,
}],
}}
/>
<Component {...pageProps} />
</>
)
}
各ページのNextSeo設定
デフォルト値から値を変えたい場合はpages内の各コンポーネントで設定できます。
next-seoからNextSeoをimportしてコンポーネント内で設定をします。
import { NextSeo } from 'next-seo'
import React from 'react'
const SamplePage = () => {
return (
<>
<NextSeo title="サンプル画面" description="サンプル画面です" />
<div>test</div>
</>
)
}twitter系のパラメータは？
twitter:titleなどの設定は必要ないのか？と思った方いると思います。
twitterはog:titleなどのOGPのパラメータを見てくれるらしいので必要ないらしいです。
そのほか、Next.jsでGoogle analyticsの設定やサイトマップ生成方法についてまとめています。よかったら見てみてください！