Astro × microCMS で OGP・サイトマップ・画像の WebP 化を設定する

interface Props {
	/** 未指定ならサイト名のみ */
	title?: string;
	description?: string;
	/** OGP画像の絶対URL */
	image?: string;
	type?: 'website' | 'article';
	publishedTime?: string;
	modifiedTime?: string;
}

const {
	title,
	description = SITE_DESCRIPTION,
	image,
	type = 'website',
	publishedTime,
	modifiedTime,
} = Astro.props;

const pageTitle = title ? `${title} | ${SITE_NAME}` : SITE_NAME;
const canonical = new URL(Astro.url.pathname, Astro.site);

<title>{pageTitle}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonical} />

<meta property="og:site_name" content={SITE_NAME} />
<meta property="og:type" content={type} />
<meta property="og:title" content={title ?? SITE_NAME} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta property="og:locale" content="ja_JP" />
{image && <meta property="og:image" content={image} />}
{publishedTime && <meta property="article:published_time" content={publishedTime} />}
{modifiedTime && <meta property="article:modified_time" content={modifiedTime} />}
<meta name="twitter:card" content={image ? 'summary_large_image' : 'summary'} />

<BaseLayout
	title={blog.title}
	description={description}
	image={blog.eyecatch && imageUrl(blog.eyecatch.url, { width: 1200, height: 630, format: 'jpg' })}
	type="article"
	publishedTime={publishedAt}
	modifiedTime={revisedAt}
>

export type Blog = MicroCMSListContent & {
	title: string;
	/** リッチエディタのHTML */
	content: string;
	/** meta description 用。未入力なら本文の冒頭から自動生成する */
	description?: string;
	eyecatch?: MicroCMSImage;
	category?: Category | null;
	/** 広告・アフィリエイトを含む記事なら true（PR表記を出す） */
	pr?: boolean;
};

const SUMMARY_FIELDS = [
	'id',
	'title',
	'description',
	'eyecatch',
	'category',
	'pr',
	// …省略（createdAt などの日時）
];

/** 本文HTMLから meta description 用の抜粋を作る（コードブロックは除外） */
export function toExcerpt(html: string, length = 120): string {
	const $ = cheerio.load(html, null, false);
	$('pre').remove();
	const text = $.text().replace(/\s+/g, ' ').trim();
	return text.length > length ? `${text.slice(0, length)}…` : text;
}

const description = blog.description || toExcerpt(blog.content);

import { defineConfig, envField } from 'astro/config';
import sitemap from '@astrojs/sitemap';

// https://astro.build/config
export default defineConfig({
	site: 'https://cyber-blow.com',
	// canonical・サイトマップ・内部リンクのURL表記を「/」終わりに統一する
	trailingSlash: 'always',
	integrations: [sitemap()],
	// …省略（env の設定）
});

User-agent: *
Allow: /

Sitemap: https://cyber-blow.com/sitemap-index.xml

<link rel="sitemap" href="/sitemap-index.xml" />

type ImageOptions = {
	width: number;
	/** 指定すると width × height にトリミングする */
	height?: number;
	format?: 'webp' | 'jpg' | 'png';
};

/**
 * microCMS の画像API（imgix互換）でフォーマット・サイズを指定したURLを返す。
 * height 未指定時は fit=max なので、元画像より大きく引き伸ばされることはない。
 */
export function imageUrl(src: string, { width, height, format = 'webp' }: ImageOptions): string {
	const url = new URL(src);
	url.searchParams.set('fm', format);
	url.searchParams.set('w', String(width));
	if (height) {
		url.searchParams.set('h', String(height));
		url.searchParams.set('fit', 'crop');
	} else {
		url.searchParams.set('fit', 'max');
	}
	return url.toString();
}

<img
	class="card-image"
	src={imageUrl(post.eyecatch.url, { width: 640, height: 360 })}
	alt=""
	width="640"
	height="360"
	loading="lazy"
	decoding="async"
/>

const MICROCMS_IMAGE_HOST = 'images.microcms-assets.io';

// …省略（コードブロックのハイライト）

	$('img').each((_, el) => {
		const $img = $(el);
		$img.attr({ loading: 'lazy', decoding: 'async' });

		const src = $img.attr('src');
		if (!src || !isOptimizableImage(src)) return;
		$img.attr({
			src: imageUrl(src, { width: 800 }),
			srcset: `${imageUrl(src, { width: 800 })} 800w, ${imageUrl(src, { width: 1600 })} 1600w`,
			sizes: '(min-width: 800px) 760px, 100vw',
		});
	});

// GIF（アニメーションが消える）と SVG は変換しない
function isOptimizableImage(src: string): boolean {
	const url = URL.parse(src);
	return url?.hostname === MICROCMS_IMAGE_HOST && !/\.(gif|svg)$/i.test(url.pathname);
}

<img
	class="post-eyecatch"
	src={imageUrl(blog.eyecatch.url, { width: 1520 })}
	alt=""
	width={blog.eyecatch.width}
	height={blog.eyecatch.height}
	fetchpriority="high"
/>

{blog.pr && <p class="pr-notice">本記事にはプロモーション（広告）が含まれています。</p>}