【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> ); };