OGP画像を表示できるようにGatsbyを弄った。

概要

TwitterやSlackなどで記事をシェアした際にOGP画像がないため、見た目がショボショボで辛かったので、急遽デフォルトで表示されるOGP画像を作成してGatsby側でも表示できるようにしてみました。

諸々の表示確認は下記のサイトで行いました。

• Card Validator | Twitter Developers
• シェアデバッガー - Meta for Developers

OGP画像の作成

Figmaで適当にデザインを作成しました。

デザインのポイントとしては、下記を意識しました。

• サイトのロゴを入れる
• サイトのカラーを使う
• シンプルに

Gatsbyでの設定

gatsby-config.js に下記を追加しました。

module.exports = {
  siteMetadata: {
    title: "< カグラボ />",
    siteUrl: "https://kglabo.com/",
    image: "/ogp.png", // 追加
  },
}

そして、src/components/seo.js を修正しました。

const Seo = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            siteUrl
            social {
              twitter
            }
            image
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title
  const ogImageUrl = `${site.siteMetadata.siteUrl}${site.siteMetadata.image}`

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:image`,
          content: ogImageUrl,
        },
        {
          name: `twitter:card`,
          content: `summary_large_image`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

まとめ

これでTwitterやSlackでシェアした際にOGP画像が表示されるようになりました。

今後は記事ごとにOGP画像を自動生成できるようにしたいですね。