11ty で JavaScript を使わずにリダイレクト

このブログは 11ty で運用しています。

すべてを集約したい要望はないものの、他の媒体も含めて ポスト一覧 で時系列に並ぶと個人的にうれしいので対応しました。
下記が実現できればなんでもよかったので、HTML だけでリダイレクトしたいポストに対応する layouts を作成することにしました。

テンプレートの実装はシンプルです。

---
layout: layouts/post.njk
---

<head>
<link rel="canonical" href="{{ redirect.to | url }}" />
<meta http-equiv="refresh" content="0; url={{ redirect.to | url }}" />
<meta name="robots" content="noindex" />
</head>
<body>
<h2>Redirecting...</h2>
<a href="{{ redirect.to | url }}">Please click here if you are not redirected within a few seconds</a>
<body>

テンプレートを利用するときに redirect.to でリダイレクトしたい URL を渡すだけで、生成されたページにアクセスするとリダイレクトされるようになります。

---
title: Post title
tags:
- redirect
date: 2022-10-14 12:00:00
redirect:
to: https://example.com/target
layout: layouts/redirect.njk

---

参考

Redirections in HTTP
Eleventy Redirect From

以上。

← Blog