はじめに
Astroで作ったWebサイトにOGP画像を設定したときのメモです。
OGP画像は画像ソースのURLに相対パスではなく絶対パスを指定する必要があったので、少し調べて設定しました。
手順
OGP画像配置
public フォルダにogp.png を配置しました。（faviconと同じ場所）
URL作成
レイアウト用のファイルに追記します。
まずはOGP画像用のURLを作成します。
const canonicalURL = new URL(Astro.url.pathname, '本番環境のWebサイトURL');
const ogpImageURL = new URL('/ogp.png', canonicalURL);
これで、本番環境のWebサイトURL/ogp.png にアクセスすると、OGP画像が表示されるようになります。
余談
ちなみに、公式ドキュメント には新しいURLの作成についてのサンプルコードが載っています。
// Example: Construct a canonical URL using your production domain
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
// Example: Construct a URL for SEO meta tags using your current domain
const socialImageURL = new URL('/images/preview.png', Astro.url);
Astro.site はローカル環境でundefined になってしまいエラーになるので、イケてないですがサイトのURLをべた書きしました。
new URL('/images/preview.png', Astro.url) を使うと、本番環境でローカル環境のURLが生成されてしまったので使いませんでした。
headタグに追加
上と同じレイアウト用のファイルに追記します。
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: https://ogp.me/ns#">
(略)
<meta property="og:image" content={ogpImageURL} />
(略)
</head>
<body>
<slot />
</body>
</html>
(略)
これでOGP画像を設定することができました！
設定確認は以下のサイトを使うと便利です。
参考文献