Next.jsでnext-seoを導入してSEO対策を行う
Next.jsのOGPタグやmetaタグの記述などはどうするのか色々調べたところ、next-seoというライブラリを導入するのがよさそう。
導入は簡単で、まずはインストール
npm install next-seoあとは特定のページでインポートして記述するだけ
import { NextSeo } from 'next-seo';
const Page = () => (
<>
<NextSeo
title="タイトル"
description="デスクリプション"
/>
</>
);
export default Page;ただこれだと、指定ページのみに各種metaタグが入るので、デフォルトで基本のOGPやmetaタグが入るようにする。
まずはデフォルト値を保存する設定ファイルを作成する。サイトタイトルやURLなどは環境変数に設定している値からconfigオブジェクトに代入し、そこからpropsへ代入している。
import { DefaultSeoProps } from 'next-seo';
import { SITE_NAME, TWITTER_USER_ACCOUNT, BASE_URL } from '@/config';
const config = {
siteName: SITE_NAME,
twitterAccount: TWITTER_USER_ACCOUNT,
url: BASE_URL,
};
const SEO: DefaultSeoProps = {
titleTemplate: `%s - ${config.siteName}`,
defaultTitle: config.siteName,
themeColor: '#000',
openGraph: {
url: config.url,
type: 'article',
siteName: config.siteName,
title: '',
description: '',
images: [
{
url: `${config.url}/ogp.png`,
},
],
locale: 'ja_JP',
},
twitter: {
handle: config.twitterAccount,
cardType: 'summary_large_image',
},
};
export default SEO;次に設定ファイルを_app.tsxで読み込み、<Component />と同じ階層に<DefaultSeo />コンポーネントを入れる。
この時、<DefaultSeo />に設定ファイルをpropsで渡してあげる必要がある。
import '@/styles/globals.scss';
import type { AppProps } from 'next/app';
import { ThemeProvider } from 'next-themes';
import { DefaultSeo } from 'next-seo';
import SEO from '@/types/seoConfig';
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<>
<DefaultSeo {...SEO} />
<Component {...pageProps} />
</>
);
};
export default MyApp;
これで設定ファイルに記述した内容で全ページにheadタグが出力される。
それぞれの投稿の内容に合わせてタイトルやディスクリプションを設定したい場合には以下のようにする。
import { NextPage } from 'next';
import { NextSeo } from 'next-seo';
type PostPageProps = {
post: Post;
};
const PostPage: NextPage<PostPageProps> = ({ post }) => {
return (
<>
<NextSeo
title={post.title}
description={post.description}
openGraph={{
title: `${post.title}`,
description: `${post.description}`,
}}
/>
<article className='mt-10'>...</article>
</>
);
};これで投稿ページはそれぞれのタイトルやディスクリプションで出力し、その他OGPなどについては設定ファイルで記述した内容に沿って出力される。