Webデザイナーを目指す人の為のお役立ち情報サイト
WordPressサイトを常時SSL化する手順とエラーの解決方法
あなたのWordPressサイトはhttpからhttpsへSSL化を済ませているでしょうか?もしまだサイトのSSL化を行っていないのならば、今すぐにサイトのSSL化を行う必要があります。
Googleが2014年に「SSL化したサイトを優先してインデックスする」と発表した通り、今年2017年からはあらゆるブラウザにおいて、常時SSL化を行っていないサイトに対してセキュリティ勧告のアラートなどが促されるようになりました。SSL化していないサイトはここ1〜2年の間に以下のような不利な事が間違いなく起こるでしょう。
- SSL化されていないサイトは検索順位が下がる
- ユーザーからの不信感が増幅し離脱する。
- セキュリティ勧告のページが表示されるようになる為、大幅なアクセスダウン。ユニークユーザー数の減少。
この記事では、そのような最悪な事態を防ぐ為に、あなたのWordPressサイトを今すぐhttpからhttpsに変更する方法をご紹介。難しい事・無駄な事は一切抜きにして全ページSSL化する方法をシンプルまとめました。
このページの目次
1.SSLとは何か？なぜ常時SSL化する必要があるのか？
1-1.SSL(https://)とは何か?
SSLとは(Secure Sockets Layer)の略で、インターネット上で行われるあらゆる通信を暗号化してセキュリティを高める技術の事です。SSL化する事で、クレジットカート番号、メールアドレス、電話番号などの個人情報を暗号化して、第三者に傍受されないように守る事が出来ます。SSLに対応していないサイトは、悪者に侵入されやすく、個人情報を抜かれたり、クレジットカード番号や、ログイン情報を抜かれる可能性があります。
1-2.SSL化(https化)する事でSEOに効果的さらにユーザー信頼度アップにつながる
最近までは、お問い合わせフォームやショッピングカート画面など、お客様情報・会員登録画面などを個人情報を入力するページをSSL化する事が主流でした。しかし、Googleが「常時SSL化サイトを優遇する」と2014年に発表した事から、Webサイトの常時SSL化の動きが強まっているのです。サイトをSSL化する事で得られるメリットは以下の点です。
- SSL化したサイトはSEO上メリットがあり上位表示される。
- ユーザーから信頼され安心して来訪してもらえる。
- Webブランディングの向上。
- あらゆる脅威からサイトを守る事が出来る。
Googleはセキュリティ対策が一番の課題であると公言しているので、検索結果をセキュリティ万全のサイトだけにしてユーザーに安心してもらいたいのだと思います。海外サイトにはウイルスなどが仕込まれた危険なサイトがまだまだたくさんありますからね。そういった悪質なサイトを徹底的に排除してクリーンで安心して使える検索エンジンにしたいのでしょう。
Google ChromeブラウザではSSLに対応していないページに対し危険なサイトであるかのような勧告を出すようになりました。あなたのサイトにも警告文が表示されないように気をつけて下さい。
2.WordPressサイトを完全SSL化する為の方法とその手順
【手順1】.レンタルサーバーでSSLを契約する。
現在は様々なレンタルサーバー内でSSLを安価で契約する事が出来ます。各種SSLの契約については以下をご確認下さい。
- さくらレンタルサーバー SSL
- ロリポップ SSL
- Xサーバー SSL(無料SSLあり)
- お名前.comサーバー SSL(無料SSLあり)
SSLの契約については各社で異なりますのでこのページでは割愛させていただきます。あなたがご利用いただいているサーバーから契約出来るSSLをご準備下さい。
【手順2】.SSLの契約完了後サイトをSSL化する為には、
サイト内のhttpをhttpsに変更するだけです。
以下の例を参考にサイト内のソースコードをすべて確認して、http://をhttps://に変更していきましょう。SSL化の作業は基本的にこれだけです。
httpから始まる内部リンクのURL
(変更前)<a href=”http://stackdesign.jp/im-grad-i-became-a-webdesigner/”>
(変更後)<a href=”https://stackdesign.jp/im-grad-i-became-a-webdesigner/”>
httpから始まるcss,Javascript読み込みファイル
(変更前)<script type=”text/javascript” src=”http://stackdesign.jp/js/jquery.min.js”>
(変更後)<script type=”text/javascript” src=”https://stackdesign.jp/js/jquery.min.js”>
httpから始まる画像URL
(変更前)<img src=”http://stackdesign.jp/images/abc.jpg” width=”300″ height=”200″ alt=”abc”>
(変更後)<img src=”https://stackdesign.jp/images/abc.jpg” width=”300″ height=”200″ alt=”abc”>
CSSファイル内において読み込んでいる画像ファイル
(変更前)background: url(http://stackdesign.jp/images/abc.jpg) no-repeat;
(変更後)background: url(https://stackdesign.jp/images/abc.jpg) no-repeat;
外部サイトへのリンクなどはhttpsにする必要はありません。httpのままでOKです。自分のドメインに関係するものをすべてhttpsに修正しましょう。
一つでも漏れがあるとSSLのエラーとなり、Google Chromeなどでは以下のような警告文が表示されます。あなたのサイトも以下のようなアラートが表示されていませんか？以下のような警告が出ると99%のユーザーがあなたのサイトから離脱してもう二度と来訪してくれなくなるでしょう。めちゃくちゃ怪しいサイトみたいですね。これだけは絶対に避けなければいけません。
(※以下はSTACKのサイトをSSL化作業を行っている時に出たアラートです。現在は修正して完全にSSL化していますので、ご安心を。)
【手順3】.WordPress内においてhttpの使用箇所を確認するべきところ
前述させていただいた通り、一つでもhttpでアクセスしている箇所があると上記のSSLの警告文が表示されます。WordPressにおいて漏れがないように以下の場所を確認して修正を行って下さい。
- テーマのすべてのphpファイル
- スタイルシート
- プラグイン内で画像を使用しているもの
- 投稿記事内すべての読み込んでいる画像URL
3.「このサイトへの接続は保護されていません」はSSL化する必要があるサイト
以下のGoogle Chromeのインフォメーションマークをクリックして以下の表示が出ているサイトは、SSLが施されていないサイトです。早急にサイトを完全SSL化しましょう。
4.SSL化されたサイトの表示
完全にSSL化されたサイトは以下のように表示されます。ブラウザのアドレスバーの部分が緑色に変わるので、視覚的にも目が行きやすく、セキュリティ万全で安心できるサイトである事をユーザーにアピールする事が出来ます。
4-1.Google Chrome
Google Chromeの場合は保護された通信と表示され、緑色のセキュリティマークが表示されます。
4-2.FireFox
FireFoxの場合は、安全な接続と表示され同じく緑色のセキュリティマークが表示されます。
4-3.Safari
safariの場合は、セキュリティマークをクリックすると、以下の文言が表示されます。SSL証明書なども表示されるので非常に安心出来ます。
5.「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。」の解決方法
Google Chromeにおいてこのような表示が出た場合は、あなたのサイト内で使用している画像に、httpアクセスで記述している箇所があるという事を表していますので、もう一度サイト内に記述してある、画像の読み込みURLにhttpの記述がないか確かめて下さい。必ずどこかにありますので解決しない場合は、ブラウザのソースを表示を行い「http:」で検索をかけるとすぐに発見する事が出来ます。発見後に「https:」に修正する事で、このエラーは消す事が出来ます。
6.WordPressの管理画面のWordPressサイトURLの変更を行う
最後にあなたのWordPressサイトの「設定」→「一般設定」からWordPressアドレスとサイトアドレスのURLをhttps://に変更しましょう。これでWordPressサイトのSSL化が完了します。
7.SSL化(https化)したWordPressサイトは今後どうなるのか？
Googleは2014年にSSL化したサイトを優遇してインデックスすると発表してから、ここ1,2年で様々なWebブラウザがSSL化していないサイトに対してアラートなどを促す流れになってきています。GoogleはSSL化したサイトは今後SEO上でも若干有利になると公言していますが、今後大幅なアルゴリズムの変更があり、サイトのSSL化が義務付けられサイト順位の大幅変動も十分に考えられます。これらの事を踏まえて、サイトのSSL化は2017年中には必ず行っておくべきでしょう。SSL化する事でサイトのデメリットはありませんからね。
8.どうしても直らない。SSL化に失敗した場合は、プラグインを疑え!
https化をなんとか完了させたいのに、直らない。。。ハマってしまったら、プラグインを疑って下さい。私がハマったのはBack to top(ページトップに戻る系)のプラグインが稼働している事が原因でした。一旦OFFにしてからもう一度、ONにすると直ってる！
プラグインが邪魔している事が結構あるので、https化出来ない場合は、プラグインを一旦切って見ましょう。
まとめ
完全SSL化に成功しましたでしょうか？最後にもう一度まとめさせていただくと、WordPress完全SSL化を行う為には、サーバーでSSLを契約して以下の箇所のhttpをhttpsに変更するだけで完了します。
- テーマのすべてのphpファイル内に記述された画像・Javascrpt、cssファイル
- スタイルシート内の画像読み込みURL
- プラグイン内で画像を使用しているもの
- 投稿記事内すべての読み込んでいる画像URL
どうしてもうまくいかない場合は、必ず上記のどこかにhttpアクセスで記述してある箇所があります。その際はファイル内検索機能などを使用する事ですぐに見つける事が出来ます。
サイトのSSL化はここ1〜２年で必須になり、Googleは、SSL化したサイトの順位を大きく上げる可能性もあります。ページ数が多くなればなるほどSSL化は大変な作業になりますので、今の内にサイトを完全SSL化し、セキュリティ万全のサイトにして準備しておく事をおすすめします。
- keyboard_arrow_left【2016】WordPressに必ずインストールしたいおすすめプラグイン
- 【All in One WP Migration 】ワンクリックでWordPressサイトをバックアップ・引越しkeyboard_arrow_right
[…] WordPressサイトを完全SSL化する手順とエラーの解決方法 | STACK DESIGN […]
[…] し「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。」という警告エラーが出たら、こちらのサイトを参考にしてみてください。 […]
[…] 「WordPressサイトを完全SSL化する手順とエラーの解決方法」 […]
[…] WordPressサイトを常時SSL化する手順とエラーの解決方法 […]
[…] https://stackdesign.jp/how-to-create-ssl-wordpress-site/ […]
[…] https://stackdesign.jp/how-to-create-ssl-wordpress-site/ […]
[…] https://stackdesign.jp/how-to-create-ssl-wordpress-site/ […]
[…] WordPressサイトを常時SSL化する手順とエラーの解決方法 […]
[…] https://stackdesign.jp/how-to-create-ssl-wordpress-site/ […]
[…] [1] WordPressサイトを完全SSL化する手順とエラーの解決方法 | STACK DESIGN […]
[…] WordPressサイトを常時SSL化する手順とエラーの解決方法 […]
[…] 参考記事：WordPressサイトを常時SSL化する手順とエラーの解決方法 […]
[…] もし「このサイトで目にする画像は、悪意のあるユーザーによって差し替えられたものである可能性があります。」という警告エラーが出たら、こちらのサイトを参考にしてみてください。 […]
[…] SSLに関してはこちら↓の記事で詳しく書かれています。WordPressサイトを完全SSL化する手順とエラーの解決方法 | STACK DESIGN […]