🐕

Next.jsでのメタファイルの設定について

2023/09/03に公開

はじめに

以下の環境で、メタファイルの作り方・保存場所について調べました

この形式は、内容を簡潔に伝えるためのものです。必要に応じて調整してください。

faviconは、ブラウザのタブに表示される小さなアイコンです。
iconは主にAndroidのホーム画面やWindows、Linuxのデスクトップで表示され、apple-iconはAppleデバイスのホーム画面で表示されます。

ファイルの格納場所は以下の通りです。

iconやapple-iconは、画像ファイルを置く代わりに画像を生成するソースを置くこともできます。
設定は必要なく、ファイルを置くだけで<head>タグ内に設定が追加されます。

マニュアルは以下にあります。

通常、PWAに対応するために配置するファイルです。
app/にmanifest.jsonを配置するか、jsonを作成するmanifest.jsかmanifest.tsを配置します。

マニュアルは以下にあります。

OGP画像やTwitterカードの画像を設定します。
OGP画像やTwitterカードの画像は、シェアされた場合に表示される画像です。

ファイルの格納場所は、app/です。

opengraph-image.pngを配置してbuildしてみたところ、twitter用の設定も生成されていたので、共通でよければopengraph-imageを置くだけで良さそうです。
～.altは、画像が読み込めない場合などの代替テキストです。

アイコン系と同じように、ファイルを置く代わりに画像を生成するソースを置くこともできます。
ファイルを置くだけで<head>タグ内に設定が追加されますが、環境変数VERCEL_URLかmetadataBaseの設定が必要です。

metadataBaseは、layout.(js|ts|tsx)ファイルで以下のように設定します。

import { Metadata } from 'next'
 

export const metadata: Metadata = {
  metadataBase: new URL('https://example.com'),
}

マニュアルは以下にあります。

Metadataに関するマニュアルは以下にあります。

検索エンジンのクローラーの設定ファイルです。
robots.txtを配置するか、robots.txtを作成するrobots.jsかrobots.tsをapp/に配置します。

robots.txtに関するマニュアルは以下にあります。

検索エンジンのクローラーが効率的にサイトをクロールできるようにするファイルです。

sitemap.xmlを配置するか、sitemap.xmlを作成するsitemap.jsかsitemap.tsを app/に配置します。

sitemap.xmlに関するマニュアルは以下にあります。