Next.jsでOGPなどSEOに必要なパラメータの設定方法

 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-seo

next-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の設定やサイトマップ生成方法についてまとめています。よかったら見てみてください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です