フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

FC2ブログの常時SSL化を完了

3 Comments
SSL化
常時SSL化は大仕事と聞いて二の足を踏んでいたが丸1日でほぼ完了。当ブログは記事も修正箇所も少なめで助かった。一通りやったことを書いておいたのでまだの人は参考にどうぞ。

◆はじめに

SSL化の設定をする前にブログテンプレートをレスポンシブデザインのものにしておくことを推奨。ブログのデザインが一新されるのはアレだがSSL化の作業はだいぶ楽になるはず。
FC2ブログのテンプレートをレスポンシブデザインに変更

以下の3項目は既にSearch ConsoleやGoogle Analyticsを導入済みの場合に必要な手順。
◆Searh Consoleに新規URLを登録
◆サイトマップの作成
◆Search ConsoleとGoogle Analyticsの関連付け

ブログやってるならSearch Console(旧ウェブマスターツール)とGoogle Analyticsぐらいは導入しておくと色々役立つかも。過去記事古い上にろくに画像がなくて見づらいけど一応載せておく。
ウェブマスターツールの設定と使い方
Googleアナリティクスの設定と使い方

用語の解説など細かいところは省略。経過観察などで若干修正が必要な箇所もあるのでその辺りはご了承下さい。



◆SSL設定

SSL化 SSL設定 01
まずサイドバーの設定から環境設定 → ブログの設定 → SSL設定で無効から有効に変更。

転送設定に302(一時的な転送)、301(恒久的な転送)の2種類があるが最初は302にしておく。301に切り替えるのは一通りSSL化の作業ができた後。

SSL化 SSL設定 02
301リダイレクトができているかは以下のサイトで確認。TOPページと適当な個別記事のhttp://~から始まるURLでチェックし、リダイレクト先がhttps://~になっていれば完了。
リダイレクトチェック | SEOチェックのためのSEOツール集 ohotuku.jp



◆Searh Consoleに新規URLを登録

SSLを有効にしたらSearch Console - ホームで新規URLを追加する。

SSL化 Searh Console 01
「プロパティを追加」でhttpsで始まるサイトのURLを入力し追加。

SSL化 Searh Console 02
サイトの所有権を確認。PC用テンプレートにGoogleアナリティクスを設置していればすぐ終わる。

SSL化 Searh Console 03
「~の所有権が確認されました。」と出れば完了。

SSL化 Searh Console 04
Search ConsoleのTOPページでhttp、httpsの2つが表示されていればOK。



◆サイトマップの作成

サイトマップの作成とSearch Consoleへの登録
サイトマップの作成については以前書いてるので参考にどうぞ。最後によく分からず放置していたが、いつの間にか送信されていたので今回も大丈夫なはず。

httpsのサイトマップを送信。これまでのhttpの方はある程度httpsの方でインデックスできたのを確認してから削除した方が良いとか。

SSL化 サイトマップの作成
反映されるまで1ヶ月待つこともあるらしいので気長に待つ。※上記画像はhttpのサイトマップ。



◆Search ConsoleとGoogle Analyticsの関連付け

Google Analytics
左カラムの管理(歯車アイコン)からプロパティ設定、ビュー設定のURLを変更。

▼プロパティ設定
SSL化 Google Analytics 01
デフォルトのURLを「https://」に変更。

▼ビュー設定
SSL化 Google Analytics 02
ウェブサイトのURLを「https://」に変更。

▼プロパティ設定(Search Console)
SSL化 Google Analytics 03
プロパティ設定の下の方にある「Search Console を調整」をクリック。

SSL化 Google Analytics 04
「編集」をクリック。

SSL化 Google Analytics 05
本来ならここにhttpsで始まるURLが出ているはずなのだが、何故か出なかったので保留。たぶんまだサイトマップが送信されてないせい。

この項目はここで詰まったので続きは以下のサイトを参照。
サイトのHTTPS化で必要となるGoogleサーチコンソールの再登録方法



◆FC2カウンター・アクセス解析のHTMLタグ差し替え

これに関しては公式参照。カウンターとアクセス解析だけでなく、メールフォーム、アフィリエイト、ショッピングカートも対象。

・FC2カウンターのHTMLタグ差し替え手順
<ブログでプラグインを使用している場合>

