本記事ではWebページのURLをHTTPS化する方法を解説します。HTTPS化することで、セキュリティ対策やSEO対策の強化など、多くのメリットがあります。まだHTTPS化が済んでいないという人は今回紹介するHTTPSへの変更方法やそのメリットを今後のHTTPS化の参考にしてください。
▼HTTPとHTTPSとの違い・安全なサイトの見極め方
HTTPとは?HTTPSとの違い・安全なサイトの見極め方を解説
- 1. URLをHTTPS化(常時SSL化)するには?
- 2. WordPressをHTTPS化する方法
- 3. WebページのHTTPS化を確認する方法
- 4. HTTPS化の注意点
- 5. まとめ
- 6. ITスキルの習得方法は?
- 7. 関連記事
URLをHTTPS化(常時SSL化)するには?
HTTPS化するには、下記の手順で行います。
- サーバがHTTPS化に対応しているか確認する
- CSR(証明書署名要求)を作成する
- SSLサーバ証明書を取得する
- サーバにSSLサーバ証明書をインストールする
- URLをHTTPSに変更する
- リダイレクト設定を行う
- Webページにエラーが出ていないか確認する
1. サーバがHTTPS化に対応しているか確認する
Webページに利用しているレンタルサーバがHTTPS化に対応しているかを確認する必要があります。レンタルサーバによっては非対応の場合もあるので注意が必要です。レンタルサーバの公式サイトや利用規約を見れば確認できます。HTTPS化に対応していない場合は移行も検討しましょう。
また、Webページを公開前にチェックする「テストサーバ」を用意している場合はこちらも併せてHTTPS通信に対応させましょう。
2. CSR(証明書署名要求)を作成する
次にCSRを作成します。CSRとは、SSLサーバ証明書を発行するのに必要な署名要求です。CSRの作成には、ディスティングイッシュネームという、Webサイトやその運営組織に関する情報を入力する必要があります。具体的な作成手順はサーバごとに異なるため利用中のサーバの仕様を確認しましょう。
3. SSLサーバ証明書を取得する
CSR作成後は認証局に申請してSSLサーバ証明書を取得します。SSLサーバ証明書とは、Webページへの接続が安全なことを証明する電子証明書です。SSLサーバ証明書の種類には「共有SSL」と「独自SSL」の2つがありますが、HTTPS化が必要なのは独自SSLです。
独自SSL | 共有SSL | |
説明 | 独自ドメインに対するSSL証明書 | サーバ供給会社が取得したSSL証明書を複数のユーザで共有して使う |
対象ドメイン | 独自ドメイン (例)https://〇〇〇.com | 共有ドメイン (例)https://▲▲▲.〇〇〇.com |
独自ドメインとは、唯一無二のオリジナルドメインでURLのほかにもメールアドレスなどにも利用できます。サイト運営組織が所有しています。
共有ドメインとは、1つのドメインを複数のユーザで共有するドメインで、サーバを提供している会社が保有しています。
共有SSLは、サーバを提供する会社が取得したSSLサーバ証明書であり、それを複数の利用者で共有します。一方で独自SSLは、Webサイトの所有者が取得したSSLサーバ証明書のことです。コーポレートサイトであれば、信頼性の高い独自SSLにしましょう。
さらに、独自SSLは次の3種類に分けられます。
SSLサーバ証明書の種類
認証 | 認証 レベル | 説明 | 年間費用 | 利用例 |
ドメイン認証 (Domain Validation) | ★☆☆ | ドメイン名の使用権を証明する。インターネット上での認証手続きが済むので迅速なSSL認証の取得ができる。 | 数千円 | 個人ブログ・ホームページ |
企業認証 (Organization Validation) | ★★☆ | ドメイン名の使用権に加えて、Webページ運営組織が法的に実在することを証明する。 | 数万円 | コーポレートサイト |
EV認証 (Extended Validation Certificate) | ★★★ | ドメイン名の使用権に加えて、企業認証よりも厳しい基準でWebページ運営組織の実在性(法的・物理的実在性)を証明する。最も身元承認の手続きが厳格です。 | 数十万円 | ECサイト・オンラインバンキング |
ドメイン認証はドメインの所有者であることを保証しているものの、実在する企業や団体であることを保証しているわけではありません。
ドメイン認証、企業認証、EV認証とありますが、下に行くほど認証レベルが高くなり、ユーザに高い信頼性を示すことができます。費用に関しては、証明書の認証局によって異なります。
Webサイト運営組織が所有する「独自ドメイン」に対して、SSLサーバ証明書が発行されます。
SSLサーバ証明書では、利用するサーバ会社が分かるので共有SSLではWebサイトの所有者を確認できず、独自SSLと比べると信頼性が低くなってしまいます。
認証局によって費用なども異なるので運営するWebサイトの目的や予算に応じて種類を選択しましょう。
4. サーバにSSLサーバ証明書をインストールする
SSLサーバ証明書を取得したら、その証明書をサーバにインストールします。インストール方法もサーバによって異なるので使用を確認しましょう。(※レンタルサーバよっては、自動でインストールされるものもあります。)
インストール時にCSR作成の際に生成した秘密鍵が必要になるため用意しておきましょう。SSLサーバ証明書をインストールしたら基本的なWebページのHTTPS化は完了したことになります。
レンタルサーバの機能を利用することで上記フローを省ける
主要なレンタルサーバであれば、上記のフローを省ける機能が用意されています。この機能を利用することでスムーズに設定できます。
5. URLをHTTPSに変更する
WebページのHTTPS化は、上記の手順で完了しています。しかし、Webページを構成する画像や内部リンクなど含めたすべてのリンクを「http://」から「https://」に置換します。具体的には、次のようなリンクが含まれます。
HTTPSに置き換えるリンク
- Webページを構築するHTMLやCSSなどのソースコード内リンク
- Webページに含まれる画像やテキストの内部リンク
この作業を行わなければWebページにアクセスできなくなるので必ず行いましょう。また、外部サイトからのリンクも含まれます。なお、置き換えの作業が必要になるのは、絶対パスで記載されたリンクのみで、相対パスやルートパスで記述されたリンクは、この作業は不要です。
6. リダイレクト設定を行う
リダイレクトは、古いURLにアクセスがあった際に、自動的に新しいURLに転送する仕組みです。HTTPS化後にリダイレクト設定を行うことで、ユーザが元のHTTPのURLにアクセスしてもHTTPSのページに訪れてもらえます。また、SEO対策としても重要なので忘れずに行いましょう。
リダイレクト設定をしなければHTTPのURLはリンク切れになってしまい、ユーザの流入の機会を失ってしまいます。
また、リダイレクト設定後はGoogleサーチコンソールとGoogleアナリティクスのURLの再登録も行いましょう。
7. Webページにエラーが出ていないか確認する
Webサイト全体にエラーが出ていないか確認する必要があります。
チェック方法
- ブラウザからHTTPSのページにアクセスできるか確認する
- Webページ内のリンクが正常に機能しているか確認する
- 古いURLにアクセスしても新しいURLに切り替わるか確認する
アドレスバーでSSL化されているか否かを調べることができます。WebブラウザからWebページにアクセスしてアドレスバーを確認しましょう。HTTPS通信は「https://」からURLが始まり、アドレスバーの先頭に鍵マークまたは「保護された通信」もしくは「組織名」が表示されます。(利用する環境によって表示は変わります。)組織名になっている場合は暗号化されているうえにドメインの所有者が実在する組織であることを示しています。一方でHTTP通信は「http://」からURLが始まり、アドレスバーの先頭に注意や警告マーク、または「保護されていない」と表示されます。
ブラウザ上で右クリックして「検証」を選択し、デベロッパーツールを開きます。メニュー上部の「Console」タブを選択すると混合コンテンツのエラー箇所が表示されます。
WordPressをHTTPS化する方法
サーバ側の操作
WordPressで作成したWebページの場合、サーバ側だけでなくWordpress側の操作も必要になります。
まずはサーバ側の操作について基本的な流れを紹介します。サーバ側の操作は上記と一緒です。
- サーバがHTTPS化に対応しているか確認する
- CSR(証明書署名要求)を作成する
- SSLサーバ証明書を取得する
- サーバにSSLサーバ証明書をインストールする
1. サーバがHTTPS化に対応しているか確認する
Webページに利用しているレンタルサーバがHTTPS化に対応しているかを確認する必要があります。レンタルサーバによっては非対応の場合もあるので注意が必要です。レンタルサーバの公式サイトや利用規約を見れば確認できます。HTTPS化に対応していない場合は移行も検討しましょう。
また、Webページを公開前にチェックする「テストサーバ」を用意している場合はこちらも併せてHTTPS通信に対応させましょう。
2. CSR(証明書署名要求)を作成する
次にCSRを作成します。CSRとは、SSLサーバ証明書を発行するのに必要な署名要求です。CSRの作成には、ディスティングイッシュネームという、Webサイトやその運営組織に関する情報を入力する必要があります。具体的な作成手順はサーバごとに異なるため利用中のサーバの仕様を確認しましょう。
3. SSLサーバ証明書を取得する
CSR作成後は認証局に申請してSSLサーバ証明書を取得します。SSLサーバ証明書とは、Webページへの接続が安全なことを証明する電子証明書です。SSLサーバ証明書の種類には「共有SSL」と「独自SSL」の2つがありますが、HTTPS化が必要なのは独自SSLです。
共有SSLは、サーバを提供する会社が取得したSSLサーバ証明書であり、それを複数の利用者で共有します。一方で独自SSLは、Webサイトの所有者が取得したSSLサーバ証明書のことです。コーポレートサイトであれば、信頼性の高い独自SSLにしましょう。
さらに、独自SSLは次の3種類に分けられます。
SSLサーバ証明書の種類
認証 | 認証 レベル | 説明 | 年間費用 | 利用例 |
ドメイン認証 (Domain Validation) | ★☆☆ | ドメイン名の使用権を証明する。インターネット上での認証手続きが済むので迅速なSSL認証の取得ができる。 | 数千円 | 個人ブログ・ホームページ |
企業認証 (Organization Validation) | ★★☆ | ドメイン名の使用権に加えて、Webページ運営組織が法的に実在することを証明する。 | 数万円 | コーポレートサイト |
EV認証 (Extended Validation Certificate) | ★★★ | ドメイン名の使用権に加えて、企業認証よりも厳しい基準でWebページ運営組織の実在性(法的・物理的実在性)を証明する。最も身元承認の手続きが厳格です。 | 数十万円 | ECサイト・オンラインバンキング |
認証局によって費用なども異なるので運営するWebサイトの目的や予算に応じて種類を選択しましょう。
4. サーバにSSLサーバ証明書をインストールする
SSLサーバ証明書を取得したら、その証明書をサーバにインストールします。インストール方法もサーバによって異なるので使用を確認しましょう。(※レンタルサーバよっては、自動でインストールされるものもあります。)
インストール時にCSR作成の際に生成した秘密鍵が必要になるため用意しておきましょう。SSLサーバ証明書をインストールしたら基本的なWebページのHTTPS化は完了したことになります。
レンタルサーバの機能を利用することで上記フローを省ける
主要なレンタルサーバであれば、上記のフローを省ける機能が用意されています。この機能を利用することでスムーズに設定できます。
WordPress側の操作
サーバ側の作業が完了したらWordPress側の設定に取り掛かります。
0. WordPressの事前準備
データのバックアップを取る
作業時にトラブルが発生しても元に戻せるように、まずデータのバックアップを取ります。バックアップには、「BackWPup」や「All-in-One WP Migration」などのプラグインの利用がおすすめです。
WordPressを最新のバージョンにする
バックアップ後はWordPressを最新バージョンにします。WordPress自体の更新のほかプラグインやテーマなどもすべて最新の状態にする必要があります。事前準備において最新のバージョンに対応していないプラグインやテーマであった場合にエラーが発生する可能性があるので必ずバックアップを先に行う必要があります。
- URLをHTTPSに変更する
- リダイレクト設定を行う
- Webページにエラーが出ていないか確認する
1. URLをHTTPSに変更する
事前準備が完了したら、管理画面左側のバーにある「設定」を開きます。「WordPress アドレス (URL)」「サイトアドレス (URL)」タブが表示されるのでリンクの冒頭を「https」に変更し、変更が完了したら「変更を保存」をクリックします。
プラグインを利用すれば作業を簡易化できる
WordPressであれば、プラグインを利用することで、HTTPSに一括変更することができます。SSL化プラグインを利用することで「https://」への置換やリダイレクトなどの作業をスムーズに進められます。
「Really Simple SSL」と「SSL Insecure Content Fixer」の2つがおすすめです。
2. リダイレクト設定を行う
リダイレクトは、古いURLにアクセスがあった際に、自動的に新しいURLに転送する仕組みです。HTTPS化後にリダイレクト設定を行うことで、ユーザが元のHTTPのURLにアクセスしてもHTTPSのページに訪れてもらえます。また、SEO対策としても重要なので忘れずに行いましょう。
リダイレクト設定をしなければHTTPのURLはリンク切れになってしまい、ユーザの流入の機会を失ってしまいます。
リダイレクト設定は「.htaccess」を編集する方法とプラグインを利用する方法が存在しますが、スムーズに作業を進めるには後者がおすすめです。「.htaccess」でコードを編集する場合はバックアップを取ってから作業しましょう。
3. Webページにエラーが出ていないか確認する
Webサイト全体にエラーが出ていないか確認する必要があります。
SSL化の確認項目
- ブラウザからHTTPSのページにアクセスできるか確認する
- Webページ内のリンクが正常に機能しているか確認する
- 古いURLにアクセスしても新しいURLに切り替わるか確認する
アドレスバーでSSL化されているか否かを調べることができます。WebブラウザからWebページにアクセスしてアドレスバーを確認しましょう。HTTPS通信は「https://」からURLが始まり、アドレスバーの先頭に鍵マークまたは「保護された通信」もしくは「組織名」が表示されます。(利用する環境によって表示は変わります。)組織名になっている場合は暗号化されているうえにドメインの所有者が実在する組織であることを示しています。一方でHTTP通信は「http://」からURLが始まり、アドレスバーの先頭に注意や警告マーク、または「保護されていない」と表示されます。
ブラウザ上で右クリックして「検証」を選択し、デベロッパーツールを開きます。メニュー上部の「Console」タブを選択すると混合コンテンツのエラー箇所が表示されます。
上記の方法でエラー箇所が特定できたら、WordPressの管理画面から手動で修正します。修正後は再度確認しましょう。
WebページのHTTPS化を確認する方法
ブラウザからHTTPSのページにアクセスできるか確認する
ブラウザからHTTPSのページにアクセスし、Webページが正常に表示され、アドレスバーで保護されていることが確認できれば、SSL化が成功しています。成功していない場合、HTTPS化されていないリンクが存在しているケースや正しくSSL化の設定ができていない可能性があります。設定後間もない場合は、一定時間をおいてからアクセスしましょう。
古いURLにアクセスしても新しいURLに切り替わるか確認する
SSL化できているか確認するため、古いURLにアクセスしても新しいURLに切り替わるか確認します。
新しいHTTPSのURLに自動でリダイレクトされたら常時SSL化が成功しています。
もし、古いURLにアクセスできてしまった場合は、.htaccessのコードに間違いがある可能性があります。コードを正しく記述できているか確認しましょう。
HTTPS化の注意点
Webサイトの信頼性や安心性が確保される一方で注意点もあります。
検索順位が一時的に不安定になる可能性がある
HTTPS化後は一時的に検索順位が不安定になる可能性があります。これはGoogleでインデックスが完了するまでに時間がかかるためです。時間の経過とともに戻るとされていますが一時的にアクセス数やトラフィックが落ち込んでしまうことが多いです。
まとめ
昨今はHTTPS化を進めるのが一般的です。HTTPS化はWebサイトの運営組織にセキュリティの強化やWebサイトの高速化など、さまざまメリットがある上にサイトの利用者にも安心感を与えることができ、結果としてSEOにも有効です。
手順は難しいように感じますが、順を追って作業すれば初心者でも設定可能です。特にレンタルサーバの場合は簡単に設定できます。
ITスキルの習得方法は?
書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。
ただ、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。
プログラミングスクールならテックマニアがおすすめ!
ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします!これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。
<テックマニアの特徴>
・たしかな育成実績と親身な教育 ~セカンドキャリアを全力支援~
・講師が現役エンジニア ~“本当”の開発ノウハウを直に学べる~
・専属講師が学習を徹底サポート ~「わからない」を徹底解決~
・実務ベースでスキルを習得 ~実践的な凝縮カリキュラム~
このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。
関連記事
HTML/CSS部門
- HTML/CSSとは?関係性や書き方
- HTMLとは?
- HTML頻出タグ一覧
- HTMLで表を作成する方法
- HTMLで画像リンクを貼る方法
- CSSとは?メリットや基本的な書き方
- 【コピペ可】CSS見出しデザイン30選
- CSSのmarginやpaddingで余白指定
- 擬似要素とは?::beforeや::afterの使い方
- 改行ルールの設定方法
- HTMLにCSSをstyleで直書きする方法
- 表(テーブル)のデザイン方法
- CSSで背景画像を指定する方法
- CSS floatプロパティとは?
- HTML要素を横並びにするCSSの新定番「flexbox」とは?
- 要素を好きな位置に配置する「position:absolute;」とは?
- 主軸方向に対する配置を指定する「justify-content」
- display:inline、display:block、display:inline-blockの違い
- CSSフレームワーク「Bootstrap」とは?