next-seoの使い方

next-seo は、React ベースのアプリケーションで SEO を実装するためのライブラリです。以下は、next-seo を使用してページのタイトル、説明、およびメタタグを設定する方法の簡単な例です。

・まず、next-seo パッケージをインストールします。

npm install next-seo

・次に、next-seo コンポーネントをインポートします。

import { NextSeo } from 'next-seo';

・ページの render メソッド内で NextSeo コンポーネントを使用して、タイトル、説明、およびメタタグを設定します。

import { NextSeo } from 'next-seo';

const MyPage = () => {
  return (
    <>
      <NextSeo
        title="My Page Title"
        description="This is a description of my page"
        openGraph={{
          title: 'My Page Title',
          description: 'This is a description of my page',
          images: [
            {
              url: 'https://www.example.com/image.jpg',
              alt: 'Image Alt Text',
            },
          ],
        }}
      />
      <div>
        <h1>Welcome to my page</h1>
        <p>This is the content of my page</p>
      </div>
    </>
  );
};

NextSeo コンポーネントには、title、description、openGraph プロパティがあります。

title と description は、ページのタイトルと説明を設定するために使用されます。

openGraph は、Open Graph メタデータを設定するために使用されます。

Open Graph メタデータは、Facebook などのソーシャルメディアプラットフォームでページが共有されたときに使用されます。

openGraph プロパティには、title、description、images などのサブプロパティがあります。

これらを使用して、ページの画像、カテゴリ、種類、Webサイト名などを設定することができます。

これで、NextSeo コンポーネントを使用してページのタイトル、説明、およびメタタグを設定する方法がわかりました。

他にも、さまざまなプロパティを設定することができます。

詳細については、next-seo ライブラリのドキュメントを参照してください。