1.FC2ブログ(http://blog.fc2.com/)へログイン
2.左メニュー「プラグインの設定」をクリック
3.既に設置している「FC2カウンター」のプラグインの「x」を押して削除
4.再度「公式プラグイン追加」より「FC2カウンター」を追加
FC2総合インフォメーション 【重要なお知らせ】 FC2サービスのSSL化につきまして

・FC2アクセス解析のHTMLタグ差し替え手順

1.FC2アクセス解析(http://analyzer.fc2.com/)へログイン
2.「解析ページ選択」から該当のページを選択
3.左メニュー設定の「設置用HTMLタグ」をクリック
4.表示されたFC2アクセス解析のHTMLタグをすべて選択してコピー
5.既にホームページやブログに貼り付けているHTMLタグを削除し、
  そこへ4.でコピーしたタグをペースト
FC2総合インフォメーション 【重要なお知らせ】 FC2サービスのSSL化につきまして


SSL化 FC2アクセス解析
FC2アクセス解析では左カラムの設定 → 解析ページの管理 → 解析ページの登録でhttpsのURLを追加しておく。リダイレクトすればhttpsでカウントするだろうし今まであったhttpの方は削除。

追加したら上の方にある「タグチェックツール」で正しく解析できるかチェックしておく。



◆広告のHTMLタグ差し替え

当ブログの場合、忍者AdMaxとAmazonの広告を設置しているのでその2つを差し替え。

▼忍者AdMax
忍者AdMaxはPC&スマホ用テンプレートのタグを最新のものに差し替えるだけ。右カラムのバナー画像はそのまま貼っているとエラーが出たのでバナー画像からリンクを削除。

11/03追記 レスポンシブデザイン適用で広告の貼り方が変わったので別記事作成。
忍者AdMax レスポンシブ広告でPC・スマホの表示を切り替える


▼Amazon ※個別記事で必要な作業なのでTOPページのSSL化後で良い。
Amazonの広告はBabyLinkを使って貼っていたのだが、各記事で貼ってある広告を全て差し替える必要がありこれに一番時間がかかった。当ブログは50記事もなかったと思うがそれでもかなり大変。

やり方は全記事を1つずつチェックしてアドレスバーに「保護された通信」と出てない記事でHTMLタグを差し替える地道な作業。これを機に需要なさそうな記事は差し替えが面倒で非公開に。

BabyLinkはいつの間にかhttpsに対応していたので当ブログだと2016/11/15以降の記事では差し替えの必要なし。

SSL化 置換
広告タグの変更箇所を調べて記事本文をまとめてメモ帳などに貼り付け、全て置換すれば楽。

BabyLinkの場合
検索する文字列http://ecx.images-amazon.com/
置換後の文字列https://images-fe.ssl-images-amazon.com/



◆「保護された通信」と表示されない場合

SSL化 保護された通信 01
FC2カウンターやFC2アクセス解析、テンプレートの各種広告を差し替えてもTOPページで「保護された通信」と表示されない場合、他の原因が考えられる。

SSL化 保護された通信 02
Chromeなら右クリックからコンテキストメニューの検証でConsoleタブを開く。おそらく「Mixed Content:」という警告が出ているはずなので、テンプレートでその部分を修正。

SSL化 保護された通信 03
「保護された通信」と表示されるようになれば完了。それでも保護されずアドレスバーに盾アイコンが出ていれば次の項目も試す。



◆アドレスバーに表示される盾アイコンを消す

SSL化 盾アイコン
盾アイコンをクリックすると「このページは承認されていないソースからのスクリプトを読み込もうとしています」と表示される。これはテンプレートのスクリプトファイルが原因。

絶対パス<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
相対パス<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
先程と同じく「Mixed Content:」の内容を確認。当ブログの場合、jqueryのURLが絶対パス「http://~」になっていたので相対パス「//~」に修正。外部URLだし絶対パスで「https://~」の方が良いかも。

正直このjqueryの1行は消してしまいたいがどこに影響があるか分からないし放置。

個別記事だとニコニコ動画のプレイヤー埋め込みタグが原因の場合もあった。YouTubeは問題ないのに差し替え面倒な…。

SSL化 保護された通信 03
盾アイコンが消えて今度こそSSL化を完了。まだよく分からない警告が出ているが特に問題なさそうだしスルー。



◆内部リンクの修正

10/20追記 この項目は10/18辺りに修正されたので読み飛ばしてOK。
【ブログ】 SSL対応につきまして 【重要】 - FC2総合インフォメーション

内部リンクを「http://~」にしていた場合、そのリンクを踏むと302リダイレクトによってURLが自動で「https://~」になる。しかしリダイレクトされて辿り着くURLが問題。

これが正規(https:)の個別記事のURLなのだが、
https://tokitamaroku.blog.fc2.com/blog-entry-000.html

過去記事(http:)の内部リンクを踏むと…
http://tokitamaroku.blog.fc2.com/blog-entry-000.html

302リダイレクトでこうなってしまう。
https://tokitamaroku.blog.fc2.com/?no=000

301リダイレクトであれば正規のURLにリダイレクトされるが、FC2ブログのSSL化は302リダイレクトなのでこれに関してはどうしようもない。

ただこのままだとタイトルタグの重複が起こり、検索結果に一部URLが違うだけの同内容の記事が乱立しかねないのでSEO的にあまり宜しくない。


対策として内部リンクから(http:)を消しておけば
//tokitamaroku.blog.fc2.com/blog-entry-000.html

302リダイレクトにより自動で正規URL(https:)になる。
https://tokitamaroku.blog.fc2.com/blog-entry-000.html

今後内部リンクをするときは絶対パス「https://~」ではなく相対パス「//~」で記述するべし。

普段から相対パスで記述しているならこの作業は不要。302リダイレクトの場合、全記事の内部リンクを相対パスにするべきだがcanonicalで正規化していればそこまで問題ないと思われる。

正規化については過去記事を参照。SEOに拘りないなら正規化しなくても良いような気はする。
検索結果にスマホ・携帯のページが出てこないようにする



■その他

レスポンシブデザインのテンプレートでなければPC用だけでなくスマホ用の修正も必須。サイドバーなどのプラグインは忘れがちなので注意。

個別記事で保護されてないのは広告などの内部リンクの修正が必要なので、先にTOPページで「保護された通信」と表示されるようになってから。

SNSボタンのカウントがSSL化でリセットされるのはどうしようもないので我慢。httpsに対応してないものは修正するか最新のものにする。一応最新のものと比較しておくべき。

10/24
常時SSL化(301リダイレクト)とブログテンプレートのレスポンシブデザイン移行が完了。



以下はレスポンシブデザインにする前の愚痴なのでスルー推奨。

SSL化 デバイス別セッション数
SSL化とは関係ないけどスマホ用テンプレートに何年もアクセス解析(FC2・Google)のタグ設置を忘れていたのは痛い。10/7に気づいてから前後のアクセス確認したら全体の40%もスマホって…。

当ブログの全記事SSL化とアクセス解析の設置が完了したのは10/7、その後10/8からはアクセス数が約1.5倍になったけど、本来SSL化に伴いアクセス数が落ち込むこともあるとか。

その後FC2アクセス解析とFC2カウンターのカウント数があまりにも違っておかしいと思ったら今度はスマホ用テンプレートにFC2カウンターが無くて慌てて設置するはめに。

設置する場所はスマホ用プラグインのフリーエリア、もしくは</body>の直前のどちらか。前者はプラグインがTOPページでしか表示されず、個別記事でカウントされない場合があるので注意。

FC2ブログのスマホ用テンプレートにアクセス解析やカウンターのタグ入れ忘れてる人は結構いるみたいなので最後までこの記事読んだ人は一応チェックしておいた方が良いかも。
関連記事
RYO
管理人RYO

Comments 3

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2017/10/16 (Mon) 13:35
  • REPLY
やす (Krtyski)
大変参考になりました

管理人様

自分のブログの常時SSL化に際して、貴ブログに大いに助けられました。ありがとうございます。

殆ど何も分からない状態から、検索して情報をかき集め、なんとか400ページ以上あるブログの全ページの対処を終えました。

参考になった情報源を改めて見直してみると、貴ブログが淡々と必要なことが正確に網羅されていて、私には一番良質だと感じられました。大変お世話になりました。

そこで、当方のブログの記事にて紹介&リンクさせて頂きました。

egadget.blog.fc2.com/blog-entry-663.html

後で、時偶備忘録を改めて拝見していたら、無断転載禁止とありました。
参考文献としての引用の意味で記事をリンクしたので、無断転載ではないと思いますが、念のため事後連絡申し上げます。

何か問題を感じなら、お聞かせください。お望みのように対処します。

RYO
RYO
Re: 大変参考になりました

やす様、わざわざご丁寧な返信&当記事の紹介ありがとうございます。

私も何も分からないなりに手探りで常時SSL化までこぎつけたのですが、お役に立てたようでなによりです。

> 後で、時偶備忘録を改めて拝見していたら、無断転載禁止とありました。
> 参考文献としての引用の意味で記事をリンクしたので、無断転載ではないと思いますが、念のため事後連絡申し上げます。
無断転載の件は記事を丸ごと盗用する輩の対策に一応載せてあるものなので、少々の引用やリンク程度なら特に問題はありません。

FC2ブログのコメント設定のせいで何度も本文のURLがスパム判定になっていたようで申し訳ない…。