gatsby-starter-gcn製のブログでogpがうまく表示できない問題

Jamstack

📅 October 19, 2020

•

⏱️5 min read

どうもこんちは!マッサンです。JAMstackが黎明期？ってこともあり、JAMstack構成でブログを作るとブログネタがわんさか出てきて、恩恵がすごいです。

やっぱり、JAMstack最高!!!

このブログはgatsby-starter-gcnを使っているのですが、デフォルトのままではtweetしたときにOGPがうまく表示されず、色々学びがあったので、記事にします。

OGPとは

そもそもOGPってなんやねん状態だったのですが、twitterとかでURLを貼り付けるとOGPを設定しているサイトでは、画像とテキストのカードでいい感じに表示してくれるあれデスね。

説明があれなので、詳しくはこちらをOGPを設定しよう！SNSでシェアされやすい設定方法とは？

twitterカードを確認する

OGPがうまく表示されない理由は、twitter側のクローラーがまだそのサイトの情報をうまく取得できていないことが原因の可能性もあるようです。

そんな時は、twitterに強制的にOGPの情報を読み込んでもらいます。 Twitter公式のこちらのサイトで、Twitterカードの確認と、サイト情報の読み込みができます。 Card Validator | Twitter Developers

トップページのみOGPが表示されない

TwitterのOGP確認ツールを使ってもまだ、私のサイトでは、Twitterカードがうまく表示されず。すべてのページでTwitterカードが表示されないわけではなく、ブログトップの / を共有しようとしたときだけ、Twitterカードが表示されず。

グーグルディベロッパーツールで確認してみたところ、headerタグ内の og:title の content が下のように空になってしまっていることが原因でした。

<meta property="og:description" content="ランニングとかコーディングとか" data-react-helmet="true">
<meta property="og:title" content data-react-helmet="true">

gatsby-starter-gcnでは、 src/components/SEO.js でいい感じにこのOGPの設定をしてくれているのですが、トップページのみtitleが正しく渡ってきていなかったので、titleが空文字なら、ブログtitleを使うってコードを書いて力技で直してみました。（なんかイケてないので本家にPRは出してません。）

修正内容

  const defaultImage = site.siteMetadata.siteUrl + site.siteMetadata.image
  const metaDescription = description || site.siteMetadata.description
  let metaImage = image || defaultImage
  const metaTitle = !!title ? title : site.siteMetadata.titl //←これ追加

  // 省略

  {/* OpenGraph tags */}
  <meta property="og:title" content={metaTitle} />　//変更

  // 省略
  {/* Twitter Card tags */}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={metaTitle} /> //変更

あんまりイケてない修正ですが、これでトップページもTwitterカードがうまく表示されました!!!!

が。

Twitterカードの画像がうまく表示されない

めでたし、めでたしかと思いきや。今度は、Twitterカードの画像の部分がうまく表示されず。

色々ググると、SSLの証明書とドメインが完全に一致していないとSSLの画像イメージをうまく表示できないらしい。（←あんまり意味わかってないですが、NetlifyがSSLもお世話してくれているので、それが原因っぽい期がしてます。）

詳しくはこちらを↓ How to Fix Twitter Cards Not Showing Images on Wordpress - toodlepip

ということで、別にOGPイメージはhttps:である必要はなさそうなので、http:で表示するようにして、無理やり表示しました。。。

SEO.jsの修正は雑にこんな感じ。

  const defaultImage = site.siteMetadata.siteUrl + site.siteMetadata.image
  const metaDescription = description || site.siteMetadata.description
  let metaImage = image || defaultImage
  const metaTitle = !!title ? title : site.siteMetadata.title

  if (/^\/\//.test(metaImage)) {
      metaImage = "http:" + metaImage
  }

  return (
    <Helmet
      htmlAttributes={{
        lang: `jp`,
      }}
      title={metaTitle}
      defaultTitle={site.siteMetadata.title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
    >
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      {/* General tags */}
      <meta name="image" content={image} />
      <meta name="description" content={metaDescription} />

      {/* OpenGraph tags */}
      <meta property="og:title" content={metaTitle} />
      <meta property="og:image" content={metaImage} />
      <meta property="og:description" content={metaDescription} />

      {/* Twitter Card tags */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={metaTitle} />
      <meta name="twitter:image" content={metaImage} />
      <meta name="twitter:description" content={metaDescription} />
    </Helmet>
  )
}

export default SEO

metaImageが // 始まりだったら、頭にhttp:をくっつけてしまってます。

どっちもあんまり本質的な解決ではないので、イケてない気はしますが、個人ブログだし、まぁ今のところは良しとしましょう。

それではまたー。

← Prev Next →