記事ページの 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
}
}
}
}
よくわからんけど動いた。