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

Next.jsReactTypeScriptJavaScript
Next.jsでタイトルやメタタグやOGPなどのHeadタグを動的に設置するサンプル
Memo

Next.jsでHeadタグの設定について
よく使用するが毎回調べたりしていたためメモします。
Typescriptにて記述しています。

環境

  • React 16.3.2
  • Next.js 5.1
  • typescript 2.8.3

サンプルコード

ディレクトリ構成

├── components
│   └── head.tsx
└── page
    ├── index.tsx
    └── item.tsx

next/headをインポートしHeadタグで囲ってあげると
ヘッド要素を展開してくれます。

components/head.tsx
import * 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;