Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです

動的OGPを作成する手続きとしてはいくつかあるんですが、大きく分けでサーバーサイドで画像を作成するもの、image CDNを利用していい感じに作ってもらうものの2種類があります。
VOXELCANVASなんかはモデル作成後にphpで画像化してimage CDNに保存して、最後にimage CDNでロゴとblendするというハイブリッドな方法をとっています。


このブログも今まで記事ページは動的OGPを噛ませていなかったので、そういえばimgixとmicroCMSがパートナーとなったことだし、もしかしたら超簡単にできるんじゃね？ってことで挑戦してみました

手順を解説します。

まず最初に動的OGPのベースとなる画像を作成してmicroCMSにアップロードします


アップロードした時点でimgixの機能が使えるようになるので、テキストなんかを自由に入力できます

 https://images.microcms-assets.io/assets/8e9453be63d24180b314f0a38d273696/c762ac87c7ca4c2983703304381315e4/baseimage.jpg?txt=ここに文字を入力できます！&txt-size=62&txt-color=000000&txt-align=middle,center&txt-font=Futura%20Condensed%20Medium&txt-fit=max&txt-shad=2

あとはこれをOGPとしてNuxtで設定してあげるだけです。

head (){
    return {
        title : this.title + " | ",
        meta: [
            { hid: 'description', name: 'description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." },
            { hid: 'og:title', property: 'og:title', content: this.title + ' | 空想は世界を包み込む' },
            { hid : 'og:image', property: 'og:image', content: "https://images.microcms-assets.io/assets/8e9453be63d24180b314f0a38d273696/c762ac87c7ca4c2983703304381315e4/baseimage.jpg?txt="+this.title+"&txt-size=62&txt-color=000000&txt-align=middle,center&txt-font=Futura%20Condensed%20Medium&txt-fit=max&txt-shad=2"},
            { hid: 'og:url', property: 'og:url', content: 'https://blog.utautattaro.com' + this.$route.path + "/" },
            { hid: 'og:description', property: 'og:description', content: this.body.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,'').substr(0, 99)+"..." },
        ]
    }
}

以上で動的OGPが設定できます。

imgix周りの環境構築をすべてmicroCMSがやってくれるのでとても楽でした。

今回は1行で実現したので楽でしたが複数行にする場合は少しややこしくなるようです。
→対応したので追記しました

また、このブログでも何回か紹介しているimagekit.ioでは選べるフォントが少なめなのでまだimgixのほうが良さそうです。
https://docs.imagekit.io/features/image-transformations/overlay#text-overlay

2022/08/10追記：複数行に対応しました

blendで複数行もワンラインでできることに気づき、対応しました。


og:imageを以下のように変更しています。

{ hid : 'og:image', property: 'og:image', content: "https://images.microcms-assets.io/assets/8e9453be63d24180b314f0a38d273696/9008d1f218b0481a998190c172f60aa2/blogogp.jpg?usm=20&fit=crop&blend-mode=normal&blend-alpha=100&?blend-align=middle.center&blend-w=1.0&blend=https%3A%2F%2Fassets.imgix.net%2F~text%3Ftxt%3D"+this.title+"%26txt-color%3Dffffff%26width%3D1000%26txt-align%3Dcenter%26txtfont=Hiragino%20Sans%20W6%26txt-size%3D48"}