エックスサーバーの無料独自SSLをWordPressに設定する方法

xserver_wordpress

ご自分の会社のサイトを開いたとき、アドレスバーに「保護されていない通信」と出ていて、不安になったことはないでしょうか。

かつては「余裕があればSSL(通信の暗号化)も入れましょう」という位置づけでした。でも今は違います。暗号化していないサイトは、ブラウザから「保護されていない通信」と表示され、警告の対象になりつつあります。 HTTPS化は、もう任意ではなく前提だとお考えください。

この記事では、エックスサーバーで無料の独自SSLを使い、WordPressサイトをHTTPS化する手順を、順番どおりにご紹介します。相談できる技術者が社内にいなくても、ご自分で確認しながら進められる粒度で書きました。

なぜ今、HTTPS化が「前提」なのか

SSLを入れると、サイトとやり取りされる情報が暗号化され、途中で盗み見られにくくなります。WordPressはブログだけでなく、プラグインで会社案内やネットショップとしても使われます。問い合わせフォームや購入情報を扱うなら、暗号化は欠かせません。

WordPressはオープンソースで、世界中で広く使われているぶん、狙われやすい面もあります。だからこそ、通信を暗号化しておく意味があります。

ここで、順序を一つはっきりさせておきます。HTTPS化の目的は、あくまで「安全に通信を暗号化すること」です。 Googleは以前から、HTTPSを検索順位の判断材料のひとつにすると公表しています(Google 検索セントラル ブログ)。ただ、これは目的ではなく結果です。正しく暗号化して整えておけば、検索での評価は後からついてきます。私は、この順番を逆にしないことが大切だと考えています。

「SSLを入れると速くなる」という誤解について

ひとつ、よくある誤解をほどいておきます。「SSLを入れると表示が速くなる」と言われることがありますが、暗号化そのものが表示を速くするわけではありません。 暗号化の最初のやり取り(ハンドシェイク)は、素のhttpより往復が増えるぶん、むしろごくわずかに手間が増えます。

「HTTPSのサイトのほうが速いことがある」のは事実です。でも理由は暗号化ではありません。今の速い通信方式(HTTP/2やHTTP/3)は、HTTPS接続でしか使われないためです。速さの正体は、HTTPSを前提とした新しい通信方式のほうにあります。 「SSLを入れたから速くなる」のではなく、「速い方式を使う条件がHTTPSだった」という順序です。

進める前に、共有ボタンのカウントについて

この先の手順で、サイトのアドレスは「http://」から「https://」に変わります。このとき、記事に置いた共有ボタン(「いいね」やシェアの数)が、一度ゼロに見えることがあります。

驚かれるかもしれませんが、数が消えたわけではありません。httpとhttpsが、別のアドレスとして数えられているだけです。 お使いの共有ボタン(プラグインやサービス)に「http と https のカウントを合算する」設定があれば、それを有効にすることで元の数を引き継げます。多くは、設定を1つ切り替えるだけです。

昔は「カウントが減るのが嫌なら、SSLを入れないでおく」という考え方もありました。でも今は、その選択はおすすめできません。暗号化をやめてhttpのまま留まると、ブラウザで「保護されていない通信」と警告され、検索での評価も下がります。カウントのために、安全と信頼を手放す取引は、もう成り立ちません。 「httpとhttpsが二重になる」心配は、SSLを消すのではなく、この後の301リダイレクトと正規アドレスの指定できちんと解消します。

1. サーバー側でSSLを有効にする

まず、エックスサーバーの管理画面にログインします。契約しているドメインの「SSL設定」を開きます。

SSL設定

登録済みドメインの一覧が表示されるので、SSLにしたいドメインを選びます。

独自ドメイン

「独自SSL設定の追加」をクリックして、設定を進めます。

独自SSL設定の追加

CSR情報(SSL証明書の申請情報)は、入力しなくても先へ進めます。設定してから反映まで、最大1時間ほどかかります。ここは待つだけの工程なので、少し時間をおいてから次に進みます。

2. WordPressのアドレスをhttpsにする

次に、WordPress側の設定です。といっても、アドレスを「https」に直すだけです。

管理画面の「設定」→「一般」を開き、「WordPress アドレス (URL)」と「サイトアドレス (URL)」の2か所を、http:// から https:// に書き換えて保存します。

Wordpressの設定

これでサイトのアドレスはhttpsになります。ただし、これで終わりではありません。この時点では、まだhttpとhttpsの両方でページが開ける状態です。

3. ページの中に残った「http://」を直す(混在コンテンツの解消)

ここが、見落とされやすく、でも大事な工程です。

サイトのアドレスをhttpsにしても、記事の中やテーマの中に、昔の「http://」で始まる画像やスクリプトのアドレスが残っていることがあります。 この状態を「混在コンテンツ」と呼びます。httpsのページの中に、暗号化されていないhttpの部品が混じっている状態です。

これが残っていると、ブラウザがその部品をうまく表示しなかったり、アドレスバーに鍵マークが出ず「保護されていない通信」と表示されたりします。せっかくhttpsにしても、見た目が崩れたり、安全に見えなかったりするわけです。

