PHI-WORKS-京都府舞鶴市のホームページ・印刷物制作-(ピーエイチアイワークス)

https化した際にしておいた方が良いかな?と思われる事まとめました

2016.07.01 :


0701top

ちょっと今回は技術的なお話ですが。

当事務所のホームページでも使っているレンタルサーバーであるところの「エックスサーバー」さんが、6月30日に全てのプランで無料の独自SSLサービスを開始したようです。

2週間前にお金払ってプランを追加した私的にぐぬぬ感めっちゃ強いんですが、今後の流れとしてホームページをSSL化していくと言うのは、ある種必須項目的なことにもなっていくかもしれないため、いよいよ本格的に考えていかなければならないのかもしれません。

とはいえ、導入の敷居が下がったとしても、最初からhttps化した状態で新規ホームページを立ち上げるならともかく、すでに稼働している場合ですと、何かと準備やhttps化直後にしなければならないことがあったりしますので、私の知っている限り、導入した限りのことではありますが、やってみたことをまとめておきます。

最初に:すぐにhttps化しない方がいいホームページとは

流れを見てみると、そろそろ本格的にhttps化を進めていこうよ? という流れが活発化していますが、全てのホームページが対象と言うわけでもなさそうです。今のところは。

その中で、もうちょっとだけ待った方がいいと思われるものを先に説明します。

アフィリエイトサイト

アフィリエイトサイトは外部バナーを使う都合上、SSL対応していないASPと契約している場合はhttps化することで、エラー表示頻発状態となってしまいます。

ざっくりとした説明ですが、https化されたホームページからは、httpからスタートするホームページの画像を読み込む際に警告が表示されてしまうのです。

そのため、まだSSL対応していないアフィリエイトASPと契約している場合は、もう少し待つか、すでにSSL対応を済ませているASPに乗り換える必要が出てくるでしょう。

ソーシャルメディアをメインに集客をしているサイト

https化することで、既存の記事ページやコンテンツページは「http」のものとは別物として扱われます。

そのため、Twitterのシェア数、はてなブックマークのブックマーク数、フェイスブックのいいね!数などすべて0に戻ります。

設定をちゃんとしておけば、わざわざ全てのURLをhttpsに直す手間のようなものはほとんどありませんが、この数字が大切と言う場合は、移行期間等考えておく必要があるでしょう。

WordPressを使っている場合は同期(?)するプラグインなどもあるようですが、動作保証はできかねます…。

外部ホームページから画像を引っ張ってきているサイト

こちらも上記のアフィリエイトサイトと同様、画像を呼び出す際にhttpsではないところからの場合は警告が発せられます。

そのため、外部画像を全て自ホームページから呼び出せるようにするか、画像利用先にhttps化の予定を確認しておいた方がいいでしょう。

https化後の設定について

さて、ここからが本題になりますが、URLがhttpsから始まるものになった後、色々としなければならないことがあります。

事前に修正出来るところもあるので、予め準備しておいてもいいかもしれません。

imgタグ、linkタグなどの最適化

何度も書きましたが、https化されたホームページから呼び出せる画像は同じくhttpsからでなければなりません。

そのため、ホームページのHTML内、スタイルシート内などから「http」で始まる記述を「https」に変更する必要があります。

主に
<img src=”http://〜〜〜.jpg”>

<img src=”https://〜〜〜.jpg”>
や、
<link rel=”stylesheet” href=”http://〜〜〜.css” media=”all“>

<link rel=”stylesheet” href=”https://〜〜〜.css” media=”all“>
あたりでしょうか。

css内にもhttpから始まる記述があれば、全てhttpsに修正する必要があります。

WordPressであれば、独自タグを使った組み方になっていれば特に修正することはないでしょう。

また、投稿記事をまとめて修正したい場合は「SearchRegex」というプラグインを使うと早いです。

相対パスによってURLを省略して記述している場合も特に修正の必要はないかと思われますが、一度まとめてチェックしておく必要はあるかと思われます。

CMSを使っていない場合は、一括置換が出来るテキストエディタを用意すると早いです。(img src=”http”img src=”https”に一括置換 みたいな感じ)

