37
18

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-01

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

▼ twitterに記事を投稿すると、こんな感じ。
Cloudinaryで作成したOGP画像

Cloudinaryとは?

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

料金プラン

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

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

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

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

スクリーンショット 2020-09-01 2.40.20.png
参考: https://cloudinary.com/documentation

どんなことができるか

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

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

OGPを作ってみる

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

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

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

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

スクリーンショット 2020-09-01 3.30.05.png

すると、下記のような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' },
}
37
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
18