この記事について
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つの注意点 | Webマーケティングの情報メディア【テンナラ】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株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Favicon in 2024: Six files that fit most needs ? Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/12/23 原著者: Andrey Sitnik -- PostCSSとAutoprefixerの作者、Evil Martiansのリードフロントエンド開発者 サイト: Evil Martians -- ニューヨークやロシア
bpsinc.jp
ページのウェブアプリマニフェスト
ウェブアプリマニフェストへのリンクを指定します。
設定方法
export const metadata: Metadata = {
manifest: 'https://example.com/manifest.webmanifest',
}出力されるタグ
<link rel="manifest" href="https://example.com/manifest.webmanifest" />ウェブアプリマニフェスト | MDN
ウェブアプリマニフェストは、プログレッシブウェブアプリ (PWA) と呼ばれる一連のウェブ技術の一部であり、アプリストアを通さずに端末のホーム画面にインストールすることができるものです。単純なホーム画面リンクやブックマークを持つ通常のウェブアプリとは異なり、 PWA は事前にダウンロードしてオフラインでも動作するだけでなく、通常の Web API を使用することもできます。
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の使い方
目次format-detectionについてなぜ無効化が必要なのかiOSとAndroidの違いサンプル format-detectionについて 下記のようにmetaタグにname="format-detection"と … <p class="link-more"><a href="https://iwb.jp/format-detection-telephone-email-ad
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" />Your Request Couldn't be Processed - Meta for Developers
facebook.com
アーカイブへのリンク
設定方法
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
標準メタデータ名 - HTML: ハイパーテキストマークアップ言語 | MDN
<meta> 要素を使用すると、文書のメタデータを名前と値の組み合わせで提供することができます。 name 属性でメタデータ名を指定し、 content 属性で値を指定します。
mozilla.org
HTML［ページ全般］ルート要素と文書のメタデータに関する要素 - TAG index
ページ全般で使用するHTML要素の一覧。DOCTYPE宣言、ルート要素、文書のメタデータに関連するHTMLタグの使い方と使用例を紹介。
tagindex.com