aタグによる外部リンクに関しては問題ないので、とくに直すものはありません。

探し始めると、場合によってはかなり面倒な作業になりがちですが、「CMSであれば独自タグを使う」「静的HTMLでは相対パスで必要なものを読み込む」という風に事前に修正しておくと楽かもしれません。

301リダイレクトの設定

前述の通り、httpsから始まるURLとhttpから始まるURLは、同じ内容でも別ページ扱いとされること、さらにhttpsページとhttpsページが混在する状態はよろしくないことから、リダイレクトをかけておく必要があります。

特に既存のホームページを移行させる場合は、これまでのページ評価は維持したいところでしょうし、301リダイレクトによってhttpにアクセスされた場合は自動でhttpsに移動するように指定しておきましょう。

お使いのサーバーによっては違う方法もあるかもしれませんが、最もメジャーな方法であれば、.htaccessに以下の表記を入れるだけです。

RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://ドメイン/$1 [R=301,L]

(お使いのサーバーや環境、使用CMSなどによって変わる場合がありますので、必ずバックアップを取る、別の情報も確認するなどしてください。)

していることは、「httpでアクセスされた場合は、これまでのページ評価を受け継いでhttpsに移動しますよ(301リダイレクト)」という指定で、この方法であれば、既存のページ評価を落とす事なくコンテンツを移行する事が出来ます。

参考:
WordPressサイトの常時SSL化(全ページHTTPS)リダイレクトを.htaccessで設定しよう(情熱SEM)
ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有(海外SEO情報ブログ)
.htaccessでhttpからhttpsへ301リダイレクト(WEB担当者の備忘録)

Preloaded HSTSに登録

HSTSとは、ざっくり言うと「httpから接続されたサイトは全てhttpsに移動しますよ」という情報をブラウザに送信し、記憶させ、2回目以降のアクセスはすべてhttpsサイトとして読み込むというものなのですが、この「2回目」と言うのが問題で、初回アクセス時はhttpからのアクセスとなることから、セキュリティの問題上盤石とは言い切れないということになります。

そのため、予め「このホームページは常時SSLですよ!」と報告する仕組みをPreloaded HSTSというのですが(ざっくりすぎて語弊あったらごめんなさい)、こちらも.htaccessに記述を入れることになります。

ただし、サブドメインはhttps化しない場合などはこの設定はしない方が良いかもしれません。
参考:
[SSL]HSTS Preloadを設定したらサブドメインにアクセスできなくなる(mani-lab)

Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

の記述(31536000の数字は365日を意味しています。指定出来る最小数字は10886400です)を、上記の301リダイレクト指定の上行に挿入します。

次に、HSTS Preload Submissionに飛び、httpsで始まる自ホームページのトップページURLを入力することで、初回アクセス時からhttpsにて通信する事が出来るようになります。

ただし、準備が整ってない場合はエラーを出すようになってまして、主に

  • 同一ドメイン内全ページのhttps化ができていない(混在状態)
  • サブドメインのみhttps化状態である(エックスサーバーの場合、www無しでSSL証明書を取得してしまうとこのエラーがでます)
  • .htaccessの記述が間違っている

参考:
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識(WWW WATCH)
HSTS (HTTP Strict Transport Security) の導入(Qiita)

ちなみに、私は一度「www無し」で取得してしまってエラーが出てしまい、考えてみればなぜそんな事をしてしまったのか…という後悔の後にもう一度取得し直す二度手間を経験しましたトホホ…。

英語のサイトなのでちょっとややこしく感じられますが、ここがOKになれば、https化後の設定がある程度完了したと言って良いでしょう。

あと、これについては推奨はしますが、必須と言うわけではありませんので、原因不明のエラーが出た…。セキュリティ終わった…。というわけではないのでご安心を(あえて登録しないところもあるようです)。

残りの細かな設定

とりあえずは上記の設定で準備完了と考えても大丈夫とは思われますが、その他のサービスを使っている場合は一部設定を直さなければなりません。

Google SearchConsole・アナリティクスの再設定

こちらは最初から設定のしなおしになります。

