SSL設定方法・手順を紹介。url書換からhtaccess転送まで

SSL設定の手順を紹介

HTMLサイトにおける常時SSL暗号化設定（以下SSL、https:へのURL変更を指します）の具体的な流れを紹介していきましょう。

SSL暗号化の種類

共用SSLと独自SSL

サーバー側が提供しているSSLには共用SSL・独自SSLとがあり、SSL認証にもいろいろなタイプがあります。

今までは共用SSLが主流

今まではサーバー全体に対して効果を発揮する共用SSLが主流であり、利用料金は無料のところが多かったのですがドメインに対して設定できるものではありませんでした。

ですのでSSLを利用するページはURLがドメインのURLではなくサーバーのURLに変わっていましたし、サイト所有者の身元保証もされていませんでした。

独自SSLは利用料が高額だった

それに対して独自SSLの場合、ドメイン認証単位でサーバー証明書を発行する事ができました。

ですのでSSLの利用時にアドレスが変わる事はありませんでしたが、高額な維持費が別途発生していました。

これは今でも、一番安いもので年に数万円程度は掛かっていると思います。

独自SSにLはドメイン認証・企業認証・EV認証など様々なタイプがあり、サービスによっては年間数十万円に上るものもあります（低額なサービスも登場しています）。

Let's Encriptで独自SSLが簡単利用できる

この高額な維持費が常時SSL化が進まなかった一番の要因なのですが、「Let's Encript」に代表される無料のSSLサービスがここに来て登場しました。

これにより一般的なWEBサイト（個人サイトやブログなど法人ではないWEBサイト）の常時SSL化が大きく加速しましたね。

ですのでここでは無料SSLを利用する事を前提にお話を進めていきます。

レンタルサーバーの設定例（Xserver）

まずはそのWEBサイトを載せているレンタルサーバー側にてSSL設定をおこなう必要があります。

この設定を先におこなわないとhttps:表示ができないので注意して下さいね。ここではエックスサーバーでの操作を例にとっています。

レンタルサーバーの設定ページ一例

エックスサーバーの場合はボタンを押すだけ

上記の様に無料SSLを設定するドメインを選択してSSL化のボタンを押すだけです。30分～1時間程度で反映がされます。

Xserverの場合特に「Let's Encript」などSSLの種類を選択する画面はありません。無料SSLを選択されすればサーバー側がやってくれます。

コントロールパネル上では「SSL設定が終了しました」と案内が出ない事が多いので、実際にhttps:にアドレスを変えてWEBページが見れるかどうかで確認してしまいましょう。

今まで部分的にSSLを利用している場合

以前までは部分的にSSL（共用SSLなど）を利用していた事もあったかと思います。例えばお問い合わせページのみサーバーのアドレスに変わりhttps:通信をしていたケースですね。

重複データは削除して通常のルートのみとする

今まではこの一部https:通信を実現するために、通常のHTMLの区画（ドキュメントルート）とは別にHTTPSの専用区画にページデータをUPしなければならないケースがありました。

これが「重複データ」と言われるもので、そこにお問い合わせ等のページファイル等を別個に設置していないとSSLが利用できなかったのです。

しかし無料SSLにより今まで利用していたドキュメントルートをそのまま使う事ができるので、SSL用に別の区画にデータをUPしたりする必要はありません。このあたりはすごく楽になりましたね。

SSL向けに重複設置していた箇所がある場合はこれを機に統合（削除）してしまいましょう。

SSLの確認

https:での表示ができるようになったら、ブラウザのアドレスバーに表示される鍵マークを確認しましょう。

Google ChromeやIEなどでは鍵マークが出ていればそのページがSSL暗号化されている事を表します。エクスクラメーションマークがついている場合は、SSL化が不十分という事ですね。

Google Chromeの鍵マーク

エクスクラメーションマーク

ページ内部できちんとhttps:による通信がされているかどうかで鍵マークがつくかどうかが決まります。

HTML/CSSファイルのurl書換

SSL化ができているかどうかは各ページ一つずつ確認する必要があります。ページによっては鍵マークがついていたり、別のページではついていなかったりしますので注意が必要です。

鍵マークが出ていない場合はそのHTMLページのソースを開き、上記の項目を中心に対象となる部分をhttp:からhttps:の記述に変更しましょう。

具体的には主に以下の項目をチェックしましょう。

チェックする項目タグ

<a>タグのhref属性…リンクパス
<link>タグのhref属性…CSSファイルやファビコン
<img>タグのsrc属性…画像パス
<script>タグのsrc属性…Javascriptの外部ファイルの参照先
CSSスタイルbackground-imageのurl… 画像の参照先
など

