常時SSL化は済んでいますか?ただhttpがhttpsに変えるだけではない正しい方法

常時SSL化は済んでいますか?ただhttpがhttpsに変えるだけではない正しい方法

ウェブでご飯を食べている方はおそらく、今更感があるテーマですが今回は「常時SSL化」について紹介したいと思います。

いや、偉そうに記事にするのも恥ずかしいんですが、前からやらないとやらないとと思ってたんですがなかなか面倒でやらなかったんですよねー。

今回この記事では一体SSL化をしていないとどうなるのか??具体的にSSL化をする時に押さえておかないといけないポイントは?などを紹介したいと思います。

前提条件として、ここでの説明はwordpressでサイトを構築している人向けの内容になっています。
もし他のCMSを使っていたり、CMSを使っていない場合は少し異なる部分があります。

でも基本的な考え方は同じなので、よければ目次だけでもご覧になって流れだけでも頭に入れていただくと応用が聞くと思います。

常時SSL化の必要性

そもそもSSL化というのはざっくりいうと、ウェブでの情報のやりとりを暗号化することでセキュリティレベルを高めることです。
今まではクレジットカード情報を入力したり個人情報を入力したりするページに限定的に導入するものでしたが、googleはどこのページでもSSL化をしてセキュリティを高めることを方針として打ち出しています。

どこのページでもSSL化なので「常時SSL化」というわけです。

「いや、なんか面倒だからやめとくわ・・・」という話ではないのが、やっかいなところです。

すでにgoogleも発信していますが、7月にgoogle chrome68というバージョンから、SSL化をしていないページにアクセスをすると警告が表示されるようになってしまいます。
https://developers-jp.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html

影響は実際どれぐらいかはわかりませんが、一般の方がいきなりネットをしてたら「保護されていません」って出たらみてくれない人も出てきますよね。
なので、SSL化はやっておいたほうがいいです。

他にも

  • 若干のSEO効果
  • 表示速度の高速化の前提
  • 信頼性のアップ

といったメリットらしきものもちょこちょことありますが、どちらかというとメリットがあるからやるのではなく、もうやらないと仕方がない・・・っていうレベル感のものです。

作業工程はそんなに多いものではないので、一つ一つ紹介していくのでみながらやってみてください。

実際のSSL化で必要な作業

作業内容としては
バックアップをとる⇨サーバー側でSSL設定⇨内部リンクの調整⇨301リダイレクト⇨GA,サーチコンソールの設定
です。

簡単でしょ?めんどくさそうだけど。

作業前にバックアップを取りましょう

まずはバックアップを取っておきましょう。
普段いじらないような部分を触る時があるので、絶対です。

僕自身、wordpressアドレスをちょっと間違って設定してしまって、とんでもないことになりました。復旧までに6時間かかりましたので・・・。
機会損失になってしまうので、バックアップは必須です。

で、僕は今までbackWPupというプラグインを使ってたんですが、これ意外とサーバーサイドの知識がないと復旧するのに使いにくかったです。

個人的にはUpDraftPlusというプラグインがおすすめです。復旧までの手順がわかりやすいので、初心者の方で今から初めてバックアップします!という方であればかなりおすすめです。

今回は細かい説明は省きますが、一度使ってみてください。
UpDraftPlus

サーバーでのSSL設定

ではいよいよサーバーでの設定です。
ちなみにですが、もし新しくサイトを作ってみよう!という方であれば、一番最初にやっておけば他の部分の作業は必要なくなりますので、まずはやりましょう。

サーバーによって、色々違いがあります。今回はお名前共用サーバーを使っている人向けに説明をしていきますね。

まずはサーバーにログインしてください。

SSL設定をクリックします。

SSL化したいドメインを選択して、新規作成をクリック。

決定して終了です。

これであなたのHPにSSL認証が設定できました。簡単でしょ??

SSL化は反映されるまでに1時間ぐらいかかります。その間にhttps〜にアクセスすると警告が出ます。そんな時はしばらく時間を空けてアクセスしてください。

内部リンクのhttps化

次は、サイト内部の調整です。

今まで内部リンクを貼ったりしていたら、http〜〜で貼ってたと思いますが、これらを全部https~~にしていきます。

面倒ですよね・・・。でも安心してください。ある程度の部分はツールでカバーできてしまうので、思ったよりも楽だと思います。

投稿記事内のソース調整(Search Regex)

投稿記事内のソースは全てSearch Regex というプラグインで一括変換できます。
このプラグインは置き換えたい文字列を指定した文字列に置き換えられるっていう素敵なツールです。

プラグインの新規追加で、Search Regexをインストールして有効化してください。

有効化すると左のダッシュボード⇨ツール⇨Search Regexが出てきますのでクリックして開きます。

