Next.js
SEO

Next.jsでDefaultSeoを使ってSEO対策を簡単にする方法

SEO（検索エンジン最適化）は、ウェブサイトのアクセスを増やすために重要な要素です。Next.jsでは、SEOを改善するために便利なツールやライブラリがあります。その中でも、

#1. **next-seo**とは？

next-seoは、Next.jsのプロジェクトにSEO設定を簡単に追加するためのライブラリです。このライブラリは、ページごとのメタタグやOGPタグを簡単に設定できる機能を提供し、SEOの設定を効率的に行えるようにします。

next-seoを使うと、ページごとに個別のSEO設定を行ったり、サイト全体のデフォルト設定をまとめて管理することが可能です。そのため、SEOのベストプラクティスを守りながら、開発の効率も高めることができます。

#2. **next-seo**のインストール

まず、next-seoパッケージをインストールする必要があります。プロジェクトディレクトリで以下のコマンドを実行してください：

npm install next-seo

または、yarnを使っている場合は：


yarn add next-seo

#3. **DefaultSeo**の設定

DefaultSeoは、Next.jsのアプリケーション全体で共通のSEO設定を管理するために使うコンポーネントです。これを使うと、全てのページで共通のSEO設定を自動的に適用できます。

pages/_app.js（または_app.tsx）でDefaultSeoを設定します。これにより、アプリ全体にデフォルトのSEO設定が適用されます。


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

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo
        title="My Website"
        description="This is my awesome website built with Next.js"
        openGraph={{
          url: 'https://www.mywebsite.com',
          title: 'My Website',
          description: 'This is my awesome website built with Next.js',
          images: [
            {
              url: 'https://www.mywebsite.com/og-image.jpg',
              width: 800,
              height: 600,
              alt: 'Og Image Alt',
            },
          ],
          site_name: 'My Website',
        }}
        twitter={{
          handle: '@mywebsite',
          site: '@mywebsite',
          cardType: 'summary_large_image',
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

#4. **DefaultSeo**で設定できる主なプロパティ

DefaultSeoには、SEOに関連するさまざまなプロパティを設定できます。以下は、主なプロパティです。

4.1 title

ページのデフォルトタイトルを指定します。個々のページで異なるタイトルを設定したい場合は、ページコンポーネント内でnext-seoのNextSeoコンポーネントを使ってオーバーライドできます。


<DefaultSeo title="My Website" />

4.2 description

ページのデフォルトの説明を設定します。この説明は、検索結果やSNSで共有される際に表示されるテキストです。

<DefaultSeo description="This is my awesome website built with Next.js" />

4.3 openGraph

Open Graph（OGP）メタデータを設定できます。これにより、FacebookやTwitterなどのSNSでリンクが共有された際に、タイトル、画像、説明をカスタマイズできます。


<DefaultSeo
  openGraph={{
    url: 'https://www.mywebsite.com',
    title: 'My Website',
    description: 'This is my awesome website built with Next.js',
    images: [
      {
        url: 'https://www.mywebsite.com/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt',
      },
    ],
    site_name: 'My Website',
  }}
/>

4.4 twitter

Twitterのカードタイプやアカウント情報を設定できます。これにより、Twitterでリンクがシェアされた際に、どのようなカードが表示されるかを管理できます。


<DefaultSeo
  twitter={{
    handle: '@mywebsite',
    site: '@mywebsite',
    cardType: 'summary_large_image',
  }}
/>

#5. ページごとのSEO設定

DefaultSeoを使ってアプリケーション全体のデフォルトSEOを設定した後、ページごとにSEO設定を個別に行いたい場合は、NextSeoコンポーネントを使用します。これを各ページのJSX内に追加することで、ページ固有のメタデータを設定できます。

例えば、pages/about.jsに次のように設定します：


import { NextSeo } from 'next-seo';

function AboutPage() {
  return (
    <>
      <NextSeo
        title="About Us"
        description="Learn more about our awesome company"
        openGraph={{
          url: 'https://www.mywebsite.com/about',
          title: 'About Us',
          description: 'Learn more about our awesome company',
          images: [
            {
              url: 'https://www.mywebsite.com/about-og-image.jpg',
              width: 800,
              height: 600,
              alt: 'About Us Image',
            },
          ],
        }}
      />
      <h1>About Us</h1>
      <p>We are an awesome company.</p>
    </>
  );
}

export default AboutPage;

これにより、AboutページだけのSEO設定が適用されます。

#6. まとめ

Next.jsでDefaultSeoを使うことで、SEOのデフォルト設定を簡単に一元管理することができ、各ページで個別にSEO設定を行う手間を省けます。next-seoは、SEOに必要な基本的なメタタグやOpen Graph、Twitterカードの設定を簡単に行えるツールであり、Next.jsのプロジェクトでSEOを最適化するための強力なサポートを提供します。これを活用することで、サイト全体のSEOを効率的に管理し、検索エンジンやSNSでの露出を高めることができます。

タグ一覧