Qiitaとかである記事のタイトルなんかをOGPに入れ込んでシェアした段階でわかりやすくなるあれです
こんにちは、Qiita開発チームのharekuです。 以前、Qiitaではビジュアルアイデンティティの再定義を行いましたが、それに伴い、OGPイメージも新しくなりました。 新しいOGPイメージ 新しい...
blog.qiita.com
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
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"}
ついにURLのogp出力に対応した
2021年9月1日(水) 2時20分35秒 | 346 view私的Nuxt.jsでどのアーキテクチャを選ぶかフロー
2021年4月27日(火) 15時51分42秒 | 97 viewLIFF(LINE)ブラウザでwindow.prompt()が期待する動作をしない
2021年10月16日(土) 14時22分50秒 | 52 viewNCMBのスクリプト機能はGETでいいなと思ってもPOSTで設定しておこう
2021年3月6日(土) 18時29分49秒 | 28 viewncmbのREST APIでエラー{"error":"12.16.1 is invalid version","status":400,"code":"E400001"}が出る
2022年10月9日(日) 12時41分30秒 | 17 view