新規でURLを追加し、サイトマップの送信をしておきましょう。サイトマップが自動生成されない場合は、サイトマップの修正もお忘れなく。

Googleアナリティクスの場合はページ追加をする必要はなく、設定画面からURLをhttpsに変えるだけです。

最新版のタグを使っている場合は変更ありませんが、昔のタグを使っている場合は変更しなければならない場合がありますので、一度は必ず解析タグを確認しておきましょう。

参考:
サイトのhttps化が終わった後は、GoogleアナリティクスとSearch Consoleの設定をちゃんと変更しよう(ブログマーケッターJUNICHI )

その他外部連携サービス・広告

もし外部サービスを呼び出していたり、そこから情報を得ている、アドワーズやオーバーチュアなどのリスティング広告を利用している場合は、こちらのURLを確認の上修正します。

おまけ・印刷物

意外に忘れやすいのが、名刺を筆頭とした各種印刷物です。

設定をしておけば、別にhttpからアクセスされても自動でhttpsに移動してくれますが、それでもやっぱりモヤモヤするものでして、次回からはちゃんとURL表記を「https」にしておきましょう。

既存ホームページのhttps化は大変…?

いや、もう本当に大変だと思います。

小規模サイトであったり、ページ数が少ない、立ち上げて間もないなどであればまだ救いはありますが、中規模以上ともなってくると、1日2日で到底終わる作業ではないですし、相当な労力のかかる作業となるのは間違いありません。

しかし、トレンドはいつか一般化され、普遍的な物となっていく事を考えると、今のご時世では避けられない流れともなりつつあり、多くでhttps化については議論がなされています。

とは言っても、まだまだ情報は少なく、今すぐ導入を! と言う話ではないですので、後で困らないよう、今のうちに備忘録だけでも残しておこうかなと思う次第なのでした。


お問い合わせ

お気軽にご相談ください

お仕事のご相談、実績や料金などの詳細について、お気軽にお問い合わせください。

お問い合わせ・お見積もりのご依頼は下記フォームよりお願いいたします。
早期のご返事を心がけておりますが、やむを得ず遅延が出る場合がございます。予めご理解のほどよろしくお願いします。

お問い合わせ

※項目は全て必須となっております。全てご記入の上送信してください。

御社名(お名前)
メールアドレス
お問い合わせ種類 お仕事のご依頼事務所に関するご質問その他お問い合わせ
お問い合わせ内容
送信前のご確認 下記プライバシーポリシーの内容に同意します

プライバシーポリシー

PHI-WORKS(以下:当事務所)ではお客様の個人情報の取り扱いと保護について、『個人情報の保護に関する法律』および関連する法令ならびにその他の規範を遵守します。

個人情報の利用目的

当事務所は、お客様の情報を以下の目的で利用いたします。ここに定めのない目的で取得する場合は、お客様の個人情報を取得する時に、あらかじめ利用目的を明示して行います。

  • お客様からのお問い合わせに対応するため。
  • お客様からの見積もりのご依頼に対応するため。
  • お客様からご依頼を受けた業務遂行のため。
  • 当事務所の運営に必要な広報・営業活動を行うため。
個人情報の第三者への開示・提供の禁止

当事務所では、お客様よりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。

  • お客様よりあらかじめ同意を得ている会社に提供する場合。
  • 法令に基づく場合。
  • 当事務所および関連する企業・個人等の権利や財産が危害、損失を受け(もしくはその可能性が生じ)、これらを保護する必要がある場合。
  • 人の生命、身体又は財産の保護のために必要がある場合であって、お客様の同意を得ることが困難である場合。
  • 国の機関若しくは地方公共団体又はその委託を受けた者が法令の定める事務を遂行することに対して協力する必要がある場合であって、お客様の同意を得ることにより当該事務の遂行に支障を及ぼす恐れがある場合。
プライバシーポリシーの変更

プライバシーポリシーの内容は変更されることがあります。変更後のプライバシーポリシーについては、当事務所が別途定める場合を除いて、当サイトに掲載した時から効力を生じるものとします。


PAGE
TOP