Twitter Card

Cache clear

https://cards-dev.twitter.com/validator

 const description = props.json.descriptions
   .map((line) => line.replace(/\[.*?\]/g, ""))
   .join(" ");

 return (
   <>
     <Head>
       <title>{title} - NISHIO Hirokazu</title>
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:site" content="nishio" />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={props.json.image} />
     </Head>

old title Twitterカードカードの利用開始 — Twitter Developers

Open Graphのタグとの組み合わせ方が末尾に書いてある ts

<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="@nishio" />
<meta property="og:url" content="https://shinuwani.netlify.com/" />
<meta property="og:title" content="○年後に死ぬあなた" />
<meta property="og:description" content="漫画「100日後に死ぬワニ」を見てたら自分が何年後に死ぬのか気になったので作りました。" />
<meta property="og:image" content="https://shinuwani.netlify.com/shinuwani.jpg" />

react-helmetを使う案もあったが、単独ページ単独ファイルなので直接headをいじる方がいいと判断した

(C)NISHIO Hirokazu / Converted from Markdown (ja)
Source: [GitHub] / [Scrapbox]