GatsbyJSブログのOGP画像を動的に生成した

2020-07-01

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

今回はGatsbyJSブログのOGP画像を記事ごとに生成できるようにしたので解説していきます。

twitterなどにリンクを張る時に記事のトップ画像を表示するだけで、まともな記事に見えるので絶対にやったほうがいいですよね!

  • 前提
  • プラグインのインストルール
  • プラグインの設定
  • デフォルト画像の準備
  • 記事ごとの画像の準備
  • SEOコンポーネントの修正
  • 確認
  • まとめ

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

プラグインのインストール

以下コマンドで[gatsby-plugin-react-helmet]と[react-helmet]をインストールします。

[gatsby-starter-blog]を使用している場合は、インストールされているので、省略してください。

$npm install --save gatsby-plugin-react-helmet react-helmet

プラグインの設定

[gatsby-config.js]のpluginsにインストールした[gatsby-plugin-react-helmet]を追記します。

[gatsby-starter-blog]を使用している場合は、設定されているので、省略してください。

gatsby-config.js
{
  plugins: [
    ・・・
    `gatsby-plugin-react-helmet`
    ・・・
  ]
}

デフォルト画像の準備

[gatsby-starter-blog]を使用している場合は、基本的にタイトルや概要などは既に設定されているので、修正するのは画像の部分だけで大丈夫かと思います。

記事自体にリンクを張る場合はトップ画像を設定するのですが、それ以外のページのリンクを張る場合は固定の画像を表示するために、[src/images]ディレクトリに[default_image.png]を用意します。

用意した画像をインポートしておきます。

src/components/seo.js
import ogp_image from "../images/default_image.png";

次に以下のようにすれば、デフォルト画像のURLが取得できます。

src/components/seo.js
const siteUrl = site.siteMetadata.siteUrl;
const defaultImage = `${siteUrl}${ogp_image}`;
https://rpf-noblog.com/static/default_image.png

記事ごとの画像の準備

記事ごとの画像は、前に紹介したGatsbyJSブログの記事のトップ画像と記事一覧のサムネイル画像を追加したで使用している画像をそのまま使います。

GraphQLで画像のありかを探すと、

allMarkdownRemark / edges / node / frontmatter / hero / childImageSharp / fluid / src

のところにあることがわかるので、[src/templates/blog-post.js]を追記していきます。

src/templates/blog-post.js
const hero = post.frontmatter.hero.childImageSharp.fluid.src;
const image = `${siteUrl}${hero}`;  // これが記事ごとのトップ画像のURLになる

[SEO]コンポーネントにその画像URLを渡します。

src/templates/blog-post.js
<SEO
  title={post.frontmatter.title}
  description={post.frontmatter.description || post.excerpt}
  image={image}/>

SEOコンポーネントの修正

最後にSEOコンポーネントの[Helmet]タグの中を書き換えて終了です。

[image]に記事ごとの画像のURL、[defaultImage]にデフォルトの画像のURLが入っているので、

content: image || defaultImage

のようにして、propsで渡されれば記事ごとの画像で表示するようにします。

src/components/seo.js
<Helmet
  meta={[
    {
      property: "og:image",      content: image || defaultImage,    },
  ].concat(meta)}
/>

あと、[twitter:card]のところを[summarylargeimage]にしておけば、

src/components/seo.js
<Helmet
  meta={[
    {
      name: `twitter:card`,      content: `summary_large_image`,    },
  ].concat(meta)}
/>

↓の画像のように大きいサイズの画像リンクを使うことができます。

画像

確認

Card validatorというサイトでOGPのイメージを確認することができます。

Netlifyをホスティング先にしている場合は、GitHubに作業ブランチをプッシュしてmasterにプルリクするだけでプレビューが見れるので、 そのURLで確認するといいと思います。

画像

まとめ

今回はGatsbyJSブログのOGP画像を記事ごとに生成できるようにしました!

これでTwitterにブログ更新をツイートする時に大きな画像でアピールできます!!

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。



最後まで見ていただきありがとうございます!!


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニアです。 フロントエンドよりのweb開発技術(React,TypeScriptなど)を中心に扱っています。 web開発やデータサイエンス周りの技術に興味があります。 個人開発でwebアプリをリリースすることを目標にしています。

©2020 のふのふ All Rights Reserved.