日記です

Twitter(Xとは呼ばない)でシェアしたときに記事のタイトルが大きく表示されたらわかりやすいなと思い実装しました。

https://astro.gdgd.tokyo

基本はぐだぐだマンさんの通りです。圧倒的感謝…！

Vercelでデプロイするにはプラスで作業が必要だったので備忘録も兼ねてメモします。

sharpのバージョンを変更する

何故かvercelで最新のsharpを読み込むとエラーが起きるみたいです。

npm uninstall sharp で削除、 npm install sharp@0.32.6 で古いバージョンに変更すると動くようになります。

Vercel only: 0.33.0: error Could not load the “sharp” module using the linux-x64 runtime · Issue #3870 · lovell/sharp

Possible bug Is this a possible bug in a feature of sharp, unrelated to installation? Running npm install sharp completes without error. Running node -e “require(‘sharp’)” completes without error.…

https://github.com

OGP画像を静的に生成する

Satoriは各記事のタイトルを取得して動的にOGP画像を生成します。
記事は静的(デプロイ時にposts/[slug/index.htmlとして生成)です。

静的なページに動的な画像は表示できないのでOGP画像も静的(StaticAssets)にする必要があります。

↑この理解ですが、合っているか自信ありません 💦
とりあえずOGP画像をStaticAssetsにします。

▽対応方法はこちらの記事を参考にしました。

Satori + SvelteKit で OGP 画像を自動生成する

Satori とは Vercel が公開している OGP 画像生成ライブラリです。OGP 画像を表示したい場合、記事ごとに対応する OGP 画像が必要になるわけで、新しい記事を投稿するたびに新たな画像を生成しなければいけません。都度画像を生成する手間は取れないわけで、このOGP 画像を生成する工程を自動化する仕組みが必要となります。Satori は記事のタイトルなどをもとに動的 OGP 画像を生成するユースケースのために使用できます。

https://azukiazusa.dev

src/pages/og/[slug].png.tsを編集する

import { getOgImage }～の下に import type { RequestHandler } from '@sveltejs/kit’

を追加、export async function getStaticPaths() ～の上に export const prerender = true を追加します。

src/pages/posts/[slug].astroを編集する

OGP画像を表示しているページにリンクを追加します。
自分は個別ページにのみ載せているのでsrc/pages/posts/[slug].astroのみ編集します。

<img src={'/og/' + ${post.Slug} + '.png'}～の上に <a href={'/og/' + ${post.Slug} + '.png'} /> を追加します。これで本番URLでもOGP画像が見えるはず！

完成！

きゃわ… 💕
OgImage.tsxもいじってサイトの雰囲気に馴染むようにしてみました。
グラデーションがくどい気もしますが個人サイトだから己の好みを優先します。

ちゃんとシェアしたときもでる！！