<p>Next.jsのOGPタグやmetaタグの記述などはどうするのか色々調べたところ、<a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">next-seo</a>というライブラリを導入するのがよさそう。</p><p>導入は簡単で、まずはインストール</p><pre><code>npm install next-seo</code></pre><p>あとは特定のページでインポートして記述するだけ</p><div data-filename="Page.tsx"><pre><code class="language-typescript">import { NextSeo } from &apos;next-seo&apos;;

const Page = () =&gt; (
  &lt;&gt;
    &lt;NextSeo
      title=&quot;タイトル&quot;
      description=&quot;デスクリプション&quot;
    /&gt;
  &lt;/&gt;
);

export default Page;</code></pre></div><p>ただこれだと、指定ページのみに各種<code>meta</code>タグが入るので、デフォルトで基本のOGPや<code>meta</code>タグが入るようにする。</p><p>まずはデフォルト値を保存する設定ファイルを作成する。サイトタイトルやURLなどは環境変数に設定している値から<code>config</code>オブジェクトに代入し、そこから<code>props</code>へ代入している。</p><div data-filename="seoConfig.ts"><pre><code class="language-typescript">import { DefaultSeoProps } from &apos;next-seo&apos;;
import { SITE_NAME, TWITTER_USER_ACCOUNT, BASE_URL } from &apos;@/config&apos;;

const config = {
  siteName: SITE_NAME,
  twitterAccount: TWITTER_USER_ACCOUNT,
  url: BASE_URL,
};

const SEO: DefaultSeoProps = {
  titleTemplate: `%s - ${config.siteName}`,
  defaultTitle: config.siteName,
  themeColor: &apos;#000&apos;,
  openGraph: {
    url: config.url,
    type: &apos;article&apos;,
    siteName: config.siteName,
    title: &apos;&apos;,
    description: &apos;&apos;,
    images: [
      {
        url: `${config.url}/ogp.png`,
      },
    ],
    locale: &apos;ja_JP&apos;,
  },
  twitter: {
    handle: config.twitterAccount,
    cardType: &apos;summary_large_image&apos;,
  },
};

export default SEO;</code></pre></div><p>次に設定ファイルを_app.tsxで読み込み、<code>&lt;Component /&gt;</code>と同じ階層に<code>&lt;DefaultSeo /&gt;</code>コンポーネントを入れる。<br>この時、<code>&lt;DefaultSeo /&gt;</code>に設定ファイルを<code>props</code>で渡してあげる必要がある。</p><div data-filename="_app.tsx"><pre><code class="language-typescript">import &apos;@/styles/globals.scss&apos;;
import type { AppProps } from &apos;next/app&apos;;
import { ThemeProvider } from &apos;next-themes&apos;;
import { DefaultSeo } from &apos;next-seo&apos;;
import SEO from &apos;@/types/seoConfig&apos;;

const MyApp = ({ Component, pageProps }: AppProps) =&gt; {
  return (
    &lt;&gt;
      &lt;DefaultSeo {...SEO} /&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/&gt;
  );
};

export default MyApp;
</code></pre></div><p>これで設定ファイルに記述した内容で全ページに<code>head</code>タグが出力される。<br>それぞれの投稿の内容に合わせてタイトルやディスクリプションを設定したい場合には以下のようにする。</p><div data-filename="[id].tsx"><pre><code class="language-typescript">import { NextPage } from &apos;next&apos;;
import { NextSeo } from &apos;next-seo&apos;;

type PostPageProps = {
  post: Post;
};

const PostPage: NextPage&lt;PostPageProps&gt; = ({ post }) =&gt; {
  return (
    &lt;&gt;
      &lt;NextSeo
        title={post.title}
        description={post.description}
        openGraph={{
          title: `${post.title}`,
          description: `${post.description}`,
        }}
      /&gt;
      &lt;article className=&apos;mt-10&apos;&gt;...&lt;/article&gt;
    &lt;/&gt;
  );
};</code></pre></div><p>これで投稿ページはそれぞれのタイトルやディスクリプションで出力し、その他OGPなどについては設定ファイルで記述した内容に沿って出力される。</p><hr><h2 id="he45680f0bc">参考記事</h2><p><a href="https://github.com/garmeeh/next-seo" target="_blank" rel="noopener noreferrer nofollow">https://github.com/garmeeh/next-seo</a></p><p><a href="https://blog.stin.ink/articles/add-next-seo-to-blog" target="_blank" rel="noopener noreferrer nofollow">https://blog.stin.ink/articles/add-next-seo-to-blog</a></p>

Next.jsでSEO対策を行う際の方法について調べたところ、next-seoライブラリというものがあったので導入、カスタマイズをしてみました。

TypeScriptに関連する記事一覧

Next.jsでnext-seoを導入してSEO対策を行う