Source:どこの文字列をいじりたいか?(デフォルトでPost contentになっていると思いますのでそのままで)
Search pattern:置き換え前の文字列(http://〇〇〇〇を入れてください)
Replace pattern:置き換え後の文字列(https://〇〇〇〇を入れてください)
replase:いわゆるプレビューです。ビフォーアフターがみれます。まずはこれをやってみましょう。
Replase&amp:Save:プレビューで問題がなければここをクリック。ここをクリックしないと反映されないので注意してください。

ここまでやれば8割ぐらいは調整が終わっています。

Search Regexで調整できていない部分の調整

Search Regexはめちゃくちゃ便利です。
が、問題があります。
Search Regexだと固定ページやヘッダー画像などのソースは変更されていないという点です。

忘れがちな部分をまとめておきますのでチェックしてみてください。

  • ウィジェット内のリンク
  • ヘッダーやサイドバーに置いている画像パス
  • グローバルナビのカスタムリンク
  • 固定ページ
  • テンプレートで後から追加した内部リンク

僕の場合、記事の下に統一してランキングコンテンツへのリンクを貼るようにテーマを変更していたのですが、その部分の画像パスとリンク先の設定をそのままにして見落としていました。

他にももしかしたらテーマによっては、最初からhttpと記述しているようなものもあるかもしれませんので、そこは個別にチェックしてみてください。(チェック方法は後で書きます。)

ワードプレスのアドレス設定

ここは最新の注意を払ってください。やることはめちゃくちゃ単純ですがミスるとログインできなくなってサーバー設定をPHPでいじりにいったり、色々面倒な作業が増えてしまいますので。

設定⇨一般で
Wordpressアドレスと、サイトアドレスがありますが、これがhttpのままになっているのでhttpsにしてください。

ちなみにお名前サーバーの使用上wordpressアドレスはhttp://~~~~/wpになってて、サイトアドレスはhttp://~~~になっています。
僕はここを寝ぼけて両方同じのにしてしまいリダイレクトループがかかってしまってログインできなくなりました笑

これを読んでいる方は絶対に真似しないでくださいね!!!!!!

SEO効果を引き継ぐ301リダイレクト設定

ここまでやれば基本的な常時SSL化は完了しています。

でもここまでだけだと、今までえていたSEO効果が失われてしまいます。URLが変わることなので、記事URLを変更しないほうがいいっていうのと同じことですね。
(ここらへんのことはまた改めて書きたいと思います)

なので、今までhttp~~に貼ってくれていた外部リンクだとか、ソーシャルシグナルとかが引き継がれなくなります。

SEO効果を引き継ぐための設定、そう301リダイレクトですね。

301リダイレクトは恒久的な転送で、「この先ずーーーっと転送しますよ」っていう意味です。
同じようなのに302リダイレクトっていうのがあるのですが、これは一時的な転送の時だけに使います。

今回は全てのページをリダイレクトするので、.htaccessを触るのが楽でおすすめです。
FTPソフトで、サーバーにアクセスします。

お名前サーバーの場合色々と、ドメインの名前がついたフォルダがありますので、今回SSL化をしたドメインフォルダを開きます。
するとありますよね、.htaccessが。

これをダウンロードしてください。このファイルはめちゃくちゃ大事なファイルなので、絶対にどこかにマスターとして保存しておくことをおすすめします。

Macを使用している場合、初期設定だと.htaccessファイルが見えないので、表示されるように設定を行う必要があります。

これをターミナルに打ち込んでください。
ターミナルがわからない人はとりあえず画面の右上の虫眼鏡(spotlight検索)でターミナルと検索してアプリを開いて、上のコードを入力してください。

これ全然あやしくないです。今まで表示されていない設定にしていたファイルも全て表示するということを命令しているだけなので。

.htaccessが表示されたら、一番最初の行に下のコードを貼り付けてください。

できたら、保存してFTPソフトで上書きしてください。

これで、全てのhttpページがhttpsにリダイレクトするようになりました。ためしにどのページでもいいのでhttpsではなく、httpで入ってみてください。
勝手にhttpsのページに飛んでいると思います。

ここで飛ばなければどこか間違っているので、もう一度チェックしてみてください。

その他アクセス解析ツールの設定

基本的には今までの作業でSSL化は全て完了しています。

が、サイト運営をしていたらgoogleAnalyticsやサーチコンソールなどのアクセス解析ツールは使っていると思います。
これもURLが変わってしまい、301リダイレクトもされているので今までのhttpのままだとアクセスが全然取れなくなってしまいますので、忘れずに設定しておきましょう。

サーチコンソールの設定

次はサーチコンソールの設定です。

新しくプロパティを追加します。

サイトの認証は以前行なっていた方法を選べば何をしなくてもそのまま続行すると完了できます。

できない場合は指示にしたがってやってください。できたら、所有権が確認できましたという表示がでます。

その後にまずやるのは、サイトマップの送信です。
URL構造が変更されているので、サイトマップの送り直しが必要です。左のダッシュボードのクロール⇨サイトマップで送信する画面に移行します。

この画面の左上の赤いボタンから追加してください。

GoogleAnaliticsの設定

GAにログインしてから左下の、管理をクリックして「プロパティ設定」をクリックします。

すると画面遷移するので、デフォルトのURLを「https」を選択します。

これでOKです。

その次はアナリティクスとサーチコンソールの連携をさせます。

同じくプロパティ設定の中で少し下の「search consoleを調整」をクリックします。

現状はhttpが登録されているので、一旦削除してさっき作成したhttpsのサーチコンソールのプロパティと連携させます。

この画面から、関連づけるプロパティを選択します。さっき作ったhttps~~~のプロパティを選んでくださいね。

保存を押して、もう一度プロパティ設定からsearch consoleを調整を押してみて、httpsのプロパティが表示されて入ればOKです。

まとめ

いや、分量にしたらめちゃくちゃ長かったけど!!
でもきちんと手順を踏んでいけば最初は1時間ぐらいで終われます。僕は複数サイト運営していて合計10サイトぐらいこれやりましたが、後半は1サイト10〜15分ぐらいでできました。

一番時間がかかるのは、大方設定してみた後のエラー潰しですね。
やっぱり自動的にできる方法だと、ファビコンだとか、ヘッダー画像とかの設定変更を忘れてしまったり、テーマによって操作方法が違うのでどこで何を設定したのか忘れてると時間を食ってしまいます。

このエラー潰しはまた別の機会にまとめたいとおもいます。

もし質問などありましたら、ぜひコメントしてください。
お答えできなかったり、時間がかかってしまうかもしれませんが、できる範囲でお答えしますので!!!

いやーーー!一年ぐらい先延ばしにしてた宿題が一つ完了して一安心!!!!