この記事について
Next.js 14のMetadataオブジェクトの設定から出力されるHTMLタグをまとめた記事です。
Next.jsの公式にも同じ内容のドキュメントがありますが、この記事では用途から逆引きできる形式でまとめています。
また、一部のmetaタグについては、その効果も解説しています。Metadataオブジェクトを使用すると簡潔な記述でmetaタグを設定できるので、この機会に適切なmetaタグを設定してUXを向上していきましょう。
ページのタイトル
ページのタイトルを指定します。これは、ブラウザのタブや検索エンジンの結果に表示されるテキストとして使用されます。
設定方法
export const metadata: Metadata = {
title: 'My Websit',
}出力されるタグ
<title>My Websit<title>ページの概要
ページの概要を指定します。ページの内容を簡潔に説明するためのものです。検索エンジンの結果ページに表示されることがあります。また、PageSpeed InsightsのSEOの項目ではmeta descriptionが設定されていない場合に減点となります。
設定方法
export const metadata: Metadata = {
description: 'My Website Description',
}出力されるタグ
<meta name="description" content="My Website Description" />ページの概要の補足
ページの概要や要約を指定するために使用されます。検索エンジンなどでも表示されることはないので設定の必要はないかもしれません。
設定方法
export const metadata: Metadata = {
abstract: 'My Website Description',
}出力されるタグ
<meta name="abstract" content="My Website Description" />ウェブアプリケーション名
設定方法
export const metadata: Metadata = {
applicationName: 'My Web App',
}出力されるタグ
<meta name="application-name" content="My Web App" />ページの著者名
ページの著者とそれに紐づくリンクを指定します。
設定方法
export const metadata: Metadata = {
authors: [
{
name: 'John Doe',
url: 'https://example.com',
},
],
}出力されるタグ
<meta name="author" content="John Doe" />
<link rel="author" href="https://example.com" />ページの作成者
設定方法
export const metadata: Metadata = {
creator: 'John Doe',
}出力されるタグ
<meta name="creator" content="John Doe" />ページの発行者
設定方法
export const metadata: Metadata = {
publisher: 'Example Publisher',
}出力されるタグ
<meta name="publisher" content="Example Publisher" />ページの生成に使用したソフト名
設定方法
export const metadata: Metadata = {
generator: 'Next.js',
}出力されるタグ
<meta name="generator" content="Next.js" />ページのキーワード
設定方法
export const metadata: Metadata = {
keywords: ["react", "server components"],
}出力されるタグ
<meta name="keywords" content="react, server components" />ページのリファラーポリシー
リンクをたどる際に送信する参照情報（リファラー）を制御するために使用されます。
設定方法
export const metadata: Metadata = {
referrer: 'origin',
}出力されるタグ
<meta name="referrer" content="origin" />Referrer-Policy - HTTP | MDN
Referrer-Policy は HTTP ヘッダーで、 (Referer ヘッダーで送られる) リファラー情報をリクエストにどれだけ含めるかを制御します。 HTTP ヘッダーのほかに、 HTML でこのポリシーを設定することもできます。
mozilla.org
検索ロボットの動作を制御する
設定方法
export const metadata: Metadata = {
robots: {
index: true,
follow: true,
},
}出力されるタグ
<meta name="robots" content="index, follow" />多言語化のためのURLの正規化(canonical)と代替ページ(alternate)
ページが重複するコンテンツを持つ場合に、検索エンジンにどのURLが「正規」のページであるかを示すために使用されます。
設定方法
export const metadata: Metadata = {
alternates: {
canonical: 'https://example.com',
languages: {
ja: [{ url: 'ja', title: '日本語' }],
en: [{ url: 'en', title: '英語' }],
},
},
}出力されるタグ
<link rel="canonical" href="https://example.com"/>
<link rel="alternate" hrefLang="ja" title="日本語" href="https://example.com/ja"/>
<link rel="alternate" hrefLang="en" title="英語" href="https://example.com/en"/>hreflangが多言語サイトに必要な理由｜知るべき5つの注意点hreflangが多言語サイトに必要な理由｜知るべき5つの注意点
当記事では、「hreflang」の概要から書き方、canonicalタグとの併用方法について詳しく解説します。また、hreflangの確認方法や使用時の注意点についても紹介するため、多言語サイトを運用している方は、ぜひ参考にしてください。日本語や英語、中国語など多言語で書かれたウェブサイトには、hreflangという設定が必要…
grannet.co.jp
favicon
設定方法
export const metadata: Metadata = {
icons: [
{ rel: 'icon', url: 'https://example.com/favicon.ico' },
{ rel: 'apple-touch-icon', url: 'https://example.com/apple-icon.png' },
],
}出力されるタグ
<link rel="icon" href="https://example.com/favicon.ico" />
<link rel="apple-touch-icon" href="https://example.com/apple-icon.png" />2024年のファビコンを極める: 本当に必要なファイルはほぼ6つ（翻訳）｜TechRacho by BPS株式会社
追記: 以下の更新版記事を公開しましたので、そちらを参照してください。 2025年のファビコンを極める: 必要なファイルはほぼ3つに減った！（翻訳） 概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Favicon in 2024: Six files that fit most needs — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/12/23 原著者: Andrey Sitnik -- PostCSSとA
bpsinc.jp
ページのウェブアプリマニフェスト
ウェブアプリマニフェストへのリンクを指定します。
設定方法
export const metadata: Metadata = {
manifest: 'https://example.com/manifest.webmanifest',
}出力されるタグ
<link rel="manifest" href="https://example.com/manifest.webmanifest" />ウェブアプリマニフェスト - プログレッシブウェブアプリ (PWA) | MDN
ウェブアプリマニフェストは、 Web Application Manifest 仕様書で定義されており、ウェブアプリケーションについての情報を提供する JSON テキストファイルです。
mozilla.org
Open Graph Protocol
設定方法
export const metadata: Metadata = {
openGraph: {
type: 'website',
url: 'https://example.com',
title: 'My Website',
description: 'My Website Description',
siteName: 'My Website',
images: [
{
url: 'https://example.com/og.png',
},
],
},
}出力されるタグ
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com" />
<meta property="og:site_name" content="My Website" />
<meta property="og:title" content="My Website" />
<meta property="og:description" content="My Website Description" />
<meta property="og:image" content="https://example.com/og.png" />Twitter(X)カード
設定方法
export const metadata: Metadata = {
twitter: {
card: 'summary_large_image',
site: '@site',
creator: '@creator',
images: 'https://example.com/og.png',
},
}出力されるタグ
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@site" />
<meta name="twitter:creator" content="@creator" />
<meta name="twitter:title" content="My Website" />
<meta name="twitter:description" content="My Website Description" />
<meta name="twitter:image" content="https://example.com/og.png" />認証トークン(google-site-verificationなど)
設定方法
export const metadata: Metadata = {
verification: { google: '1234567890', yandex: '1234567890', me: '1234567890' },
}出力されるタグ
<meta name="google-site-verification" content="1234567890" />
<meta name="yandex-verification" content="1234567890" />
<meta name="me" content="1234567890" />Meta Tags and Attributes that Google Supports | Google Search Central | Documentation | Google for Developers
Google supports both page-level meta tags and tag attributes. Explore a list of the special tags that Google Search can support.
google.com
アップルのモバイルウェブアプリ対応
設定方法
export const metadata: Metadata = {
appleWebApp: { capable: true, title: 'My Website', statusBarStyle: 'black-translucent' },
}出力されるタグ
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="My Website" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />Supported Meta Tags
Describes the Hypertext Markup Language (HTML) tags and properties that are supported by Safari and WebKit.
apple.com
電話番号、住所、メールアドレスの自動リンクを無効にする
特定の閲覧環境では文章内に電話番号、住所、メールアドレスに該当するフォーマットの文字列があると自動でリンクされてしまう場合があります。そのような自動リンクを無効化したい場合は format-detection を設定します。
設定方法
export const metadata: Metadata = {
formatDetection: { telephone: false, address: false, email: false },
}出力されるタグ
<meta name="format-detection" content="telephone=no, address=no, email=no" />format-detectionのtelephone,email,address=noの使い方
metaタグにname="format-detection"とcontent属性にtelephone,email,addressなどにnoを指定することで自動リンクを無効にすることができるようになる。しかしiOSとAndroidではリンクに自動変換されるものとされないものが異なる。そのため特に自動的にリンクを変換する必要がなければtelephone=no, email=no,
iwb.jp
スマートアプリバナーを実装する
設定方法
export const metadata: Metadata = {
itunes: {
appId: 'myAppStoreID',
appArgument: 'myURL',
},
}出力されるタグ
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=https://example.com/myURL"/>Promoting Apps with Smart App Banners | Apple Developer Documentation
Create a banner to promote your app on the App Store from a website.
apple.com
アプリリンク
設定方法
export const metadata: Metadata = {
appLinks: {
ios: { app_store_id: '123456789', url: 'https://example.com' },
android: { package: 'com.example', url: 'https://example.com' },
},
}出力されるタグ
<meta property="al:ios:app_store_id" content="123456789" />
<meta property="al:ios:url" content="https://example.com" />
<meta property="al:android:package" content="com.example" />
<meta property="al:android:url" content="https://example.com" />https://developers.facebook.com/docs/applinks/add-to-content
アーカイブへのリンク
設定方法
export const metadata: Metadata = {
archives: "https://example.com/archives"
}出力されるタグ
<link rel="archives" href="https://example.com/archives" />アセットへのリンク
設定方法
export const metadata: Metadata = {
assets: 'https://example.com/assets',
}出力されるタグ
<link rel="assets" href="https://example.com/assets" />ブックマークへのリンク
設定方法
export const metadata: Metadata = {
bookmarks: 'https://example.com/bookmarks',
}出力されるタグ
<link rel="bookmarks" href="https://example.com/bookmarks" />カテゴリ
設定方法
export const metadata: Metadata = {
category: 'My Category',
}出力されるタグ
<meta name="category" content="My Category" />ジャンル情報
設定方法
export const metadata: Metadata = {
classification: 'general,computers,internet',
}出力されるタグ
<meta name="classification" content="general,computers,internet" />廃止予定 (deprecated)
Warning
Viewport、ページのテーマカラー、ページのカラースキームは専用の定義があるためMetadataでは廃止予定となっています。
Functions: generateViewport | Next.js
API Reference for the generateViewport function.
nextjs.org
Viewport
設定方法
export const metadata: Metadata = {
viewport: { width: "device-width", initialScale: 1 }
}出力されるタグ
<meta name="viewport" content="width=device-width, initial-scale=1" />ページのテーマカラー
設定方法
export const metadata: Metadata = {
themeColor: [
{ media: '(prefers-color-scheme: dark)', color: '#000000' },
{ media: '(prefers-color-scheme: light)', color: '#ffffff' },
],
}出力されるタグ
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />ページのカラースキーム
設定方法
export const metadata: Metadata = {
colorScheme: 'dark',
}出力されるタグ
<meta name="color-scheme" content="dark" />参考リンク
あなたの知らないmetaタグの世界
headタグ内のmetaタグ、linkタグのまとめ。随時変更していきます。
itti.jp
<meta> name 属性 - HTML | MDN
name 属性は <meta> 要素で、メタデータを名前と値の組み合わせで提供します。
<meta> 要素に name 属性がある場合、 content 属性で対応する値を定義します。
メタデータは、ページ全体に適用される「文書レベルメタデータ」です。
mozilla.org
HTML［ページ全般］ルート要素と文書のメタデータに関する要素 - TAG index
ページ全般で使用するHTML要素の一覧。DOCTYPE宣言、ルート要素、文書のメタデータに関連するHTMLタグの使い方と使用例を紹介。
tagindex.com
