Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです
https://blog.qiita.com/qiita-article-ogp-renewal/
動的OGPを作成する手続きとしてはいくつかあるんですが、大きく分けでサーバーサイドで画像を作成するもの、image CDNを利用していい感じに作ってもらうものの2種類があります。
VOXELCANVASなんかはモデル作成後にphpで画像化してimage CDNに保存して、最後にimage CDNでロゴとblendするというハイブリッドな方法をとっています。
VOXELCANVAS is voxel art maker with online editor. this is a place where you can freely create works...
voxelcanvas.me
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が設定できます。
成果物microCMShttps://microcms.io/ Nuxt.jsThe Intuitive Vue FrameworkNuxt を使って信頼ある次世代の Vue.js アプリケーシ....
utautattaro.blog
A comprehensive guide that covers how you can overlay images and text over another image....
docs.imagekit.io
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"}