QiitaのOGPが可愛すぎて、自分のブログにも導入したい!と思い、
Cloudinary
を使って記事タイトル入りOGPを作成しました。
Cloudinaryとは?
画像の加工が得意なクラウドサービス。
APIを使用して、画像の変形・配信などができます。
料金プラン
基本的には無料で使えますが、上限があります。
料金プランに関しては、下記の記事がわかりやすかったです。
参考記事: Cloudinaryの新しいプランを調べてみた
SDKが提供されている言語・プラットフォーム
サービス開発における言語はほぼ網羅しています。
対応していない言語で使いたい場合も、URLにパラメータを渡して画像を変形することもできます。
参考: https://cloudinary.com/documentation
どんなことができるか
下記の記事がわかりやすかったです。
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
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
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' },
}