next-seoを使ってSEOメタ情報のデフォルト設定と各ページの設定
サイト内でも使える情報をconstで管理
├ src
│└ const
│ └ site.ts
site.ts
export const SITE_DATA = {
TITLE: 'サイト名',
DESCRIPTION: 'ディスクリプション',
URL: 'https://xxx.info',
}
export const SNS = {
TWITTER_SITE: '@xxx',
//FACEBOOK: '',
}
export const GTM_ID = 'xxx';
next-seoパッケージを入れる
npm install next-seo
デフォルト設定用のnext-seo.config.ts
ファイルを作成する
import { DefaultSeoProps } from 'next-seo';
import { SITE_DATA, SNS } from '@/const/site';
const config: DefaultSeoProps = {
titleTemplate: `%s | ${SITE_DATA.TITLE}`,
defaultTitle: SITE_DATA.TITLE,
// description: SITE_DATA.DESCRIPTION,
canonical: SITE_DATA.URL,
openGraph: {
type: 'article',
locale: 'ja_JP',
url: SITE_DATA.URL,
siteName: SITE_DATA.TITLE,
title: SITE_DATA.TITLE,
},
twitter: {
site: SNS.TWITTER_SITE,
cardType: 'summary_large_image',
},
};
export default config;
各ページに設定する
_app.ts
next-seo.config.tsのデフォルト設定を_app.tsで読み込む
import { DefaultSeo } from "next-seo";
import SEO from "../../next-seo.config";
~
return (
<>
<DefaultSeo {...SEO} />
</>
)
src/pages/index.tsx
ほとんどデフォルト設定なので変更したいところだけ指定
<NextSeo
openGraph={{
type: "website",
}}
/>
src/pages/[slug].tsx
const router = useRouter();
const pageUrl = `${SITE_DATA.URL}/${router.query.slug}`;
~
return (
<NextSeo
title={post.title}
canonical={pageUrl}
openGraph={{
url: pageUrl,
title: post.title,
}}
/>
)
Built-in SEO Support: New Metadata API to set static and dynamic meta tags.
Next13.2でApp Routerを使ったメタ情報を最適化する機能が強化された
OGP画像はまた後日。