記事ページの og:image を指定できるようにした

2020/12/03

記事ページの og:image を Markdown ファイルから指定できるようにした。 Front Matter 部分で ogImage という項目に画像ファイルのパスを書いて指定できる。

---
ogImage: "./sample-og-image.jpg"
---

当 Gatsby 製ブログでは画像圧縮のライブラリとして Sharp を Gatsby のプラグインから利用している。このプラグインによって、 gatsby build 実行時に最適化され、ハッシュ値の付いたファイル名で生成される。

og:image の画像ファイルは絶対パスで指定しなければいけないので、ビルド後の変更されたファイル名を取得する必要がある。どうやら gatsby-transformer-sharp を使っていると、以下のようなクエリで Sharp を通したオブジェクト(ImageSharpノード)を取得できるらしい。その中からビルド後の画像ファイル名も取得できた。

frontmatter {
  ogImage {
    childImageSharp{
      sizes(maxWidth: 1200) {
        ...GatsbyImageSharpSizes
      }
    }
  }
}

よくわからんけど動いた。