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が設定できます。
成果物microCMSmicroCMS|APIベースの日本製ヘッドレスCMSmicroCMSはAPIベースの日本製のヘッドレスCMSです。もう社内向け編集/管理画面を自作する必要はありません。開発・....
utautattaro.blog
Learn how to use imgix’s Typesetting Endpoint and the mark and blend parameters to do advanced text ...
docs.imgix.com
記事が公開された瞬間にツイートする
2021年9月20日(月) 16時51分57秒 | 204 viewactions-js/push@masterでのデフォルトブランチがmasterからmainに変わっていてCIが動かなくなっていた
2021年8月30日(月) 8時49分10秒 | 155 viewLIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない
2021年10月16日(土) 14時22分50秒 | 90 viewWebの変更をLINEに通知する仕組みを提供するサービスをココナラに出品しました
2020年10月25日(日) 2時50分32秒 | 32 view3Diframe x model viewer starterkitを利用したときに右クリックでブラウザメニューが出るのを防止する
2021年1月15日(金) 13時58分32秒 | 30 view