2022-02-28

Next SEO

Next SEOとは

Next-seoは、Next.jsアプリケーション内でSEOの管理を簡素化するために設計された軽量なライブラリです。SEOは、コンテンツの最適化、適切なキーワードの使用、サイトのメタタグの適切な設定など、さまざまな技術を用いて、ウェブサイトの検索エンジン結果ページ（SERP）での表示性を向上させるためのものです。

ただし、Next.jsなどのシングルページアプリケーション（SPA）でこれらの設定を管理することは煩雑です。ここでnext-seoが重要な役割を果たします。ページのSEO属性を効率的に制御する簡略化された方法を提供することで、コンテンツがユーザーと検索エンジンの両方に効果的に表示されることを保証します。

インストールとセットアップ

Next.jsアプリケーションでnext-seoを利用する前に、インストールする必要があります。next-seoはnpmパッケージとして提供されているため、npmまたはyarnを使用してインストールできます。

npmを使用する場合

bash

$ npm install next-seo

yarnを使用する場合

bash

$ yarn add next-seo

next-seoをインストールしたら、Next.jsプロジェクトに統合する準備が整いました。ページコンポーネント内またはグローバル設定のための_app.jsxファイルで、next-seoをインポートします。

import { NextSeo } from 'next-seo';

これで、NextSeoコンポーネントをアプリケーション内で使用することができます。

Next.jsとの統合

Next-seoをNext.jsアプリケーションに統合するには、カスタマイズしたいSEO属性を持つコンポーネントまたはページ内でNextSeoコンポーネントを使用する必要があります。

以下は、ページのタイトルと説明を設定するためにNextSeoを使用する例です。

import { NextSeo } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <NextSeo
        title="Home Page - My Next.js App"
        description="Welcome to the home page of my awesome Next.js application."
      />

      <div>
        <h1>Home Page</h1>
        <p>This is the home page of my Next.js application.</p>
      </div>
    </>
  );
}

上記の例では、NextSeoコンポーネントはHomePageコンポーネント内で使用されています。タイトルと説明のプロパティを取り、それぞれページのタイトルとメタ説明を設定します。

Next-seoは高度に設定可能であり、カノニカルURL、オープングラフタグなど、さまざまなSEO属性を設定することができます。NextSeoコンポーネントはページごとに使用でき、Next.jsアプリケーション内の各ページのSEO設定を細かく制御することができます。

Next SEOコンポーネント

メタタグの設定

NextSeoコンポーネントは、next-seoライブラリの基本的な部分です。このコンポーネントは、Next.jsのページやコンポーネント内で使用することで、さまざまなSEO目的のメタタグを設定するために利用できます。例えば、titleとdescriptionのプロパティを使用して、それぞれページのタイトルと説明のメタタグを設定することができます。

以下は、ページのtitle、description、およびcanonical URLを設定する方法の例です。

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

この例では、canonicalプロパティを使用してページのカノニカルURLを指定しています。これにより、検索エンジンでの重複コンテンツの問題を防ぐのに役立ちます。

ソーシャルメディアとの連携

NextSeoコンポーネントを使用すると、FacebookやTwitterなどのソーシャルメディアプラットフォームでページを共有する際の表示方法を定義することもできます。これは、openGraphとtwitterのプロパティを設定することで行います。

import { NextSeo } from 'next-seo';

export default function ExamplePage() {
  return (
    <>
      <NextSeo
        title="Example Page - My Next.js App"
        description="This is an example page of my Next.js application."
        canonical="https://www.example.com/"
        openGraph={{
          url: 'https://www.example.com/',
          title: 'Example Page - My Next.js App',
          description: 'This is an example page of my Next.js application.',
          images: [
            {
              url: 'https://www.example.com/images/og-image.jpg',
              width: 800,
              height: 600,
              alt: 'Og Image Alt',
            },
            {
              url: 'https://www.example.com/images/og-image-2.jpg',
              width: 900,
              height: 800,
              alt: 'Og Image Alt 2',
            },
          ],
        }}
        twitter={{
          handle: '@handle',
          site: '@site',
          cardType: 'summary_large_image',
        }}
      />

      <div>
        <h1>Example Page</h1>
        <p>This is an example page of my Next.js application.</p>
      </div>
    </>
  );
}

この例では、openGraphプロパティを使用して、Facebookでページが共有される際の表示方法を設定しています。一方、twitterプロパティを使用して、ページのTwitterカードをカスタマイズしています。

SocialProfileJsonLdコンポーネント

