やりたいこと
TwitterなどのSNSでサイトのurlをシェアしたときに、見栄えを良くするため、OGP（Open Graph Protocol）対応をする。
↓
やること
OGP対応に必要な metaタグを、 react-helmet を使って記事ページに追加する。
Layoutコンポーネントが、親の共通レイアウトとなっているので、そこに追記する形で対応する。
Postコンポーネント（記事ページ）に設定する。
OGPのメタタグ
記事ごとに、適切画像を設定するよう対応したいが、一旦、固定画像を設定中。
import Helmet from 'react-helmet';
const Post = ({ post }: Props) => {
const { tags, title, date } = post.frontmatter;
const { url } = useSiteMetadata();
const description = post.frontmatter.description;
///省略
<Helmet>
<meta property="og:title" content={title} />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://kioteratech.netlify.com/kiotera-icon.png" /> {/* TODO: 記事ごとの任意の画像urlを設定する*/}
<meta property="og:url" content={url} />
<meta property="og:description" content={description} />
</Helmet>