Gatsby.js製のブログでTwitter Cardを設定する方法

2022年07月10日 14:30

導入

ブロガーの皆さん、Twitter使っていますか？
Twitterに自分の記事を貼り付ける際に便利なものとしてTwitter Cardがあります。
これは以下の画像の赤枠で囲われた部分のことで、リンクを見出し画像と記事のタイトル、記事の内容の冒頭を含んだカードのような形で表示してくれます。

見やすくて便利ですよね。
そこで、今回はGatsby.js製のブログでTwitter Cardを設定する方法を解説します。
今回の記事では、OGPと呼ばれる一般的なルールに沿って記載しているため、Twitterだけではなく、FacebookやInstagram、SlackやTeamsなどにリンクを貼った時にも表示されるようになります。
また、記事ごとに個別に見出し画像を指定することができるようになります。

スポンサードリンク

設定方法

私は、gatsby-starter-blogというテンプレートを使っています。
そこで、今回はこのテンプレートでの設定方法を紹介します。

大まかな流れとしては、以下のようにTwitter Cardの見出し画像に使う画像のパスを受け渡すことで実現できます。

各記事のmarkdown上部で指定
ブログの各記事のページのテンプレートであるsrc/templates/blog-post.jsで画像のパスを取得し、meta情報を埋め込むコンポーネントsrc/components/seo.jsに受け渡す
src/components/seo.jsで見出し画像のURLを指定

具体的な手順は以下の通りです。

gatsby-node.jsにOGP画像のパスの型定義を追加
src/templates/blog-post.jsにOGP画像のパスを追加
src/components/seo.jsにOGPの情報を追加

それでは順に紹介していきます。

OGP画像のパスの型定義を追加

まずは、各ブログ記事のmarkdownから各記事の見出し画像のパスを指定できるようにするため、gatsby-node.jsにある型定義に見出し画像のパスを追加します。
具体的には、gatsby-node.jsの一番下のexports.createSchemaCustomizationにある以下の部分にogpImgPathという見出し画像のパスを指定する変数を追加するだけです。
＋（プラス）とある行が今回追加した行です。

    type Frontmatter {
      title: String
      description: String
      date: Date @dateformat
      tags: [String!]
+     ogpImgPath: String
    }

ブログ記事のテンプレート部分にOGP画像のパスを追加

次に各ブログ記事のテンプレートとなるsrc/templates/blog-post.jsにOGP画像のパスを追加します。
OGPの指定はgatsby-starter-blogでは最初から実装済みで、src/components/seo.jsというコンポーネントで実装されています。
このため、テンプレート上でこのコンポーネントにOGP画像のパスogpImgPathを渡すようにします。

const BlogPostTemplate = ({ data, location }) => {
  const post = data.markdownRemark
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const { previous, next } = data
  const tags = post.frontmatter.tags
  return (
    <Layout location={location} title={siteTitle}>
      <Iframely />
      <Seo
        title={post.frontmatter.title}
        description={post.frontmatter.description || post.excerpt}
+       ogpImgPath={post.frontmatter.ogpImgPath}
      />

また、各markdownから指定した情報をとってくるGraphQLの部分でも、ogpImgPathを追加します。

export const pageQuery = graphql`
  query BlogPostBySlug(
    $id: String!
    $previousPostId: String
    $nextPostId: String
  ) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(id: { eq: $id }) {
      id
      excerpt(truncate: true, pruneLength: 100)
      html
      frontmatter {
        title
        date
        description
        tags
+       ogpImgPath
      }

metaタグにOGPの情報を追加

gatsby-starter-blogではあらかじめOGPに関する基本的な設定が完了しています。
この実装はsrc/components/seo.jsにあるため、ここを修正します。

まず、先ほどsrc/templates/blog-post.jsに追加したogpImgPathの値が受け取れるように、propsとして引数に追加します。
また、自分のサイトのURLを取得するため、GraphQLでsiteUrlを追加します。

const Seo = ({ description, lang, meta, title, ogpImgPath /*ogpImgPathを追加*/ }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
+           siteUrl
            social {
              twitter
            }
          }
        }
      }
    `
  )

次に、記事の見出し画像のパスであるogpImgPathのデフォルト値と型の定義を行います。

Seo.defaultProps = {
  lang: `ja`,
  meta: [],
  description: ``,
+ ogpImgPath: null,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
+ ogpImgPath: PropTypes.string,
}

最後に、Twitter Cardに表示するサイト名と見出し画像のURLをmetaタグに追加し、完了です。

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title
  let titleTemplate = null
  let type = "article"
+ const imgPath = ogpImgPath ? "/ogp" + ogpImgPath : "/ogp-image.png"
  if (defaultTitle) {
    if (title === "All posts") {
      title = defaultTitle
      titleTemplate = title
      type = "blog"
    } else {
      titleTemplate = title + " | " + defaultTitle
    }
  }
  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={titleTemplate}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: type,
        },
+       {
+         property: `og:site_name`,
+         content: defaultTitle,
+       },
+       {
+         property: `og:image`,
+         content: `${site.siteMetadata?.siteUrl}${imgPath}`,
+       },
        {
          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)}
      link={[

検証

それでは実際にTwitter Cardで指定した画像が表示されるか検証します。
まずは、Twitter Card用の見出し画像をstaticフォルダに保存します。
今回は、デフォルトの画像をstatic/ogp-image.pngに、記事個別の画像をogpというフォルダを作成し、こちらに保存します。
例えば、冒頭の例では、以下のように画像を追加しました。

    - static/ (静的なファイル群)
        favicon.ico
        robots.txt
+       ogp-image.png（記事上で画像のパスを指定していない場合の見出し画像）
+       ogp/（記事個別に指定する見出し画像を入れるフォルダ）
+           insourcing-engineer-salary.jpg（冒頭で紹介した記事の見出し画像）

ここで、画像のサイズは様々なメディアに対応するため、1200×630が望ましいようです。
そして、今回の記事のmarkdownの上部で今回追加した画像のパスを記載します。

---
title: 内製化企業のエンジニアはいくらもらえるのか？その年収を調査する
date: "2022-07-03T17:20+09:00"
tags: ["技術ニュース", "内製化"]
ogpImgPath: /insourcing-engineer-salary.jpg  //この部分
---

ここで注意すべき点は、ogpImgPathに指定するパスは必ず/から始めることです。
これを忘れると画像がうまく表示されません。

実際に確認すると、以下のように表示されていることが確認できます。

今回の記事は内製化に取り組む企業のエンジニアの年収について調べました！
超有名企業の例ですが、見ていただけると嬉しいです！ #駆け出しエンジニアと繋がりたい #ブログ仲間と繋がりたい #エンジニア転職 #エンジニア #ITエンジニア #給料 #年収 #内製化 https://t.co/RWhNFM2J7U
— ベル15 (@bpeldi2oerkd8) July 3, 2022

スポンサードリンク

まとめ

今回はGatsby製のブログでTwitter Cardを設定する方法を紹介しました。
比較的簡単な方法で実装できるため、この記事を参考にしていただけると嬉しいです！