URLが空白を含むときは「スペース」と「%20」、「+」のどれを使うべきか?

[レベル: 中〜上級]

URLにスペース(空白)が含まれる場合、そのスペースはどのように表現したらいいいのでしょうか?

URL中の「スペース」と「%20」、「+」はどれを使っても同じか?

SEOフォーラムに投稿されたこんな質問を引用して、GoogleのJohn Mueller(ジョン・ミューラー)氏がGoogle+で回答を投稿しています。

Should you encode spaces in URLs as “%20”, “+” or as a space (” “)?

(the answer is not “no” :-)) I run into this question every now and then, maybe this will help someone get it right too :). 

TL;DR: use “+” or “%20” in the query-string, use “%20” within the rest of the URL.

クエリストリングには「+」か「%20」、それ以外は「%20」

簡潔に言えば、クエリストリング(クエリ文字列)に含まれるスペースには「+」または「%20」を用います。
クエリストリング以外でスペースが含まれるそのほかのURLには、「%20」を用います。

クエリストリングには「+」または「%20」

たとえばでGoogleで「ipad air」を検索します(「ipad」と「air」の間にはスペースが入っている)。
検索結果のURLは(もっともシンプルな形だと)次のようになります。

https://www.google.co.jp/search?q=ipad+air

このように、クエリパラメータ「q」のクエリストリングとしての「ipad」と「mini」を繋ぐために、2語の間にあるスペースには「+」を用いることができます。
もしくは「%20」も使用可能です。

クエリストリング以外の通常のURLには「%20」

一方で、通常のURLに含まれるスペースを表すときには「+」を用いることはできません。

https://example.com/ipad air.html

上のようなURLを使いたかったとします(ipad air.html にはスペースが含まれている)。
スペースをそのまま用いることはできません。
おそらく、大半のシステムでは途中で切れて https://example.com/ipad として認識されそうです(自動処理してくれるシステムもある)。

ところがクエリストリングとは違って、「+」を使うことができません。
よって次のように表します。

https://example.com/ipad%20air.html

「ipad」と「air」の間にあるスペースを「%20」で表します。
なお「%20」はスペースをエンコードしたものです。

例では、スペースが含まれているのはファイルですがディレクトリでも同様に「%20」を用います。

https://example.com/apple tablet/ipad2.html は次のようになります。

https://example.com/apple%20tablet/ipad2.html

ミューラー氏によれば、URL中のスペースをどのように扱うべきかはときどき尋ねられる質問なのだそうです。

一般的なCMSなら、URLにスペースが入っていれば自動的に適切に処理してくれるはずです。
ですが、URLが入ったURLを手動で設定したりHTMLコードに記述する場合は注意が必要です。
ブラウザやGooglebotに適切に認識されずに、404を返してしまうかもしれません。

もっとも、URLにはスペースを用いないほうが安全じゃないかと僕は個人的に思います。
それに、一般ユーザーにとって意味不明の「%20」が入ったURLは美しくないように感じます。
ミューラー氏の投稿にも、遠回しに、使わないほうがいいというニュアンスが含まれています。