All Articles

OGP対応(react-helmet利用)

2019/08/13

やりたいこと

TwitterなどのSNSでサイトのurlをシェアしたときに、見栄えを良くするため、OGP(Open Graph Protocol)対応をする。

2019 08 13 19 41 47

2019 08 13 21 53 24

やること

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>