SvelteKit を使ったサイトで静的な OGP 画像を設定しようとしたら思ったより苦労した話

この記事の概要

個人開発でサイトを作った¹のですが、その際 OGP 画像を設定するのに思ったより苦労しました。

以下のリンクカードに出ている画像が実際に設定したものです。

最終的に解消した方法と、試したけどダメだった方法を備忘録がてら記事にします。

環境

SvelteKit (v2.0.0) を使い、Cloudflare Pages で公開しています。

作った内容

1 種類の画像をサイトのどのページでも使う、静的な OGP 画像の設定。

作らなかった内容

ページタイトルごとにテキストが変わるなどの、動的な OGP 画像の設定。

最終的に解消した方法

• static ディレクトリに画像を配置する
  • ここに置かれたファイルは https://{ホスト名}/{ファイル名} で配信される
• $app/stores からページデータを読み取れる page を import する
• page.url.origin で、サイトのオリジンを取得する
• 文字列を結合させて OGP 画像の完全な URL を生成する
• routes 直下の +layout.svelte の中の <svelte:head> の中で OGP 画像を設定する

上記をコードにすると次のようになります（コメントでいただいた内容を反映しました）。

src/routes/+layout.svelte

<script>
  import { page } from '$app/stores';
</script>

<svelte:head>
  <meta property="og:image" content="{$page.url.origin}/og-image.jpg" />
</svelte:head>

参考情報:

• Modules - $app/stores | SvelteKit
• Types - Public types - Page | SvelteKit
• 備忘録:SvelteKitで今いるURLを取得する | Qiita

試したけどダメだった方法

%sveltekit.assets% を使う

create svelte のコマンドで生成された app.html では、ファビコンが次のようにして呼ばれていました。

src/app.html

<link rel="icon" href="%sveltekit.assets%/favicon.png" />

%sveltekit.assets% というのはアセットディレクトリへのパスです。
そのため、これを使って次のようにコードを書いてみましたが、失敗しました。

src/app.html

<meta property="og:image" content="%sveltekit.assets%/og-image.jpg" />

%sveltekit.assets% が展開された後のコードとして、ファビコンと OGP 画像とでは以下のような違いが生まれました。

src/app.html

<link rel="icon" href="http://localhost:5173/favicon.png" />
<meta property="og:image" content="./og-image.jpg" />

OGP 画像は相対パスではなく、ちゃんとした URL で指定しないといけません。
そのためこの方法は諦めました。

参考情報:

• Project structure - Project files - src | SvelteKit

URL コンストラクタと import.meta.url を組み合わせて使う

その後、次のようなコードを書きました。

src/routes/+layout.svelte

<script>
  import { base } from '$app/paths';
  const imgUrl = new URL(`${base}/og-image.jpg`, import.meta.url).href;
</script>

<svelte:head>
  <meta property="og:image" content={imgUrl} />
</svelte:head>

これは開発環境では上手く動いたのですが、デプロイしたら 500 エラーを吐いてしまいました。
デプロイ先が Cloudflare Pages（というか静的なホスティング環境）だったからだと思われます。

参考情報:

• Where to put images with SvelteKit | Stack Overflow
• URL - Web API | MDN
• import.meta - JavaScript | MDN
• Modules - $app/paths | SvelteKit

最後に

こんな具合で紆余曲折あった後、最初に書いた $app/stores を用いる方法で期待通りに動きました。
まったく難しいことでは無いはずで、10 分もあれば完成するかと思っていたのに、やたらと時間をかけてしまいました。

これがベストなやり方なのか正直自信はありませんが、ひとまずちゃんと動いているので記事にしています。
調べても全然出てこなかったので、どなたかのお役に立てれば幸いです。

1. 文字数カウントやルーレットなど、ちょっとしたツールをまとめたサイトです。記事の本筋にはまったく関係ありませんが、触ってみてもらえたら嬉しいです。 ↩