データをUPした後に再度ブラウザで確認をし、鍵マークがつくまでそれを繰り返す形ですね。

パス書換のポイント

上記のチェック項目にあるsrc属性やhref属性などのリンクやパスの記載にはいくつかの記述方法があります。

相対パスの場合

相対パスで記載をしている部分は、http:などのドメイン記述がなく

<a href="corp.html">
<img src="img/aaa.jpg">
などで始まっているでしょうから、ここはそのまま変更しなくてOKです。

サイトルート相対パスの場合

Webサイトのドキュメントルートの位置（ドメイン名TOPの位置）を基準にしたパスの記述方法です。

<a href="/corp.html">
<img src="/img/aaa.jpg">
など、最初が「/」スラッシュから始まるのが特徴です。これもそのまま変更しなくて大丈夫です。

絶対パスの場合

WebサイトのURLを全て記述してページやファイルを指定した記述方法です。

<a href="http://example.com/corp.html">
<img src="http://example.com/img/aaa.jpg">

この絶対パスを使っている時は変更の必要があり、http:をhttps:に変更しなければなりません。

上記の相対パスや絶対パスが混在している書き方は本来よくありませんので。全体の表記を相対パスなら相対パスにするなど、どちらかに統一しておくべきだと思います。

CSSファイル内の確認

スタイルシートファイル内も確認をしましょう。「background: url();」などの背景画像読込のところで絶対パスを使っている場合は、上記と同様に変更が必要です。

外部リソースへのパスについて

GoogleフォントやjQuery・YouTubeなど外部サーバーからリソースを読み込んでいる場合は、その配信元がHTTPSに対応しているか確認しましょう。

ソーシャル系のボタンやアフィリエイト・広告系のタグも同様です。仮に対応していない場合は残念ながらSSLが実現できません。

プロトコルの省略

httpsに対応していれば、読み込みのパスなどのプロトコル部分を必要に応じて書き換えましょう。

プロトコル名はあってもなくても基本的には同じですが、プロトコルに左右されない省略した記述の方が一般的になってきているようです。

プロトコルを記述

<link href="https://google.com/css/style.css"
rel="stylesheet" />
<iframe src="https://www.youtube.com/～"></iframe>

プロトコルを省略（https:を書かない）

<link href="//google.com/css/style.css"
rel="stylesheet" />
<iframe src="//www.youtube.com/～"></iframe>

https通信に一本化する

修正と確認を繰り返して、全ページに鍵マークがつくようになったらSSLは完了しています。

ただしここで忘れてはいけない事があります。今までWEBサイトはhttp:での表示でしたよね。

今までの記録や価値は全て「http」のまま

Googleで表示される検索結果もお気に入りの登録もメールや名刺に記載したURLも全てhttp:のままになっているはずです。

現時点ではhttp:でもhttps:でも表示する事ができます。

https:での表示にきちんと暗号化できているかどうかを鍵マークで確認しただけで、http:の元の状態でもサイトはきちんと表示されます。

これを最終的にはhttps:の方だけに一本化しなければなりません。

httpsのみの通信へ変更・引継ぎ

しかもhttp:の際にそれまで獲得していた検索順位などの「サイトとしての価値」はそのまま引き継がなければなりません。

では具体的にはどうするのか。それはズバリ「http:にアクセスがあったら全てhttps:側に転送してしまう」設定をするのです。

http:にアクセスがあったら全てhttps:側に転送

そうすればhttp:のURLを打っても強制的にhttps:に瞬間的に飛ぶのでユーザーは違和感がないし、ブックマークなど登録をしているURLを変更してもらう必要もありません。

Googleからも検索クロールされれば反映されます。しばらくすればhttps:での検索表示に変わってくれます。

.htaccessファイルの転送設定

ここでは.htaccessファイルを設置してそこに転送設定を記述する（例）をご紹介します。

.htaccessファイルの設置については別ページをご参照下さいね。

記述の仕方：下記の様に書くだけです。

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

上記をそのままコピーしてもらって構いません。もし仮に上記で上手くならなかった場合は.htaccessの書き方がネットにたくさんありますので参考にされてみて下さい。

あわせて読みたい関連記事

Googleへの打診を忘れずに

https:にした後はその事をきちんとGoogleに伝えておくべきです。

サイトマップをhttps:向けに別に用意してアップする事（https:でのデータに切り替わるまで前のは削除しないで下さい）。

Google Search Consoleに対しhttps:向けのプロパティを追加する事などが必要です。

一押し人気コーナー紹介