「恥ずかしながら特に気にしていなかったのですが」

2018年7月、私は自分のブログにこう書いています。Chromeが「httpのままのサイトには警告を出す」というニュースをメールマガジンなどで何度も見かけるようになり、慌ててサイトをhttpsに切り替えたときの備忘録です。

いまでは、アドレスバーに鍵のマークが出るhttpsのサイトが当たり前になりました。それでも、古いホームページを引き継いだときや、長く放置していたサイトを見直すときには、今でもhttpのままのページに出会うことがあります。

今回は、当時の私の記録を読み返して、httpsへの切り替えで「どこでつまずいたか」を6つにまとめました。これから切り替える方の参考になればと思います。

そもそも、httpsにすると何が変わるの？

httpsは、ホームページを見る人のブラウザとサーバーの間のやり取りを暗号化する仕組みです。この暗号化に使う証明書を「SSL証明書」と呼ぶので、httpsへの切り替えを「SSL化」と言うこともあります。

httpのままだと、Chromeなどのブラウザでアドレスバーに「保護されていない通信」と表示されます。お店や会社のホームページでこれが出ていると、見た人は少し不安になりますよね。問い合わせフォームで名前やメールアドレスを送ってもらうなら、なおさらです。

難しそうに聞こえますが、今はレンタルサーバーの多くが無料のSSLを用意しています。私が2018年に作業したエックスサーバーもロリポップも、管理画面から無料でSSLを設定できました。切り替えそのものより、切り替えた「あと」の後始末のほうが手間がかかる、というのが私の実感です。

1. 作業の前に、データベースとファイルのバックアップを取る

当時の記事でも、最初に書いたのがこれでした。

httpsへの切り替えでは、WordPressの設定を変えたり、記事の中のURLをまとめて書き換えたりします。途中で失敗すると、管理画面に入れなくなることもあります。データベースとファイルの両方を、作業前に必ず残しておきましょう。

一括置換は、一度実行すると元に戻すのが大変です。バックアップがあれば「最悪、元に戻せる」と思えるので、落ち着いて作業できます。

2. 「サーバーでSSLを有効にする」→「httpsで表示されるのを確かめる」→「WordPressの設定を変える」の順番を守る

順番を間違えると、サイトが表示されなくなることがあります。私が守った順番はこうです。

• レンタルサーバーの管理画面で、ドメインに無料SSLを設定する
• しばらく待ってから、ブラウザで https:// を付けたURLを開き、ページが表示されることを確かめる
• WordPressの「設定」＞「一般」で、WordPressアドレスとサイトアドレスの http を https に変えて保存する

SSLの設定は、申し込んでからすぐには反映されないことがあります。ロリポップのときも、設定してから「しばらくすると」保護されたドメインの一覧に表示される、という流れでした。httpsで開けることを確かめる前にWordPressの設定を変えない。これだけで、大きな失敗はかなり防げます。

3. 記事の中に残った「http://」のURLを置き換える

WordPressの設定を変えても、過去の記事の中に書いた画像や内部リンクのURLは http:// のままです。これを https:// に置き換える必要があります。

私は「Search Regex」というプラグインで置換しました。ところが、ここで大きくつまずきます。参考にしたサイトでは置換の対象が3000件ほどだったのに、私のブログは対象が1万件を超えていて、一括の置換がうまく動きませんでした。結局、件数を区切ったり並び順を変えたりしながら、何回にも分けて置換することになりました。

記事数が多いブログほど、この作業は重くなります。まとめて置換できない場合は、少しずつ分けて実行すると進められます。いずれにしても、置換の前にバックアップを取っておくことが前提です。

4. 鍵マークが出ないときは「httpのまま読み込んでいるもの」を探す

httpsで表示できたのに、アドレスバーの鍵マークが出なかったり、警告が出たりすることがあります。これは、ページの中にhttpのまま読み込んでいる画像やファイルが混ざっているためで、「混在コンテンツ」と呼ばれます。

