[Hugo] Front Matterの設定で新URLにリダイレクトするようにしてみた
Nプログラマ(@Nprog128)です。
Hugoで作ったブログの記事をときどきメンテしているのですが、ちょっとしたミスを発見してしまいました。。。
修正しようにもちょいちょい検索流入がある記事だったので、URLの変更は慎重に行いたいトコロです。
ということで、HugoのFront Matterでリダイレクトの設定を使ってみることにしました。
ドキュメントは こちらのURL のAliasesの項目に記載されています。
hugoの仕組みなので仕方がないのですが、front matterでリダイレクトをする場合はmeta refreshで転送されます。
ページの評価を引き継ぐには301リダイレクトを使う方法が推奨されてようなので、転送設定を行うには十分検討したほうがいいと思います。
> 参考: meta refreshタグを301リダイレクト代わりに使うのはダメ？ グーグルのえらい人が解説 など10+4記事 | 海外&国内SEO情報ウォッチ | Web担当者Forum
ページの評価なんて関係ねぇ！って感じなら、非推奨の方法でも問題ないと思います。
使い方
リダイレクトしたい記事の冒頭に記述しているFront Matterの中で、aliasesという設定を記述することでリダイレクトさせることができます。 aliasesの中に書くのは古いURLです。
また、aliasesは配列で定義するので、古いURLを複数指定することもできます。
新しいURLはファイル名、url、slugなどで定義する必要があるので、忘れずに設定しましょう。
記述方法は以下の3つです。
- Yaml
- Toml
- JSON
Yamlでの記述
自分はYamlを使っているので、まずYamlの記述方法から。
1---
2# コメント: 色々と設定があると思いますが、とりあえずtitleだけ記載しておきます
3title: "記事のタイトル"
4
5# ここからAliasesの記述
6aliases:
7 - /posts/sample-old-url-01/
8 - /posts/sample-old-url-02/
9---
Tomlでの記述
tomlだとこんな感じになります。
1+++
2title = "新しいURL"
3aliases = [
4 "/posts/sample-old-url-01/",
5 "/posts/sample-old-url-02/"
6]
7+++
JSONでの記述
そしてjsonではこんな感じになります。
1{
2 "title": "新しいURL",
3 "aliases": [
4 "/posts/sample-old-url-01/",
5 "/posts/sample-old-url-02/"
6 ]
7}
サンプルでやってみる
それではサンプルを使ってリダイレクトの設定をしていきます。
リダイレクト前のサンプルファイルを準備する
まずはリダイレクトする前の状態のファイルを準備します。
Front Matter内の記述はyamlで書き、公開後のurlはファイル名で指定するようにしました（slugやurlでも変更可能です）
sample-old-url.md コードを開く
1---
2titie: リダイレクトのサンプル記事
3---
4リダイレクト前に公開している記事です。
このファイルをHugoプロジェクトのcontentディレクトリ配下に配置します。
1> tree content/ (git)-[master]
2content/
3└── posts
4 └── sample-old-url.md
この状態で実際に公開されるURLは独自ドメイン/posts/sample-old-url/となります。
これでリダイレクト前のサンプルファイルの準備は完了です。
サンプルを書き換えてリダイレクト設定をしてみる
先程準備したファイルを使って、Front Matter内にリダイレクトの設定を書いていきます。
新しいリダイレクト先のurlはsample-new-urlとします。
aliasesを使い、古いURL（リダイレクト前）のURLを指定します。
URLの独自ドメインを除いた部分（/posts/sample-old-url/）なので、これをaliasesに書くと以下のようになります。
sample-old-url.md コードを開く
1---
2title: "リダイレクトのサンプル記事"
3aliases:
4 - /posts/sample-old-url/
5---
次に新しいURLを設定します。
今回はURLをファイル名で指定しているので、ファイル名をsample-new-url.mdに変更すればオッケーです。
変更後のファイルはこのようになります。
sample-new-url.md コードを開く
1---
2title: "リダイレクトのサンプル記事"
3aliases:
4 - /posts/sample-old-url/
5---
これでリダイレクトの設定は終わりです。
リダクレイトの確認をしてみる
ではきちんとリダイレクトができているかを確認してみます。
新旧のURLは表にするとこんな感じでした。
| 項目 | URL |
|---|---|
| 新しい方 | 独自ドメイン/posts/sample-new-url/ |
| 古い方 | 独自ドメイン/posts/sample-old-url/ |
リダイレクトを確認するためには古い方のURLにアクセスして、それが新しいURLに自動的に遷移するのを確認すればオッケーです。
ブラウザのアドレスバーに古いURLをコピペしてアクセスしてみましょう。
一瞬だけリダイレクト用のページが表示されて、次に新しいURLに遷移するはずです。
これでリダイレクトの確認ができました。
おまけ: リダイレクト用ページはどうなっているのか？
先程リダイレクトできることは確認できましたが、実際にページはどのようなファイルが出力されているのでしょうか？
> Aliases How Hugo Aliases Work
詳しい説明はドキュメントで確認していただくということで、実際に出力されているファイルの場所と中身を見てみましょう。
hugoコマンドでビルドすると、通常はpublicディレクトリにファイルが出力されています。
サンプルで作ったページのリダイレクト対応後のURLは独自ドメイン/posts/smaple-new-url/なので、hudoのプロジェクト/public/posts/sample-new-url/index.htmlで出力されています。
treeコマンドで確認 コードを開く
1# treeコマンドでposts配下を出力
2> tree ./posts
3# 出力された結果
4./posts
5
6├── index.html
7├── index.xml
8├── page
9│ └── 1
10│ └── index.html
11├── sample-new-url
12│ └── index.html
13└── sample-old-url
14 └── index.html
古いURL（sample-old-url）と新しいURL（sample-new-url）が出力されていることを確認できました。
古いURLのファイルの中身を見てみる
ではリダイレクトする古いURLのindex.htmlを中身を確認してみます。
index.html コードを開く
1<!DOCTYPE html>
2<html>
3
4<head>
5 <title>http://example.org/posts/sample-new-url/</title>
6 <link rel="canonical" href="http://example.org/posts/sample-new-url/" />
7 <meta name="robots" content="noindex">
8 <meta charset="utf-8" />
9 <meta http-equiv="refresh" content="0; url=http://example.org/posts/sample-new-url/" />
10</head>
11
12</html>
サンプルとしてconfigのbaseURLでhttp://example.orgを指定しているため、出力された独自ドメインの部分がelxample.orgとなっています。
出力されているファイルは改行無しの状態だったので、見やすいようにインデントしてあります。
あんまり仕組みが理解できていませんが、metaタグのrefreshで指定したURLに飛ばしていますね。
クローラーに対してはnoindexを伝えて、URLの正規化のためにlinkタグ内でcanonical属性を指定している、だと思います（汗）
自動で生成されるため何か文言の変更ができないかな？とドキュメントを眺めてみると、ドキュメントによるとリダイレクト用のページもカスタマイズできるっぽいです（ミスリードでなければ！）
出力されているファイルを真似て書いて、body部を書いてあげれば文言を変更できそうですね。
おわりに
今回は、HugoのFront Matterで新URLにリダイレクトするようにしてみた、という内容でした。
冒頭の参考リンクにもある通り、転送設定をするには301リダイレクトが推奨されているようです。
しかし、方法が限られている場合はmeta refreshで行くしかないかな、という感じでした。
SEOで言われているページの評価を引き継ぐという目的が無いのであれば、サッと転送設定をしておけばいいと思います。
今回はURLのスペルミスを直したい、というものだったので公開するURLはよくよく確認しないといけないといけませんね。
Hugoでやる場合も.htaccessが使える環境であれば301リダイレクトが出来ますが、個別の記事に差し込むにはビルド時のみ差し込むような仕組みを作る必要があるかな？と思っています。
こちらも気が向いたらサンプルでも作ってみようと思います。
それでは、このへんで。
バイナリー！
