ハマる

ogp画像を動的に導入できるとのことで、試しに導入してみました。その過程で、いくつか失敗したことがあったので、戒めとしてメモします。テンプレートから画像をつくるやり方やスクリーンショットで画像をつくるやり方があるそうなんですが、スクリーンショットから作るやり方は何度やっても失敗するので、諦めることに。テンプレートから画像をつくるやり方で試してみました。設定は下記を参考にしながら行います。

Install Nuxt OG Image · Nuxt SEO

Get started with Nuxt OG Image by installing the dependency …

Nuxt SEO

テンプレートから画像をつくるやり方は、componentsにogImageというフォルダを作り、そこにvueファイルを設置して、タグベースのテンプレートを画像化するというもの。HTMLとCSSでデザインして、それが画像になって生成されるので、一つのテンプレートを使って、ページ毎に文字情報だけを入れ替えていく感じです。CSSは普通のものも使えるのですが、基本はTailwindCSSが設定されていて、それを使ってデザインしていきます。で、ハマったのが誤った(壊れた)TailwindCSSの書き方をしていて、気づかずにレンダリングエラーが出てしまったことでした。

thread '<unnamed>' panicked at C:\Users\runneradmin\.cargo\git\checkouts\resvg-4b7e4ee32ad6d954\3495d87\crates\resvg\src\geom.rs:27:61:
called `Option::unwrap()` on a `None` value
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace

ERROR  [unhandledRejection] read ECONNRESET
at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

まさかCSSの書き方が間違っているなんて思わないもので、見当違いのところばかり探す羽目になり、時間をロスしたのでした。

devtoolの画面を見ながら、文字の色や背景を変えたり、文字情報を変えたりと、リアルタイムで調整できるのはスゴイ便利です。当然、そのままで、書き出されると思うのですが、落とし穴がありました。書き出した画像がなぜか古いんです。キャッシュなんてあるんだろうかと探してみると、あるんです。

Caching Images · Nuxt SEO

Getting to know how the Caching works with Nuxt OG Image.

Nuxt SEO

nuxt.config.tsにruntimeCacheStorageかcacheMaxAgeSecondsを設定することで、解消されました。

ogImage: {
 runtimeCacheStorage: false,
 defaults: {
  cacheMaxAgeSeconds: 0,
 }
}

SSGで使っていたので、キャッシュなんて考えていなかったのですが、SSRなら確かに必要そう。リアルタイムの数字を掲載することもできるので、SSRでつくるのも面白そうだなと思いました。