logo
kmnky blog

Next.jsのMetadataをまとめてみる

SEONext.js

はじめに

以前、ブログ作成をしながらSEO対策を学習するという記事でSEO対策について紹介しました。 その次の記事で書こうと思っていたら、別の興味が湧き、結構時間が過ぎてしまいました...

以前の記事でNext.jsのMetadataについて触れましたが、openGraphやtwitterなどまだまだ設定すべきことがあったので別記事として今回まとめてみます。 私も最初Metadataを設定しようと思いましたが、各フィールドで設定する内容を説明している記事がなかったので、私のような方のご参考になれば幸いです。

Metadataの最適化

まずは、Next.jsの公式サイトに沿って、Metadata の設定方法を理解します。

Metadataの設定

Next.jsでは以下の2つ方法でMetadataを設定し、<head> リソースを作成します。

  • Config-based Metadata
    • layout.js もしくは pages.js へ静的な Metadata オブジェクトもしくは generateMetadata 関数をエクスポートする方法
    • Metadataオブジェクトの設定は後述の説明もしくは過去SEO記事参照
    • generateMetadataの設定は参考記事参照。
  • File-based Metadata
    • ルーティングされるフォルダに特定のファイルをおくことで設定する
      • アイコン画像（favicon.ico, apple-icon.jpg, icon.jpg）
      • ソーシャルメディア用の画像opengraph-image.jpg, twitter-image.jpg
      • クローラ用のファイル（robots.txt）　※過去SEO記事参照
      • サイトマップ（sitemap.xml） ※過去SEO記事参照

Metadata Fields

公式ドキュメントでは各項目で、<head>output というコードがあります。こちらはNext.jsで生成されたhtmlで最終的にこのメタデータが生成されるよという説明になります。こちらの説明まですると記事が長くなり、冗長になってしまうため、割愛させていただきます

設定すべきものや重要そうなもので並び替えて説明させていただきます。

title

タイトルはその名の通り、ページのタイトルを設定するメタデータです。ブラウザタブで表示されますし、SEOに影響を与えるので適切な値を設定しましょう。

設定の仕方は主に2通りあります。

  • layout.js
    • ページの共通タイトル、テンプレート、デフォルト値などを指定することができる
    export const metadata: Metadata = {
  title: {
    template: '...',
    default: '...',
    absolute: '...',
  },
}
  • page.js
    • 各ページに直接タイトルを設定する
    export const metadata = {
  title: 'Next.js',
}

description

メタディスクリプションはページの説明文を記載するもので、スニペットとも言います。

検索アルゴリズムに影響する記述は特にありませんでしたが、Google検索セントラルに記載の通り、質の高い説明文には検索画面でのスニペット表示として採用されます。検索画面の中で表示されれば、自ずとクリック率も上がると思うので設定しましょう。

ちなみに、Google Helpによると、50文字から160文字の間が良いとされています。モバイルは50文字という記事を見かけたので、なるべく最初にわかりやすい簡潔文を書くのが良いそうです。

openGraph

SNS、チャット、ブログ投稿などでURLを貼ったときに、画像や説明文が表示されることがあります。このようなケースで意図した内容が表示されるように伝えるのが、Open Graph Protocol (OGP) です。SEO向上につながりますし、SNSで共有された際に見てもらえる確率が高くなるので、ぜひ設定しましょう。

設定する項目は基本的なものです。Facebookの開発者ガイドがわかりやすかったです。

  • og:title : サイト名などのブランド情報を含まない、タイトル
  • og:description : コンテンツの簡単な説明文、2~4文が適切らしい
  • og:site_name : サイト名を指定する、Facebookの開発者ガイドに載ってはいなかったがいろんな記事に書いてあるので一応指定する
  • og:url : ページの正規URL、いいねやシェアがこのURLで加算されていくことから各種パラメータがないものを指定する
  • og:image : サムネイル画像。複数設定すると、共有する側が選択できるようになったりする
  • og:video : 動画を表示する場合に指定する
  • og:type : ページの種類、OGP公式サイトで設定できる種類がわかる
  • og:locale: リソースのロケール、デフォルトはen_US
export const metadata = {
  openGraph: {
    title: 'Next.js',
    description: 'The React Framework for the Web',
    url: 'https://nextjs.org',
    siteName: 'Next.js',
    images: [
      {
        url: 'https://nextjs.org/og.png', // Must be an absolute URL
        width: 800,
        height: 600,
      },
      {
        url: 'https://nextjs.org/og-alt.png', // Must be an absolute URL
        width: 1800,
        height: 1600,
        alt: 'My custom alt',
      },
    ],
    videos: [
      {
        url: 'https://nextjs.org/video.mp4', // Must be an absolute URL
        width: 800,
        height: 600,
      },
    ],
    locale: 'en_US',
    type: 'website',
  },
}

OGP確認ツールがあるので、設定後確認してみてください。

metadataBase

メタデータで使用されるURL（例えばOG画像）のベースを設定します。基本的には app/layout.js で設定します。

Vercel以外のホスティングサービスを利用する場合、設定しないとhttp://localhost:3000になるという注意記事がいくつもあります。

export const metadata = {
  metadataBase: new URL('https://acme.com'),
  openGraph: {
    images: '/og-image.png',
  },
}

twitter