私の場合、原因は2つありました。

• アフィリエイト広告の画像：広告のタグに入っていた画像のURLがhttpのままで、一つずつ直しました
• jQueryの読み込み：テーマで読み込んでいたjQueryのURLがhttpのままで、スクリプトが動かなくなりました。読み込み先のURLをhttpsに書き換えて解決しました

記事の本文だけでなく、テーマのファイル、ウィジェット、広告のタグにもhttpのURLが隠れています。ChromeならページのURLの左側にあるアイコンや、デベロッパーツールの「Console」に、どのファイルが原因かが表示されるので、そこから探すと早いです。

5. httpで来た人をhttpsへ301リダイレクトする

古いURL（http）でブックマークしている人や、他のサイトから張られたリンクもあります。これを放っておくと、httpのページが表示されたままになったり、同じ内容のページが2つあるように見えたりします。

当時の私は、.htaccess に301リダイレクトの設定を書き足して、httpで来たアクセスをすべてhttpsへ転送しました。301リダイレクトは「このページは引っ越しました」と検索エンジンに伝える方法で、URLが変わるリニューアルのときにも使います。詳しい注意点は、以前まとめた301リダイレクトの記事に書いています。

なお、当時の記事の追記には「httpからhttpsに変えても、リンクの評価は変わらないので心配はいらない」と書いていました。きちんとリダイレクトしておけば、検索での評価が大きく落ちることはない、という意味です。

6. 置換のあとに、古い記事を何本か開いて目で確かめる

今回、過去の記事を読み返していて、ひとつ気になるものを見つけました。2017年に書いたTwitter（現X）のシェアボタンの記事です。サンプルとして載せたリンクのURLが、http:// と https:// が混ざった、ありえない形になっていました。

当時の置換でこうなったのか、別の理由なのかは、今となっては分かりません。ただ、一括置換は「置き換えたい場所以外」も書き換えてしまうことがある、というのはよく覚えておいたほうがいいと思います。特に、記事の中でURLを「例」として文字で書いている場合は要注意です。

置換が終わったら、古い記事、画像の多い記事、コードを載せている記事などを何本か開いて、目で確かめておくと安心です。

今、切り替えるなら私はこうする

2018年からずいぶん時間がたち、仕組みもだいぶ楽になりました。今から切り替えるなら、私はこんな流れにすると思います。

• レンタルサーバーの無料SSLを設定し、httpsで開けることを確かめる
• WordPress 5.7以降なら、「ツール」＞「サイトヘルス」に表示される「HTTPSに切り替える」の案内も確認する（サイト内のURLの書き換えをWordPress側で手伝ってくれます）
• それでも残るhttpのURL（テーマ・広告・外部のスクリプトなど）は、Chromeの警告を見ながら一つずつ直す
• .htaccess などで、httpからhttpsへの301リダイレクトを設定する
• Google Search Consoleで、https版のサイトがきちんと見えているか確かめる

そして、切り替えたあとも、ときどき自分のサイトを開いて鍵マークを確かめる。新しく貼った広告やパーツが、httpのURLを連れてくることがあるからです。

まとめ

httpsへの切り替えで私がつまずいたのは、設定そのものより、そのあとの後始末でした。

1. 作業の前に、データベースとファイルのバックアップを取る
2. SSLを有効にし、httpsで開けることを確かめてから、WordPressの設定を変える
3. 記事の中に残ったhttpのURLを置き換える（多いときは分けて）
4. 鍵マークが出ないときは、httpのまま読み込んでいるものを探す
5. httpからhttpsへ301リダイレクトする
6. 置換のあとに、古い記事を目で確かめる

長くWebの仕事をしていても、「そのうちやろう」と思っているうちに慌てて対応することになりました。もしご自分のホームページで「保護されていない通信」と出ていたら、まずはレンタルサーバーの管理画面で、無料SSLが使えるかどうかを見てみてください。