next-seoが提供するもう1つの重要なコンポーネントは、SocialProfileJsonLdコンポーネントです。このコンポーネントを使用すると、JSON-LD形式の構造化データを使用してソーシャルメディアプロフィールに関する情報をページに追加することができます。これにより、検索エンジン結果での表示性を向上させることができます。

import { SocialProfileJsonLd } from 'next-seo';

export default function HomePage() {
  return (
    <>
      <SocialProfileJsonLd
        type="Person"
        name="John Doe"
        url="http://www.example.com"
        sameAs={[
          "http://www.facebook.com/yourusername",
          "http://instagram.com/yourusername",
          "http://www.linkedin.com/in/yourusername",
          "http://plus.google.com/yourusername"
        ]}
      />
      <div>
        <h1>Home Page</h1>
        <p>Welcome to my personal website. Connect with me on social media!</p>
      </div>
    </>
  );
}

この例では、SocialProfileJsonLdコンポーネントを使用して、人物に関する構造化データを提供しています。typeプロパティはデータの種類を指定し、nameとurlプロパティは人物の名前とウェブサイトのURLを提供します。sameAsプロパティは、人物のソーシャルメディアプロフィールのURLを含む配列です。

SEOタグのカスタマイズ

next-seoを使用すると、アプリケーションのさまざまな部分に対してSEOタグをカスタマイズする柔軟性があります。これにより、さまざまなページやコンテンツタイプに対してカスタムのタイトル、説明、ソーシャルメディアタグを設定することができ、効果的なSEO戦略を展開することができます。

例えば、Next.jsアプリケーション内にブログがある場合、各ブログ投稿に対してカスタムのタイトル、説明、ソーシャルメディアタグを設定することができます。

import { NextSeo } from 'next-seo'

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
        openGraph={{
          title: post.title,
          description: post.summary,
          images: [
            {
              url: post.image,
              alt: post.title,
            },
          ],
        }}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  )
}

この例では、NextSeoコンポーネントがBlogPostコンポーネント内で使用されています。title、description、imageUrlのプロパティに基づいて、タイトル、説明、オープングラフタグなどが動的に設定されます。

ArticleJsonLdコンポーネント

ブログ投稿や記事など、特にSEOにおいて重要なのは、JSON-LD形式の構造化データを提供することです。JSON-LDは「JSON for Linking Data」の略であり、コンテンツやコンテキストを理解させるために検索エンジンが使用できる形式です。next-seoでは、この目的のためにArticleJsonLdコンポーネントを提供しています。このコンポーネントを使用すると、ウェブサイト内の記事に対して構造化データを追加することができます。

以下は、ブログ投稿でArticleJsonLdコンポーネントを使用する例です。

import { NextSeo, ArticleJsonLd } from 'next-seo';

function BlogPost({ post }) {
  return (
    <>
      <NextSeo
        title={post.title}
        description={post.summary}
      />

      <ArticleJsonLd
        url={`https://www.example.com/blog/${post.slug}`}
        title={post.title}
        images={[post.image]}
        datePublished={post.datePublished}
        dateModified={post.dateModified}
        authorName={post.authorName}
        publisherName="Example Publisher"
        publisherLogo="https://www.example.com/images/logo.jpg"
        description={post.summary}
      />

      <div>
        <h1>{post.title}</h1>
        <p>{post.content}</p>
      </div>
    </>
  );
}

この例では、ArticleJsonLdコンポーネントを使用してブログ投稿に構造化データを追加しています。

DefaultSeoの設定

next-seoでは、DefaultSeoコンポーネントを使用して、Next.jsアプリケーション全体でのデフォルトのSEO設定を行うことができます。これは、アプリケーション全体の全てのページで使用される基本的なSEO属性を設定するのに役立ちます。各ページでこれらのデフォルトをオーバーライドするために、個別のページでNextSeoコンポーネントを使用することもできます。

以下は、DefaultSeoコンポーネントの使用方法です。

src/pages/_app.jsx

import { DefaultSeo } from 'next-seo';
import defaultSeoConfig from '../seo-config';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <DefaultSeo {...defaultSeoConfig} />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

seo-config.js

export default {
  title: "Default title for my Next.js App",
  description: "Default description for my Next.js App",
  openGraph: {
    type: 'website',
    locale: 'en_IE',
    url: 'https://www.example.com/',
    site_name: 'SiteName',
  },
  twitter: {
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  },
};

この例では、_app.jsxファイルでDefaultSeoコンポーネントを使用してデフォルトのSEO設定を行っています。これらの設定は、別のseo-config.jsファイルからインポートされています。Next.jsアプリケーションのどのページでも、特定のページでNextSeoコンポーネントを使用してオーバーライドしない限り、この設定が適用されます。