SEO・OGPの記述方法（動的ページも含む）&Twitterの表示確認

<aside> 💫 Reactでは、index.jsのみメタデータが書けた。（ライブラリを使えばページごとにも記述可能）

Next.jsではHeadコンポーネントが用意されているので、ページごとにメタデータを記述することができる！

</aside>

■目次

SEO・OGPの基本の書き方

▼基本の書き方

/**
* Headコンポーネントに記述できるもの（例）
* ・<title>：サイト/ページタイトル
* ・<meta description="...">：サイト/ページの説明（120文字程度が良い）
* ・<meta property="og:...">：SNSシェア時にサイト/ページ情報を表示するOGPタグ
* ・<link href="...">：CSSやCDNの読み込み
*/

**import Head from "next/head";**

export default function YourComponentName() {
  return (
    <>
      **<Head>
        <title>Your Site Name</title>
      </Head>**
			//省略
    </>
  );
}

https://www.youtube.com/watch?v=D-q8K7TCN6I&list=PLX8Rsrpnn3IUGEyanrHYGjY1WOzNe7Jd-&index=4

SEO・OGPの設定方法

OGP・metaタグ用のcomponentを作成する

components/commonフォルダ内にSeo.jsを作成し、以下を記述する

import Head from "next/head";

export default function Seo({
    pageTitle,
    pageDescription,
    pagePath,
    pageType,
    pageImg,
    pageImgWidth,
    pageImgHeight,
    twitterCard
}) {
    const defaultTitle = "デフォルトのサイトタイトルを入れる"
    const defaultDescription = "デフォルトのサイト説明を入れる"

    const title = pageTitle ? `${pageTitle} | ${defaultTitle}` : defaultTitle;
    const description = pageDescription ? pageDescription : defaultDescription;
    const type = pageType ? pageType : "website"; 
    const url = pagePath;
    const imgUrl = pageImg;
    const imgWidth = pageImgWidth ? pageImgWidth : 1280;
    const imgHeight = pageImgHeight ? pageImgHeight : 640;
    const card = twitterCard

    return (
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <meta property="og:url" content={url} />
        <meta property="og:title" content={title} />
        <meta property="og:site_name" content={title} />
        <meta property="og:description" content={description} />
        <meta property="og:type" content={type} />
        <meta property="og:image" content={imgUrl} />
        <meta property="og:image:width" content={String(imgWidth)} />
        <meta property="og:image:height" content={String(imgHeight)} />
        <meta name="twitter:card" content={card} />
        <link rel="canonical" href={url} />
      </Head>
    );
}

componentを各pageに設置する

<aside> 🌿 indexさせたいpage（トップ、下層ページ等）に設置しよう！404とかはindexさせる必要はないので、設置しなくていいと思う

</aside>

以下のようにcomponentをpageに読み込み、OGP、metaをpropsで渡して設置する

例）index.js
```
// OGP
**import Seo from "../components/common/Seo";**

export default function Home() {
  return (
    <Layout>
      **<Seo
        pagePath={"<https://example.netlify.app>"}
        pageImg={
          "<https://example.netlify.app/img/top/logo.png>"
        }
        pageImgWidth={402}
        pageImgHeight={281}
        twitterCard={"summary"}
      />**
    </Layout>
  );
}
```
<aside> 🌿 pageImgのsrcは、絶対パス（httpsから全て記述）にすること

twitterCardのスタイルはいくつかあるが、基本は以下2種類のどちらかでOK ・summary ・summary_large_image

pageTypeは以下のどちらかでいいと思う・website ・article

</aside>

microCMSなど、動的にOGP・meta設定したい場合

componentを読み込むまでは一緒

getStaticPropsで取得したデータをそのままpropsで渡せばOK

例）[id].js （実績詳細ページ）

// OGP
**import Seo from "../../components/common/Seo";**

export default function WorkDetails({ workDetailsData }) {
  return (
    <Layout>
      **<Seo
        pageTitle={workDetailsData.caseName}
        pageDescription={workDetailsData.caseSummary}
        pageType={"article"}
        pagePath={`https://example.netlify.app/work-details/${workDetailsData.id}`}
        pageImg={workDetailsData.mainImg.url}
        pageImgWidth={workDetailsData.mainImg.width}
        pageImgHeight={workDetailsData.mainImg.height}
        twitterCard={"summary_large_image"}
      />**
		</Layout>
  );
}

// path
export const getStaticPaths = async () => {
  const data = await client.get({
    endpoint: "work-details",
  });

  const paths = data.contents.map((content) => `/work-details/${content.id}`);
  return { paths, fallback: false };
};

// props
export const getStaticProps = async (context) => {
  const id = context.params.id;
  const data = await client.get({
    endpoint: "work-details",
    contentId: id,
  });

  return {
    props: {
      workDetailsData: data,
    },
  };
};

Twitterの表示確認方法

Twitter Card Validatorを使う

Card URLにサイトURLを入れて「Preview card」ボタンをクリック