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',
  },
};

TODO http-eqiv 等が動かない件

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

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

import Head from 'next/head';
// cf. https://github.com/garmeeh/next-seo#default-seo-configuration
import { DefaultSeo } from 'next-seo';
import SEO from '../../next-seo.config';

const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
  <Component {...pageProps} />
  <>
    <Head>
      <meta httpEquiv="x-ua-compatible" content="IE=edge; chrome=1" />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
    </Head>
    <DefaultSeo {...SEO} />
    <Component {...pageProps} />
  </>
);
export default MyApp;

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

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

その他

  • Cypress を書く
    • td と h1/2 ぐらい?
  • tsconfig.jsonincludenext-seo.config.js を追加

参考

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

ABOUT ME
うたたぞう
いつか海辺でゆったりライフを送りたい20代エンジニアです。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です