対処はシンプルです。サイトの中に残った「http://」を「https://」に置き換えます。 WordPressなら、記事本文の中のアドレスをまとめて置き換えるプラグイン(「Search Regex」など、一括置換ができるもの)を使うと、一件ずつ手で直さずに済みます。

ご自分で確認する方法

専門知識がなくても、直ったかどうかは確認できます。

  • 鍵マークを見る: ページをブラウザで開き、アドレスバーの左に鍵マークが出ていれば、ひとまず正常です。鍵マークが出ないページがあれば、そこに古いhttpの部品が残っています。
  • ソースを見る: ページ上で右クリックして「ページのソースを表示」を開き、ブラウザの検索(Ctrl+F または Command+F)で「http://」を探します。画像やスクリプトのアドレスとして残っていれば、それが直すべき箇所です。
  • 画像の多いページも見る: トップページだけでなく、写真の多い記事ページもいくつか開いてみます。

普段サイトを眺めているだけでは、この混在コンテンツにはなかなか気づけません。だからこそ、移行のタイミングで一度、意識して確認しておく価値があります。私も、移行後のサイトを診るときは、まずこの鍵マークとソースから見ます。

4. httpでアクセスした人を、httpsへ自動で案内する

ここまでで、サイトはhttpsで開けるようになりました。でも、まだ古い「http://」のアドレスでもアクセスできる状態です。二重になっています。

これを一本化するのが、301リダイレクトという仕組みです。「httpで来た人を、自動的にhttpsへ送る」設定だとお考えください。

エックスサーバーには、この切り替えを管理画面から補助する機能もあります。まずは管理画面の案内に沿って進めるのが、いちばん安全です。 そのうえで、最終的に次の1ブロックが「.htaccess」という設定ファイルに入っていれば、正しく一本化できています。

# 追記する1ブロック(httpでの接続をhttpsへ301で送る)
RewriteEngine On
RewriteCond %{SERVER_PORT} !^443$
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

中身を一つひとつ覚える必要はありません。 ここでお伝えしたいのは、「この1ブロックが、一度だけ、正しく入っていればよい」という一点だけです。意味は大まかに言えば、「443番(httpsの入口)以外で来たアクセスを、そのままhttpsのアドレスへ送る」というものです。

もし、この設定ファイルを直接触ることに不安があれば、無理にご自分で編集しなくて構いません。正しく入っているかどうかを確認できること自体が、まず大事です。

5. 「正しいアドレスはhttpsです」とはっきりさせる

最後に、検索エンジンに対して「このサイトの正式なアドレスはhttps側です」と、はっきり伝えておきます。ここをそろえておくと、httpとhttpsの二重表示が早く解消します。

そろえる場所は3つです。

  1. 正規アドレス(canonical): 各ページが「自分の正式なアドレスはこれ」と示すタグです。多くのWordPressのSEO系プラグインでは、サイトのアドレスをhttpsにすれば自動でhttpsに切り替わります。
  2. サイトマップ: 検索エンジンにページ一覧を伝えるファイルです。中のアドレスがhttpsになっているか確認します。
  3. 内部リンク: サイト内のページ同士をつなぐリンクです。古いhttpのままのものが残っていれば、httpsに直します(3の一括置換で多くは片づきます)。

先ほどの「SSLを消せば二重化を防げる」という古い考え方の、正しい答えがこれです。暗号化を消すのではなく、301と正規アドレスの指定で、httpsに一本化します。 これが今のやり方です。

6. Google側の登録を確認する

アドレスがhttpsに変わったので、Google側の登録も見ておきます。ここはSSL設定の本筋から少し外れるので、要点だけにとどめます。

  • Google Search Console: httpとhttpsは、別のサイトとして扱われます。httpsで改めて登録が必要です。今は、httpとhttpsをまとめて扱える「ドメインプロパティ」での登録が扱いやすくなっています。
  • アクセス解析(Googleアナリティクス/GA4): 計測しているアドレスがhttpsになっているか、設定を確認しておきます。

まとめ

HTTPS化は、一つずつ順番に進めれば、特別に難しい作業ではありません。整理すると、次の流れです。

  1. サーバー側でSSLを有効にする
  2. WordPressのアドレスをhttpsにする
  3. ページ内の「http://」を直す(混在コンテンツの解消)
  4. httpからhttpsへ301で一本化する
  5. 正規アドレス・サイトマップ・内部リンクをhttpsにそろえる
  6. Google側の登録を確認する

途中に、鍵マークやソース表示で「ご自分で確認できる」工程を挟みました。普段サイトを眺めているだけでは、混在コンテンツや二重アドレスには気づきにくいものです。 気づけないのは当たり前で、それができないからといって、何かがおかしいわけではありません。

もし、どこかで手が止まっても大丈夫です。外から一度診て、直すべきところだけをお伝えするのが、私の役目だと思っています。その相談相手になれれば、うれしく思います。