津江のブログ

モバイルエンジニアが仕事での学びをアウトプット

【metaタグ】Next.jsのヘッダーの書き方

昨年作ったポートフォリオに実装した内容

/pages/index.js

import Head from '../components/Head';
中略
  <Head
    title={'タイトル記入'}
    description={'アプリの説明'}
    url={'https://app-url.web.app'}
  />

下記を読み込んでいる

/components/Head.js

import * as React from 'react';
import Head from 'next/head';

export default ({ title, description, keyword, url }) => {
  return (
    <Head>
      <title>{title}</title>
      <meta charSet="utf-8" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:type" content="website" />
      <meta property="og:url" content={url} />
      <meta property="og:image" content={"/favicon.png"} />
      <meta property="og:site_name" content={title} />
      <meta name="keywords" content={keyword} />
      <meta name="viewport" content="width=device-width,initial-scale=1" />
      <meta name="twitter:card" content="Summary Card" />
      <meta name="twitter:site" content="@Tsue_engineer" />
      <meta name="twitter:url" content={"https://tsue-gatsby.web.app"} />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={"/favicon.png"} />
      <link rel="canonical" href={url} />
      <link rel="icon" href="/favicon.ico" />
      <link rel="apple-touch-icon" href={"/favicon.png"} />
    </Head>
  );
};