OGP メタタグを追加して、リンクされる際にリンクカードでタイトルや画像が表示されるようにします。

Launching My New Blog with AI and Astro - Groovy Life

AIとAstroを使って新しいブログを立ち上げました

https://groovylife.net/blog/2026-01-17-launching-my-new-blog-with-ai-and-astro/

それには Layout.astro で記事情報からメタタグを生成するようにします。

// src/layouts/Layout.astro

---
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';

interface Props {
	title?: string;
	description?: string;
	image?: string;
}

const { title: pageTitle, description = SITE_DESCRIPTION, image } = Astro.props;

const title = pageTitle ? `${pageTitle} - ${SITE_TITLE}` : SITE_TITLE;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const ogImageURL = image ? new URL(image, Astro.site).href : undefined;
---

// 中略

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{ogImageURL && <meta property="og:image" content={ogImageURL} />}

<!-- Twitter -->
<meta
	property="twitter:card"
	content={ogImageURL ? 'summary_large_image' : 'summary'}
/>
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
{ogImageURL && <meta property="twitter:image" content={ogImageURL} />}

// src/pages/blog/[...slug].astro

<Layout
	title={post.data.title}
	description={post.data.description}
	image={post.data.heroImage}
>

画像にも記事タイトルを入れる方法もあるようなのですが、オフラインで生成するとリポジトリーが太ってしまいますし、ファイル数も増えてしまいます。ビルド時生成も記事が増えるごとに生成時間が積み重なってしまいます。動的生成して CDN でキャッシュすることも考えましたが、Cloudflare で WASM を使うのが面倒だったのと、リンクカードにしたら文字が小さくなったり、結局横にタイトルが並ぶのであれば冗長になってしまうということで、記事のヒーロー画像（メインビジュアル）をそのまま流用することにしました。