mardownのfrontmatter
mardownのfrontmatterから画像URLを取得して各ページのogp:imageとしたいのだけど、適当に設定すると動かないので検証がしにくい。 とりあえず、すべてのページに対しておなじogp:imageには設定できた。staticフォルダーに画像を入れて、絶対パスで指定する方法をとった。
ほかの人がやっているのを見ると、画像をgatsby-transformer-sharpを利用しているのでちょっと違うかなと。アマゾンの表紙画像を利用したかったので、URLをそのまま渡したい。 bunsugi.com
テンプレートリテラル
gatsbyでsrcsetの書き方がわからずにいろいろやった結果テンプレートリテラルの使い方の問題のようだ。
qiita.com
imgタグのsrcset・sizes属性とpictureタグの使い方
レスポンシブイメージで画像表示を最適化
ics.media
Gatsby（GatsbyJS）でSNSのSHAREを設置 | Gatsbyブログカスタマイズ frontsensei.com
ogpimageに書き換え
タグの追加の方法からogpimageに書き換えてみると簡単にできた。ogpimageの指定がない場合はstaticフォルダーの画像を表示することにした。
const metaImage = ogpimage || site.siteMetadata.icon
<meta name="twitter:image" content={metaImage} />
Gatsby.jsで作ったブログにタグ機能を追加する bel-itigo.com
