2025/04/27 2025/04/27

Astroでogimageを設定するならフロントマターを使う

Astroフレームワークでogimage画像をpublicフォルダ以外から取得するのに手間取った。この記事では、md(x)ファイルのフロントマターで指定した画像と同じものを、ogimageに指定する方法を解説する。

publicフォルダ以外にある画像というのは、./src/content/blog/post/thumbnail.jpgを想定している。

プラグインを用いれば何とかなるが、使いたくなかった。コンテンツコレクションと画像で説明されているように、md(x)ファイルのフロントマターで指定したサムネイル画像と同じものを、ogimageで指定したかった。
わざわざ新しい画像を生成するのも、publicフォルダにそのまま画像を入れるのも避けたかったんだ。

しかし、開発環境と本番環境でImageMetadata¹のsrcプロパティの値が異なったため手間取った。

【結論】プラグインなしでogimageを設定するコード

1
<meta property="og:image" content={new URL(Astro.props.image.src, Astro.site).href} />

することは以下の3つ。

md(x)ファイルのフロントマターでサムネイル画像への相対パスを指定する
コンテンツコレクションスキーマで画像用のフロントマターを定義する
ogimageのパスをnew URL()でつくって設定する

関連するのはastro・config.ts・md(x)・画像ファイルの4つ。

1
src
2
├─components
3
│      ogImage.astro
4
│
5
└─content
6
    │  config.ts
7
    │
8
    └─blog
9
        └─post
10
                index.mdx
11
                thumbnail.jpg

作業フォルダの構造

1
---
2
thumbnail: "./thumbnail.jpg"
3
---
4

5
## 記事がつづく

md(x)ファイルのフロントマターで画像への相対パスを指定するコード

1
import { defineCollection, z } from "astro:content";
2

3
const blogCollection = defineCollection({
4
  schema: ({ image }) =>
5
    z.object({
6
      thumbnail: image(),
7
    }),
8
});
9

10
export const collections = {
11
  blog: blogCollection,
12
};

コンテンツコレクションスキーマで画像用のフロントマターを定義する

1
---
2
import type { ImageMetadata } from "astro";
3

4
interface Props {
5
  image: ImageMetadata;
6
}
7

8
const { image } = Astro.props;
9
const ogImagePath = new URL(image.src, Astro.site).href;
10
---
11

12
<meta property="og:image" content={ogImagePath} />

ogimageのパスをつくって設定するコード

9行目でパスをつくっている。

Astro.siteにhttps://{ホスト名}、image.srcに_astro/thumbnail.{ハッシュ値}.jpgといった文字列がある。

new URL(…).hrefでそれぞれの文字列をつなげたURLの値を取得している。以下のように出力される。

1
<!-- 開発環境で出力されるコード -->
2
<meta
3
  property="og:image"
4
  content="https://playlogic.pages.dev/@fs/C:/Users/…/src/content/blog/post/thumbnail.jpg?origWidth=960&amp;origHeight=480&amp;origFormat=jpg"
5
/>
6

7
<!-- 本番環境で出力されるコード -->
8
<meta
9
  property="og:image"
10
  content="https://playlogic.pages.dev/_astro/thumbnail.BtEdEmGp.jpg"
11
/>

開発環境と本番環境で出力されるコードの違い

ビルド時の画像ファイルの扱い

npm run buildすると./dist/フォルダにファイルがビルドされる。

そのとき、./public/にあるファイルと、./src/にあるファイルで処理が異なる。

./public/にある画像ファイルは、./dist/フォルダの直下に出力される。

./public/とは異なり、./src/にある画像ファイルは最適化されて./dist/_astro/に出力される。

まとめ

npm run buildでビルドしたあと、./dist/_astro/にcssやjs、画像ファイルが生成されると知っていたら、手間取らなかったかもしれない。ImageMetadata.srcが、本番環境で_astro/下の画像ファイルパスを持つと気づけてよかった。

Astro.siteを使うには、astro.config.mjsでsiteを指定しておく必要がある。

1
import { defineConfig } from "astro/config";
2

3
export default defineConfig({
4
  site: "https://{本番環境のホスト名}",
5
});

脚注

ImageMetadataは、画像をAstroファイルで直接importしたときの型。 ↩