841-biborokuWebフロントエンドの備忘録

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画像はまた後日。

シェア