# Next.jsのMetadataの設定方法と一緒にmetaタグを学ぶ

## この記事について

Next.js 14のMetadataオブジェクトの設定から出力されるHTMLタグをまとめた記事です。

Next.jsの公式にも[同じ内容のドキュメント](https://nextjs.org/docs/app/api-reference/functions/generate-metadata)がありますが、この記事では用途から逆引きできる形式でまとめています。

また、一部のmetaタグについては、その効果も解説しています。Metadataオブジェクトを使用すると簡潔な記述でmetaタグを設定できるので、この機会に適切なmetaタグを設定してUXを向上していきましょう。

## ページのタイトル

ページのタイトルを指定します。これは、ブラウザのタブや検索エンジンの結果に表示されるテキストとして使用されます。

```typescript:設定方法
export const metadata: Metadata = {
  title: 'My Websit',
}
```

```html:出力されるタグ
<title>My Websit<title>
```

## ページの概要

ページの概要を指定します。ページの内容を簡潔に説明するためのものです。検索エンジンの結果ページに表示されることがあります。また、[PageSpeed Insights](https://pagespeed.web.dev/)のSEOの項目ではmeta descriptionが設定されていない場合に減点となります。

```typescript:設定方法
export const metadata: Metadata = {
  description: 'My Website Description',
}
```

```html:出力されるタグ
<meta name="description" content="My Website Description" />
```

## ページの概要の補足

ページの概要や要約を指定するために使用されます。検索エンジンなどでも表示されることはないので設定の必要はないかもしれません。

```typescript:設定方法
export const metadata: Metadata = {
  abstract: 'My Website Description',
}
```

```html:出力されるタグ
<meta name="abstract" content="My Website Description" />
```

## ウェブアプリケーション名

```typescript:設定方法
export const metadata: Metadata = {
  applicationName: 'My Web App',
}
```

```html:出力されるタグ
<meta name="application-name" content="My Web App" />
```

## ページの著者名

ページの著者とそれに紐づくリンクを指定します。

```typescript:設定方法
export const metadata: Metadata = {
  authors: [
    {
      name: 'John Doe',
      url: 'https://example.com',
    },
  ],
}
```

```html:出力されるタグ
<meta name="author" content="John Doe" />
<link rel="author" href="https://example.com" />
```

## ページの作成者

```typescript:設定方法
export const metadata: Metadata = {
  creator: 'John Doe',
}
```

```html:出力されるタグ
<meta name="creator" content="John Doe" />
```

## ページの発行者

```typescript:設定方法
export const metadata: Metadata = {
  publisher: 'Example Publisher',
}
```

```html:出力されるタグ
<meta name="publisher" content="Example Publisher" />
```

## ページの生成に使用したソフト名

```typescript:設定方法
export const metadata: Metadata = {
  generator: 'Next.js',
}
```

```html:出力されるタグ
<meta name="generator" content="Next.js" />
```

## ページのキーワード

```typescript:設定方法
export const metadata: Metadata = {
  keywords: ["react", "server components"],
}
```

```html:出力されるタグ
<meta name="keywords" content="react, server components" />
```

## ページのリファラーポリシー

リンクをたどる際に送信する参照情報（リファラー）を制御するために使用されます。

```typescript:設定方法
export const metadata: Metadata = {
  referrer: 'origin',
}
```

```html:出力されるタグ
<meta name="referrer" content="origin" />
```

::link-card[https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy]

## 検索ロボットの動作を制御する

```typescript:設定方法
export const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
  },
}
```

```html:出力されるタグ
<meta name="robots" content="index, follow" />
```

## 多言語化のためのURLの正規化(canonical)と代替ページ(alternate)

ページが重複するコンテンツを持つ場合に、検索エンジンにどのURLが「正規」のページであるかを示すために使用されます。

```typescript:設定方法
export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com',
    languages: {
      ja: [{ url: 'ja', title: '日本語' }],
      en: [{ url: 'en', title: '英語' }],
    },
  },
}
```

```html:出力されるタグ
<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"/>
```

::link-card[https://service.grannet.co.jp/blog/hreflang/]

## favicon

```typescript:設定方法
export const metadata: Metadata = {
  icons: [
    { rel: 'icon', url: 'https://example.com/favicon.ico' },
    { rel: 'apple-touch-icon', url: 'https://example.com/apple-icon.png' },
  ],
}
```

```html:出力されるタグ
<link rel="icon" href="https://example.com/favicon.ico" />
<link rel="apple-touch-icon" href="https://example.com/apple-icon.png" />
```

::link-card[https://techracho.bpsinc.jp/hachi8833/2024_02_09/108697]

## ページのウェブアプリマニフェスト

ウェブアプリマニフェストへのリンクを指定します。

```typescript:設定方法
export const metadata: Metadata = {
  manifest: 'https://example.com/manifest.webmanifest',
}
```

```html:出力されるタグ
<link rel="manifest" href="https://example.com/manifest.webmanifest" />
```

::link-card[https://developer.mozilla.org/ja/docs/Web/Manifest]

## Open Graph Protocol

```typescript:設定方法
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',
      },
    ],
  },
}
```

```html:出力されるタグ
<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)カード

```typescript:設定方法
export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    site: '@site',
    creator: '@creator',
    images: 'https://example.com/og.png',
  },
}
```

```html:出力されるタグ
<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など)

```typescript:設定方法
export const metadata: Metadata = {
  verification: { google: '1234567890', yandex: '1234567890', me: '1234567890' },
}
```

```html:出力されるタグ
<meta name="google-site-verification" content="1234567890" />
<meta name="yandex-verification" content="1234567890" />
<meta name="me" content="1234567890" />
```

::link-card[https://developers.google.com/search/docs/crawling-indexing/special-tags]

## アップルのモバイルウェブアプリ対応

```typescript:設定方法
export const metadata: Metadata = {
  appleWebApp: { capable: true, title: 'My Website', statusBarStyle: 'black-translucent' },
}
```

```html:出力されるタグ
<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" />
```

::link-card[https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html]

## 電話番号、住所、メールアドレスの自動リンクを無効にする

特定の閲覧環境では文章内に電話番号、住所、メールアドレスに該当するフォーマットの文字列があると自動でリンクされてしまう場合があります。そのような自動リンクを無効化したい場合は `format-detection` を設定します。

```typescript:設定方法
export const metadata: Metadata = {
  formatDetection: { telephone: false, address: false, email: false },
}
```

```html:出力されるタグ
<meta name="format-detection" content="telephone=no, address=no, email=no" />
```

::link-card[https://iwb.jp/format-detection-telephone-email-address-no/]

## スマートアプリバナーを実装する

```typescript:設定方法
export const metadata: Metadata = {
  itunes: {
    appId: 'myAppStoreID',
    appArgument: 'myURL',
  },
}
```

```html:出力されるタグ
<meta name="apple-itunes-app" content="app-id=myAppStoreID, app-argument=https://example.com/myURL"/>
```

::link-card[https://developer.apple.com/documentation/webkit/promoting_apps_with_smart_app_banners]

## アプリリンク

```typescript:設定方法
export const metadata: Metadata = {
  appLinks: {
    ios: { app_store_id: '123456789', url: 'https://example.com' },
    android: { package: 'com.example', url: 'https://example.com' },
  },
}
```

```html:出力されるタグ
<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" />
```

::link-card[https://developers.facebook.com/docs/applinks/add-to-content]

## アーカイブへのリンク

```typescript:設定方法
export const metadata: Metadata = {
  archives: "https://example.com/archives"
}
```

```html:出力されるタグ
<link rel="archives" href="https://example.com/archives" />
```

## アセットへのリンク

```typescript:設定方法
export const metadata: Metadata = {
  assets: 'https://example.com/assets',
}
```

```html:出力されるタグ
<link rel="assets" href="https://example.com/assets" />
```

## ブックマークへのリンク

```typescript:設定方法
export const metadata: Metadata = {
  bookmarks: 'https://example.com/bookmarks',
}
```

```html:出力されるタグ
<link rel="bookmarks" href="https://example.com/bookmarks" />
```

## カテゴリ

```typescript:設定方法
export const metadata: Metadata = {
  category: 'My Category',
}
```

```html:出力されるタグ
<meta name="category" content="My Category" />
```

## ジャンル情報

```typescript:設定方法
export const metadata: Metadata = {
  classification: 'general,computers,internet',
}
```

```html:出力されるタグ
<meta name="classification" content="general,computers,internet" />
```

## 廃止予定 (deprecated)

> [!WARNING]
> Viewport、ページのテーマカラー、ページのカラースキームは専用の定義があるためMetadataでは廃止予定となっています。
>
> ::link-card[https://nextjs.org/docs/app/api-reference/functions/generate-viewport]

### Viewport

```typescript:設定方法
export const metadata: Metadata = {
  viewport: { width: "device-width", initialScale: 1 }
}
```

```html:出力されるタグ
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

### ページのテーマカラー

```typescript:設定方法
export const metadata: Metadata = {
  themeColor: [
    { media: '(prefers-color-scheme: dark)', color: '#000000' },
    { media: '(prefers-color-scheme: light)', color: '#ffffff' },
  ],
}
```

```html:出力されるタグ
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000000" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
```

### ページのカラースキーム

```typescript:設定方法
export const metadata: Metadata = {
  colorScheme: 'dark',
}
```

```html:出力されるタグ
<meta name="color-scheme" content="dark" />
```

## 参考リンク

::link-card[https://www.itti.jp/web-design/header-meta/]

::link-card[https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta/name]

::link-card[https://www.tagindex.com/html/page/]