X (旧twitter)でのOGPはtwitterメタタグを設定する。Twitter Developersにて軽く説明されています。OGPと違う点は、

  • twitter:card : summary,summary_large_image,app,playerのどれかを指定する
  • twitter:site : カードフッターで使用されるウェブサイトの@ユーザー名。
  • twitter:creator : コンテンツ作成者/著者の@ユーザー名。

であり、その他のタイトルやディスクリプションはOGPタグで代用することができるそうです。

export const metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js',
    description: 'The React Framework for the Web',
    siteId: '1467726470533754880',
    creator: '@nextjs',
    creatorId: '1467726470533754880',
    images: ['https://nextjs.org/og.png'], // Must be an absolute URL
  },
}

OGP確認ツールでも確認できますし、専用のCard Validatorでも確認できます。

robots

robots.txtはクロールを制御するのに対し、Robots metaタグは以下を制御できます。

  • ページや画像をインデックスさせるかどうか
  • ページ上のリンクも辿るかどうか
  • 検索結果にキャッシュリンクを表示するかどうか
  • 検索結果のスニペットを表示するかどうか

設定の詳細は、Google 検索セントラルにて解説されています。

export const metadata: Metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
    googleBot: {
      index: true,
      follow: false,
      noimageindex: true,
      'max-video-preview': -1,
      'max-image-preview': 'large',
      'max-snippet': -1,
    },
  },
}

Basic Fields

authorsやkeywordsといったメタタグを設定できますが、SEO向上にはつながらないので割愛します。

icons

ファビコン画像などアイコン画像を指定する。画像を配置するなどファイルベースの設定が推奨されています。

export const metadata = {
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
}

alternates

言語やPC/スマホといった理由で同じ中身だがURLは異なるといったケースで使用します。URLを正規化することでSEO向上につながります。

export const metadata = {
  alternates: {
    canonical: 'https://nextjs.org',
    languages: {
      'en-US': 'https://nextjs.org/en-US',
      'de-DE': 'https://nextjs.org/de-DE',
    },
    media: {
      'only screen and (max-width: 600px)': 'https://nextjs.org/mobile',
    },
    types: {
      'application/rss+xml': 'https://nextjs.org/rss',
    },
  },
}

manifest

プログレッシブウェブアプリ(PWA)といったアプリストアを介さず、端末のホーム画面にインストールできるアプリで、そのPWAに必要なmanifest.jsonを定義すします。そのmanifest.jsonの場所を指定するためのものです。

themeColor

その名の通りテーマカラーを指定します。ただし、Metadataの中で設定するのはNext.js 14から非推奨になった。代わりにViewportオブジェクトを使うことが推奨されています。

viewport

コンテンツの表示領域を設定するためのものです。ただし、Next.js 14から非推奨、代わりにViewportオブジェクトを使うことが推奨されています。

verification

ドメインやサービスの所有権を入れるためのものの様です。情報が少なく、必須でもないため今回の設定から外します。

export const metadata = {
  verification: {
    google: 'google',
    yandex: 'yandex',
    yahoo: 'yahoo',
    other: {
      me: ['my-email', 'my-link'],
    },
  },
}

Webページとアプリを紐づけるためのものです。URLからアプリを起動したり、アプリ内の特定の画面に直接遷移するディープリンクなどで使用されるそうです。SEOに関係はありませんが、必要に応じて設定してください。

export const metadata = {
  appLinks: {
    ios: {
      url: 'https://nextjs.org/ios',
      app_store_id: 'app_store_id',
    },
    android: {
      package: 'com.example.android/package',
      app_name: 'app_name_android',
    },
    web: {
      url: 'https://nextjs.org/web',
      should_fallback: true,
    },
  },
}

appleWebApp

iOSのホーム画面に追加してWebアプリケーションとして使用するためのものです。SEOに関係はありませんが、必要に応じて設定してください。

export const metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myAppArgument',
  },
  appleWebApp: {
    title: 'Apple Web App',
    statusBarStyle: 'black-translucent',
    startupImage: [
      '/assets/startup/apple-touch-startup-image-768x1004.png',
      {
        url: '/assets/startup/apple-touch-startup-image-1536x2008.png',
        media: '(device-width: 768px) and (device-height: 1024px)',
      },
    ],
  },
}

archives

過去バージョンのドキュメントなど過去の履歴を残すためのようですが、SEO向上には関係ないようです。

export const metadata = {
  archives: ['https://nextjs.org/13'],
}

assets

関連ファイルやリソースを指定して構造を明確にすることができるが、SEO向上には関係ないようです。

export const metadata = {
  assets: ['https://nextjs.org/assets'],
}

bookmarks

ブラウザのブックマーク機能でブックマークを使用されるときのデフォルトのURLを指定することができます。

export const metadata = {
  bookmarks: ['https://nextjs.org/13'],
}

category

サイトのカテゴリを設定できるようですが、SEO向上には関係ないようです。

export const metadata = {
  category: 'technology',
}

おわりに

以上、SEOについての勉強の完結編でした。tailwind-nextjs-starter-blogを参考にした時から、メタ情報（特にOGP）の設定やSEOをきちんと把握したいなと思い、ようやく勉強を終えることができました。まだまだ理解が甘いところもありますが、別の勉強を優先したいため一旦SEOの勉強はこれにて終了とします。

勉強している最中に同じようなことを書いている記事を見つけました。こちらも合わせてご参照ください。

最後まで読んでいただきありがとうございました。