Twitter Card 対応しました。og:Imageの絶対パス設定で平凡なミス！ContentfulのMediaにアップロードした画像の file > src をよく見てみると…

Twitterでシェアしてもらうときにわかりやすいように、Twitter Cardを設定してます。

TOP画面はsummaryカードを利用しています

「ぱっとしないIT・WEBディレクターのガジェットと時短日記」はじめてます。

ガジェット、仕事、時短あたりのネタを書き溜める場所にしております。よろしくお願いいたします。https://t.co/affcqMep9v

— 平凡 指揮（Heibon Shiki） (@ordinary_p_w) June 23, 2019

記事ページはsummary_largeカードを利用しています

https://t.co/tKqNWCC1dX

— 平凡 指揮（Heibon Shiki） (@ordinary_p_w) July 22, 2019

HeroImageを目立たせて、内容をキャッチしていこうという形です。

何回も試しても、記事ページのog:imageが効かず…　

以下のような形でのog:imageの管理をしています。

で、Contentfulで以下のクエリの「url」部分をそのままog:imageに設定していました。

query MyQuery {
  contentfulBlogPost{
    title
    slug
    heroImage {
      file {
        url
      }
    }
  }
}

{
  "data": {
    "contentfulBlogPost": {
      "title": "友人とスポーツ観戦へ。あなたはチケットを2枚購入！ しかし、友人が残業で遅刻… あなたならどうする？？　LINEチケットとLINE Payを利用したチケット購入は便利！",
      "slug": "recommended-line-ticket-and-line-pay",
      "heroImage": {
        "file": {
          "url": "//images.ctfassets.net/9vxvxcp5vdqz/4vM3YgdKEy2LjOSVBS9cac/418177ddbae1a12a84888e4dd376a08e/_______________10.png"
        }
      }
    }
  }
}

...ん？中身をみてみると「//images.」から始まりますね！

結果、Contentful の　Media　の file > url で返却される値の頭に「html:」を追加すれば、画像の絶対パスが手に入る！

　 //images. から始まりますね。GraphQLから返却されている中身。

heroImage > file > url 　の部分の頭に「html:」を追加すれば、絶対パスが手に入ることに気が付きましたよ！ （エンジニアの対応だと思えない程の、スーパー"ロー"テクノロジー）

ということで、gatsby-plugin-react-helmetを利用して、動的にmetaタグを埋める箇所の条件分岐は以下のようなソースコードになっています。

  ogpImage(): string {
    if (this.isTop === true) { // TOPページだったら
      return this.ogpImageSrc
    }
    else {　// 記事ページだったら
      return 'http:' + this.ogpImageSrc
    }
  }

あとは、コンソール開いて私のサイトのheadタグの中身なんぞを見てみてください！