画像を設定しておくことで、他のサイトでブログを共有した時に、画像を表示することができて見栄えが良くなります。リンクを共有した時に、表示してほしい画像やタイトルを設定しておくものです。ウェブラボ(株)スタッフブログ<head>タグ内に以下のようなタグを作成することで実現します。今回は画像と一緒に、タイトルやdescriptionも設定します。content="デザイン思考の基礎の勉強用メモ。Gatsbyブログに、他のサイトでOGP画像を設定します。用に項目を作ってもよいです。画像となるthumbnail_imageには、記事の場所からの相対パスを記載します。追加するこれまでgatsby-transformer-sharpを利用していなかった場合は、公式ページに従い設定します。クエリに、先ほどの項目を追加します。先にあるのが画像であることを検知し、childImageSharpやgatsbyImageDataといった要素を作成してくれます。取得したイメージを記事内に入れ込みます。)}post.frontmatter.thumbnail_image.childImageSharp.fluid.srcで画像のオブジェクトを取得します。&&を使うことで、thumbnail_imageを設定しない場合にも備えた記載にしています。中に入っているのは、/static/xxxxxxxxxxxxxxxxxxxxxxx/xxxxxx/thumbnail.pngといったような、画像ファイルが保管されるstaticフォルダの場所です。ogpImagePathは<Seo>コンポーネントのpropsとして引き渡します。Seo色を付けた部分(metaタグの設定)に、propsで引き渡してきた値を入れるだけです。書いていますが、ほとんどがpropsで正しい値が引き渡されなかった場合に設定したいデフォルト値を設定するための処理です。まとめGatsbyブログにOGP画像を追加することができました。事業会社のシステム部門で働きはじめて5年目の会社員。システム企画/要件定義/システムアーキテクチャ等。Twitter→@bun_sugi過去の記事についてはてなブログに掲載の記事(主にプログラミングメモ)についてはこちらに掲載しております。エンジニアを目指す日常ブログお問い合わせ|プライバシーポリシ。