EmDashへ移した日本語タグのページが404になる時の直し方

WordPressからEmDashへ移すと、日本語のタグのページ（/tag/%e7%a7%bb%e8%a1%8c/など）が404になります。WordPressは日本語のスラッグをエンコードした文字列で保存しており、EmDashにもそのまま入るためです。タグページのテンプレートで、保存されているスラッグもデコードしてから比べるように直せば、WordPressと同じURLで表示できます。

確かめたのはEmDash 1.3.1のブログテンプレートです。

404になる理由

WordPressで「移行」というタグを作ると、スラッグは%e7%a7%bb%e8%a1%8cという文字列で保存されます。WXRを取り込むと、EmDashにもこの文字列がそのまま入ります。

一方、テンプレートのタグページは、URLの%e7%a7%bb%e8%a1%8cをdecodeSlug()で「移行」に戻してから探します。保存されているのは%e7%a7%bb%e8%a1%8cなので一致せず、404になります。

カテゴリのスラッグを英数字にしていれば、カテゴリページは影響を受けません。日本語のスラッグになりやすいのはタグで、試したサイトでは、記事ページにあるタグページへのリンクが、URLの種類で数えて77件404になりました。

保存されているスラッグもデコードして比べる

src/pages/tag/[slug].astroでタグを探している1行を、次のように直します。

// 修正前
const term = slug ? termsResult.data.find((item) => item.slug === slug) : null;

// 修正後
const safeDecode = (s: string) => {
	try {
		return decodeURIComponent(s);
	} catch {
		return s;
	}
};
const term = slug
	? termsResult.data.find((item) => item.slug === slug || safeDecode(item.slug) === slug)
	: null;

decodeURIComponent()は、%のあとに正しくない文字が続くとエラーを投げるので、失敗した時は元の文字列で比べます。英数字のスラッグは、デコードしても同じ文字列のままです。カテゴリページ（src/pages/category/[slug].astro）にも同じ行があるので、同じように直しておきます。

保存されているスラッグはそのまま残す

直すのはテンプレートの照合だけにして、保存されているスラッグは書き換えません。テンプレートは保存されているスラッグからタグのリンクを作るので、スラッグをそのまま残しておけば、タグページのURLはWordPressで公開していた/tag/%e7%a7%bb%e8%a1%8c/と同じ文字列になります。直した後、試したサイトの日本語タグのページが、WordPressと同じURLで200を返すことを確かめました。