デイトラモダン開発　DAY 33 Next.jsでSEOに関する設定を行おう

TD設定

TDの設定には以下の2つを使う！

metadata：通常ページで使用

generateMetadata：動的ページで使用（paramsで取得）

ハッサク

上記2つとも、使う時には「import type { Metadata } from ‘next’;」を最初に読み込む必要があるよ！

全ページに表示する「layout.tsx」だとこう書く↓

export const metadata:Metadata = {
  metadataBase: new URL(SITE_URL), //絶対パスに自動に変換★
  title: {
    template:'%s | Flow Meister',
    default:"Flow Meister"
  },
  description: "直感的な操作性とリアルタイム共有で、業務効率を最大化。情報の断絶をなくし、チーム全員が同じゴールを目指せます。",
  openGraph: {
    title:"Flow Meister",
    description: "直感的な操作性とリアルタイム共有で、業務効率を最大化。情報の断絶をなくし、チーム全員が同じゴールを目指せます。",
    images:["/ogp.jpg"], // 絶対パスにする必要あり★
    siteName:"Flow Meister",
    url:"/", // 絶対パスにする必要あり★
    type:"website",
  },
  robots: {
    index: false, //検索エンジンにインデックスを作成するかどうか
    follow: false, //検索エンジンにフォローするかどうか
  },
};

「metadata」はtemplateが使えるので、ページごとに「タイトル　※例：お知らせ」を指定すれば、「タイトル | サイトタイトル」で出力される。

OGPの設定

先ほどのコードの中にあるこの部分↓

  openGraph: {
    title:"Flow Meister",
    description: "直感的な操作性とリアルタイム共有で、業務効率を最大化。情報の断絶をなくし、チーム全員が同じゴールを目指せます。",
    images:["/ogp.jpg"], // 絶対パスにする必要あり★
    siteName:"Flow Meister",
    url:"/",
    type:"website",
  },

「openGraph」はTDのようにtemplateが使えないので、ベースを上書きする形でメタタグを追加する。

上記コードでは全ページに「type:”website”,」を設定しているか、お知らせ個別ページで「type:”article”,」を設定すると、「type:”article”,」に上書きされ出力される。