以前書いたsatori/sharp/satori-htmlでOG画像生成を使ってたら、 やたらsatori-htmlの処理に時間がかかるので、 いろいろ調べてみたときの備忘録(*´ω｀*) unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。 使ってるのは前回と同じ…

Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それ…

開発中のSSSAPI、ヘルプとかは@nuxt/contentで作ってるけど、 やっぱOGP画像もつけたいな〜と思ったので、いろいろ調べてみたときの備忘録。 www.memory-lovers.blog Cloudinaryが速いし、文字入れれるし、キャッシュしてくれるらしいので採用。 cloudinary.…

開発しているWebサービスでかかった費用を見ていると、 シェア用のOGP画像の保存量が結構占めていた。。(882円中の492円分で55%) www.memory-lovers.blog ランニングコストを減らしたいなと思っていたら、節約術があったので試してみた。 ・Nowのエッジキャ…

Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、 いろいろ試してみたときの備忘録。 OGP画像の生成はクライアント側とサーバ側かがあるが、 Firestoreの変更に合わせて生成したいので、 Cloud Function上で利用できる方法を考えてた。 結果的に…

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。 SVGはまるのも多いけど、いろいろできるので、 SVGからOGP画像をつくるのいいかもしれない。 とりあえず、SVGを書いてみる ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。 動作確認と…

リリースした新しいWebサービス「トランスノート]を公開するときに、 まじめにSEO関連を調べてみたので、その時の備忘録。 やらなきゃいけなことがたくさんあった。。 metaタグといっても、いろいろある。 検索関連の基本的な設定 ファビコンやiPhoneやAndro…