【設定方法】Next.jsでタイトルやメタタグやOGPなどのHeadタグを動的に設置するサンプル

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Next.jsでHeadタグの設定について
よく使用するが毎回調べたりしていたためメモします。
Typescriptにて記述しています。
環境
- React 16.3.2
- Next.js 5.1
- typescript 2.8.3
サンプルコード
ディレクトリ構成
markdown├── components
│ └── head.tsx
└── page
├── index.tsx
└── item.tsx
next/head
をインポートしHead
タグで囲ってあげると
ヘッド要素を展開してくれます。
components/head.tsximport * as React from 'react';
import Head from 'next/head';
interface Props {
title: string;
description: string;
keyword: string;
image: string;
url: string;
}
export default ({ title, description, keyword, image, url }: Props): JSX.Element => {
return (
<Head>
<title>{title}</title>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta name="keywords" content={keyword'} />
<meta property="og:type" content="blog" />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:site_name" content={title} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@tcr_jp" />
<meta name="twitter:url" content={image} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={image} />
<link rel="canonical" href={url} />
<link rel="shortcut icon" href={'https://t-cr.jp/favicon.ico'} />
<link rel="apple-touch-icon" href={'https://t-cr.jp/logo.png'} />
</Head>
);
};
作成したcomponents/head.tsx
をインポートします。
インポートしたHead
を記述する場所についてはどこに記述しても問題ありません。
子コンポーネントに設置することもできます。
page/index.tsx
import * as React from 'react';
import Head from 'components/head';
class App extends React.Component {
public render(): JSX.Element {
return (
<div>
<Head
title={'タイトル'}
description={'ディスクリプション'}
keyword={'キーワード'}
image={'https://t-cr.jp/img.jpg'}
url={'https://t-cr.jp'}
/>
コンテンツ
</div>
);
}
}
export defualt App;
他のページから同じように設定することで
ページごとにデータを渡して動的に設置することが可能です。
page/item.tsx
import * as React from 'react';
import Head from 'components/head';
class Item extends React.Component {
public render(): JSX.Element {
return (
<div>
<Head
title={'タイトル'}
description={'ディスクリプション'}
keyword={'キーワード'}
image={'https://t-cr.jp/img.jpg'}
url={'https://t-cr.jp'}
/>
コンテンツ
</div>
);
}
}
export defualt Item;
- article
Next.js × pnpm/Turborepo 初期構築:ワークスペース・共有パッケージ・CI 最適化
- article
Next.js Route Handlers vs API Routes:設計意図・性能・制約のリアル比較
- article
Remix と Next.js/Vite/徹底比較:選ぶべきポイントはここだ!
- article
【実測検証】Remix vs Next.js vs Astro:TTFB/LCP/開発体験を総合比較
- article
Next.js で「Dynamic server usage: cookies/headers」はなぜ起きる?原因と解決手順
- article
Zustand × Next.js の Hydration Mismatch を根絶する:原因別チェックリスト
- article
TypeScript 公開 API の型設計術:`export type`/`interface`/`class`の責務分担と境界設計
- article
ESLint を Yarn + TypeScript + React でゼロから構築:Flat Config 完全手順(macOS)
- article
TypeScript 型縮小(narrowing)パターン早見表:`in`/`instanceof`/`is`/`asserts`完全対応
- article
TypeScript 共有可能な tsconfig 設計:`tsconfig/bases`で複数パッケージを一括最適化
- article
TypeScript ランタイム検証ライブラリ比較:Zod / Valibot / typia / io-ts の選び方
- article
【解決策】TypeScript TS2307「Cannot find module…」が出る本当の原因と最短復旧手順
- article
Docker マルチステージビルド設計大全:テスト分離・依存最小化・キャッシュ戦略
- article
Devin で既存バグを最短修正:再現 → 原因特定 → 最小修正 → 回帰テストの一連プロンプト
- article
Lodash を“薄いヘルパー層”として包む:プロジェクト固有ユーティリティの設計指針
- article
Convex で実践する CQRS/イベントソーシング:履歴・再生・集約の設計ガイド
- article
LangChain と LlamaIndex の設計比較:API 哲学・RAG 構成・運用コストを検証
- article
Jotai が再レンダリング地獄に?依存グラフの暴走を止める診断手順
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来