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"}
PCからGoogleホームアプリを使いたい
2022年9月12日(月) 7時53分11秒 | 4380 viewPowershellのgitではpushできるのにVSCodeのgit(GUI)ではpushできない問題
2021年11月25日(木) 2時30分15秒 | 1904 viewvue-scrolltoとv-b-scrollspyが共存したらかっこよかった
2021年12月1日(水) 16時37分57秒 | 184 view次はURLのogp出力に挑戦
2020年10月30日(金) 16時52分19秒 | 79 view埋め込み要素(iframe / embed)をいい加減対応させたい
2021年6月9日(水) 1時2分54秒 | 54 view