Cloudinaryを使って記事タイトル入りOGP画像を作る方法

QiitaのOGPが可愛すぎて、自分のブログにも導入したい！と思い、
Cloudinaryを使って記事タイトル入りOGPを作成しました。

▼ twitterに記事を投稿すると、こんな感じ。

Cloudinaryとは？

画像の加工が得意なクラウドサービス。
APIを使用して、画像の変形・配信などができます。

料金プラン

基本的には無料で使えますが、上限があります。
料金プランに関しては、下記の記事がわかりやすかったです。

参考記事: Cloudinaryの新しいプランを調べてみた

SDKが提供されている言語・プラットフォーム

サービス開発における言語はほぼ網羅しています。
対応していない言語で使いたい場合も、URLにパラメータを渡して画像を変形することもできます。

参考： https://cloudinary.com/documentation

どんなことができるか

下記の記事がわかりやすかったです。

参考記事: Cloudinaryを使って画像の変換をやってみる

OGPを作ってみる

私のブログは、nuxt.jsで作っていますが、今回はcomponentでは使わないため、
vueのSDKではなくJavaScriptのSDKを使いました。

その他言語でも、公式ドキュメントを参考にすればOGPを作成できると思います。

0. OGPの背景画像をcloudinaryにアップロード

cloudinaryに登録し、Media LibraryにOGPの背景画像をアップロードしておきます。

すると、下記のようなURLが生成されます。

https://res.cloudinary.com/ワークスペース名/image/upload/バージョン/画像名

にupload以降のURLを変更することで、画像を変形することも可能です。

1. インストール

SDKをインストールします。

yarn add cloudinary-core

2. cloudinaryの設定

下記のページを参考に、cloudinaryの共通設定を行います。

公式ドキュメント: https://cloudinary.com/documentation/javascript_integration#setup

plugin/cloudinary.js

import cloudinary from 'cloudinary-core';

export default new cloudinary.Cloudinary({
  cloud_name: 'cheezblog', // Cloudinaryアカウントの名前
  secure: true, // httpsで配信するオプション
});

その他のオプションは下記ページ参考に設定ができます。

公式ドキュメント: https://cloudinary.com/documentation/cloudinary_sdks#configuration_parameters

3. cloudinaryで指定した画像に、textを配置

公式ドキュメントの「adding_text_captions」を参考に、文字をレイアウトしていきます。

公式ドキュメント: https://cloudinary.com/documentation/image_transformations#adding_text_captions

plugin/generateArticleOgp.js

import cloudinary from '~/plugins/cloudinary';

export default ogpText => {
  const encodeText = encodeURI(ogpText);
  
  // 第一引数は画像名、第二引数はオプション
  return cloudinary.url('ogp_ut3n8b.png', {
    // URLのバージョンの部分
    version: '1598892930',
    transformation: [
      {
        // 文字を重ねる設定
        overlay: {
          // フォントの設定(アップロードしたフォントも使えます！)
          font_family: 'notosansjp-bold.otf',
          // フォントのサイズ
          font_size: 40,
          // 文字を中央寄せ
          text_align: 'center',
          // 表示するテキスト
          text: encodeText,
        },
        // 文字の領域
        width: '600',
        // 文字の色
        color: '#333',
        // 画像を領域いっぱいに表示させる設定
        crop: 'fit',
      },
    ],
  });
}

crop:fitの参考: https://cloudinary.com/documentation/image_transformations#fit

上記の設定をすることで、タイトルのテキストを渡して新しいURLを生成することができます。

4. ogpに設定

先ほど作成したgenerateArticleOgpをimportし、生成したURLをmetaタグに設定します。
私のブログはNuxt.jsで作ったため、下記のように設定しました。

import generateArticleOgp from '~/plugins/generateArticleOgp';

computed: {
  ogpImage() {
    const ogpText = this.articleContent.fields.title || 'cheezBlog';
    return generateArticleOgp(ogpText);
  }
},
head() {
  // その他設定は省略
  { hid: 'og:image', property: 'og:image', content: this.ogpImage },
  { property: 'article:publisher', content: 'FacebookURL' },
  { property: 'fb:app_id', content: 'FacebookAppID' },
  { name: 'twitter:card', content: 'summary_large_image' },
  { name: 'twitter:site', content: '@Twitter' },
}