なにする気分?

「ゲームしたい」「美味しいもの食べたい」「どっか行きたい」「ダラダラしたい」さて、なにしよう。

【はてなブログPro】独自ドメインのhttps(常時SSL)化対応が30分でできちゃった話

f:id:kyoko1003:20180623105644p:plain

 

おひさしぶりです。きょうこです。

気づけば3ヶ月ぶりのブログ更新。
結婚やら引っ越しやら、そしてちょっとした転職活動(1社受けて面倒くさがりモード突入中)やらしてたらあっという間にもう夏です。

 

そしてそして、先週発表されましたね!
独自ドメインで運営しているはてなブログのhttps化(常時SSL)対応!

来月(2018年7月)リリース予定のChromeから全httpサイトに警告表示がされるようになるということで、もうそろそろ対応しておきたいなぁと思っていたところだったのです。

https化にあたっては色々下準備も必要だとか、様子見したほうがよいとの意見もありますが、個人的には様子見したところで自分のブログに他の人のケースが当てはまるとも限らないし、今後のGoogleの評価を考えたときに対応するならいち早くやっておいたほうがメリットありと判断して、リリース当日に挑戦してみることに!

 

やってみた感想としては、

・はてなブログのフォロー手厚い!
・ブログ歴がそこまで長くなく、独自カスタマイズもあまりいれてなかったこともあって、思いの外サックリできた!

という感じ。

 

せっかくなので、今回私が対応した内容を振り返りながらご紹介したいと思います(^^)

※あくまで私のケースなので、誰もが同じの対応で終わるものではありません。あしからず。

 

 

 

 

そもそもhttps(常時SSL)化対応ってなぜ必要なの?

これまでのWEBサイトは「http」から始まるURLが主流で、例えば個人情報やクレジットカード情報の登録フォームなどでしか、通信が暗号化された「https」は利用されていませんでした。

ただその流れを変えたのがGoogleです。

https化はセキュリティ強化のほか、サイトの読み込み速度改善等にも役立つため、Googleは今後https化を推奨すると発表。
それに伴い、https化したWEBサイトをSEO上でも優遇すると明言しています。

正直、現時点ではまだSEO観点においてそこまで大きな影響は感じられませんが、今後徐々にそのインパクトが増していく可能性はあります。

様々なブログがhttps化を進めているのはSEOへの影響が最も大きいかと思います。 

 

はてなブログでやること

やることはとってもシンプル!

① はてなブログの「ダッシュボード」>「設定」>「詳細設定」へ進む
②「HTTPS配信」の項目で「変更する」ボタンを押す

f:id:kyoko1003:20180623181104p:plain

これだけで簡単にサイトの設定が切り替わります!

 

ただサイトの設定自体は切り替わったものの、これだけでは完全なhttps化はできませんでした。
混在コンテンツ(Mixed Content)の影響を受けていたためです。

 

混在コンテンツ(Mixed Content)の対応 - 私の場合はスクリプト一文で解決! 

混在コンテンツ(Mixed Content)とは、https化されたページの中に、http通信で送信されたデータが含まれた状態のことを指します。

主な原因となるのが、各ページ内にある画像や動画、またJavaScriptやCSSなどでhttpのURLを利用していること。

私の場合、各記事内の画像などは何もせずともすべてhttps状態に切り替わっていたのですが(はてなブログ手厚い!)、JavaScript側に混在コンテンツがある状態でした。

 

画像や動画であれば頑張れば修正できるけど、JavaScriptとなると対応難易度があがってしまいます。
そこで利用したのが「Upgrade Insecure Requests」なるもの!
簡単にいうと、SSL化されたページ内に表示させる画像等のリンクを、閲覧者側のブラウザで自動的にhttps接続に変換してくれるというものです。

※ただし配信元がhttps化対応していないとhttpのままとなります。

 

対応は簡単!
はてなブログの「ダッシュボード」>「設定」>「詳細設定」内にある「検索エンジン最適化」の中の「headに要素を追加」に下記コードを貼り付けるだけ!

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

 

本ブログ(なにする気分?)はこれだけでhttps化が完了しちゃいました◎
ブラウザのアドレスバーが下記のような形になっていれば確認OKです(Chromeの場合)

f:id:kyoko1003:20180623184225p:plain

 

混在コンテンツ(Mixed Content)については、はてなブログが提供しているQ&Aもぜひ参考にしてみてくださいね。

 

 

 

Google Analyticsの更新

さて、サイトのhttps化が無事に終了したら、計測周りの設定も整えて上げる必要があります。

Google Analyticsで必要となるのが
・プロパティ設定
・ビュー設定
という2つの設定変更。

 

とはいえ、どちらも変更方法はいたって簡単で、GoogleAnalytics左下の歯車アイコンから管理画面へ遷移し「http://」→「https://」に切り替えるだけ。

 

▼プロパティ設定

f:id:kyoko1003:20180623185740p:plain

 

▼ビュー設定 

f:id:kyoko1003:20180623185742p:plain

たったこれだけでGoogle Analyticsの設定は完了です!

 

Google Search Consoleの更新

ちょっと面倒くさいのがGoogle Search Console。
こちらはhttps化したサイトを1から登録し直してあげる必要がありますので、Google Search ConsoleのHOME画面にある赤い「プロパティを追加」ボタンから頑張って登録していきましょう。

サイトマップの送信も忘れずに!

 

ちなみに私は登録後

SSL/TLS 証明書にドメイン名 https://nanisurukibun.com/ がありません

というエラーメッセージが届いたのですが、これは登録が早すぎてSSL化の反映が間に合っていなかったことが原因だった様子。
SSL化が済んでいればスルーしてしまって問題ありません。 

Google Search Consoleは実際にデータが反映されるまで1週間程度かかることもありますので、反映状況については気長に待ちましょう◎

 

Google AdSenseは対応不要

私の場合、Google AdSenseは特に対応なし!
管理画面でなにか設定変更をする必要も、記事内に仕込んでいたソースを変更する必要もありませんでした。

※昔からAdsenseを入れていた方は記述の変更が必要となる場合があります

ただhttps化してしばらくは、広告が表示されたりされなかったりと若干不安定な状態に。1週間たった現在では問題なく表示されているようです◎

 

 

以上が私がhttps化にあたって対応した全内容となります。
時間にしておよそ30分程度。思っていたよりずっと簡単にできちゃいました。

もちろん必要となる対応は人それぞれ異なりますので、もっと面倒くさい修正が必要となる場合もあります。

個人的には、ブログを開始して1年程度であればそこまでリスクなく移行できるんじゃないかな、と。

 

ぜひ皆さんのお役に立てると幸いです(^^) 

 

スポンサーリンク
©なにする気分? All rights reserved.