Next.js

next-seo を使って Next.js で SEO周りを整備するメモ

next-seo を使って Next.js で SEO周りを整備するメモです。

導入方法

https://github.com/garmeeh/next-seo

$ yarn add next-seo

デフォルト値の設定

next-seo.config.js を作成する

export default {
  titleTemplate: '%s | サイト名',
  defaultTitle: 'タイトル',
  additionalMetaTags: [
    {
      property: 'dc:creator',
      content: '運営者名',
    },
    {
      name: 'application-name',
      content: 'サイト名',
    },
  ],
  openGraph: {
    url: 'https://hogehoge.com/',
    type: 'website',
    locale: 'ja_JP',
    site_name: 'サイト名',
  },
  twitter: {
    handle: '@hogehoge',
    site: '@fugafuga',
    cardType: 'summary_large_image',
  },
};

全ページで明示的にインクルードしなくても済むようにデフォルト値を設定できる
→ _app.js にて DefaultSeo を読み込む（設定ファイルを別出しもOK）

※ より上に配置する必要がある

import Head from 'next/head';
import { DefaultSeo } from 'next-seo';
import SEO from '../../next-seo.config';

const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
  <Component {...pageProps} />
  <>
    <Head></Head>
    <DefaultSeo {...SEO} />
    <Component {...pageProps} />
  </>
);
export default MyApp;

ページごとに上書きするには下記

  <NextSeo
      title="ほげほげ"
      description="ふがふが"
    />

その他

  • Cypress を書く
    • td と h1/2 ぐらい？
  • tsconfig.json の include に next-seo.config.js を追加

参考

https://qiita.com/powdersugar828828/items/e7f6a131c65e1820f6b8

-Next.js