2018/07/06

メニュー

最近、TAG indexの常時SSL化(https化)を行いましたので、その作業手順をメモとして残しておきたいと思います。

常時SSLについて

無料の常時SSL

独自SSLには、お手軽料金(数千円/年)で利用できるものから高額(十数万円/年)なものまで、いくつかの種類が用意されています。また、サーバーによっては無料のSSLを用意してくれている場合もあります。

幸い、TAG indexが利用しているサーバー(コアサーバー)では無料のSSLが用意されていたので、今回はそのサービスを利用して常時SSL化を行うことにいたしました。

常時SSL化のメリット

まず、通信が暗号化されるためサイト利用者の安全性が向上します。

そして、Googleの検索エンジンにてサイトの評価が多少は高まると言われています。(掲載順位に影響する可能性があります)

常時SSL化を行わないとどうなる?

Google Chromeでアクセスした際に、アドレスバーに保護されていませんといった警告メッセージが表示されます。

アドレスバーに警告が表示された状態のスクリーンショット

Chrome 67の表示例。入力フォームが設置されたページにてこの警告が表示されますが、Chrome 68からは保護されていない全てのページでこの警告が表示されるとのこと。
  • 趣味のサイトならともかく、信頼性が求められる事業者のサイトではこの警告は避けたいところです。

SSL化を完了すると鍵マークが表示されます

無事にサイトのSSL化が完了すると、保護されていることを示す鍵マークがアドレスバーに表示されるようになります。

アドレスバーに鍵マークが表示された状態のスクリーンショット

Chrome 67の表示例。

ソースコードの修正

SSL化を行うと、サイトのURLが http://~ から https://~ に変更されます。

サイト内のリンクを http で始まる絶対URLで指定している場合は、その箇所を https に書き換えておきます。(相対URLで指定している場合はそのままで大丈夫です)

  • 後述するリダイレクトの設定を行っている場合は、http のままでもリンク先にアクセスすることは可能です。
http://www.example.comhttps://www.example.com

または、http: の部分を省略して次のように記述することもできます。

//www.example.com

画像、CSS、JavaScriptなどのファイルを絶対URLで指定している場合にも、上記と同じようにURLの書き換えが必要です。(HTMLだけでなく、CSSファイルのソースコードもチェックしておきましょう)

また、sitemap.xml(サイトマップ)を設置している場合には、その内容のURLも書き換えておきます。

外部のコンテンツを埋め込んでいる場合

外部サービスのコンテンツ(広告等を含む)をページ内に埋め込んでいる場合は、そのコンテンツがSSLで保護されているかどうかを確認してください。

  • コンテンツのURLが https で始まっている場合は、そのまま使用することができます。
  • コンテンツのURLが http で始まっている場合は、https に書き換えてテストしてみてください。(エラーや警告が出る場合は、そのコンテンツの使用中止を検討してください)
  • http: が省略されているURLの場合は、たぶんそのまま使用することができます。

保護されていないコンテンツを埋め込むと…

SSLで保護されたページは、読み込む全てのコンテンツがSSLで保護されている必要があります。

保護されているページ内に保護されていないコンテンツを混在させると、そのページにアクセスした際にアドレスバーの鍵マークが消え、サイト情報内に次のような警告文が表示されてしまいます。

「このサイトへの接続は完全には保護されていません」

Chrome 67の表示例。

サーバーの設定

TAG indexではコアサーバー(CORE-A)を利用しているので、同サーバーの設定方法について説明させていただきます。(系列サーバーのXREAでも同じように設定できます)

  • 他のサーバーを利用している方は、そのサーバーのマニュアルに従って設定してください。
  • 以下は、既に設定済みのドメインに対して無料SSLを導入する場合の説明です。新規に設定する場合はコアサーバーのマニュアル(無料SSLの新規設定)を参考にしてください。

設定の手順

  • 設定を開始する前に、マニュアルの注意事項をお読みください。
  1. 管理画面にログインしてサイト設定をクリックします。

  2. サイト設定の画面にて設定変更アイコンをクリックします。

    ドメイン名などが並ぶ管理画面のスクリーンショット

    上記の画面を開いた際、サイトのドメインがMainの項目に表示されている場合があります。その場合は、Mainの項目をblankにし、サイトのドメインをSubに移動しておく必要があるようです。(マニュアルの注意事項を参照してください)

    旧コンパネで見ると次のような構成になります。(新しい管理画面での移動方法が分からなかったため、私は旧コンパネを使って以下のように移動させました)

    ドメイン名などが並ぶ管理画面のスクリーンショット(Main:blank、Sub1:tagindex.com→http://www.tagindex.com/、Sub2:www.tagindex.com)

  3. サイト設定の変更画面が表示されるので、SSLの項目で無料SSLを選択してからサイト設定を変更するボタンをクリックします。

    以上で、サーバーの無料SSLの設定は完了です。

    設定を完了すると、サイト設定画面のSSLの項目に無料SSLと表示されるようになります。

    旧コンパネでは次のような構成になりました。

    ドメイン名などが並ぶ管理画面のスクリーンショット(Main:blank、[SSL用ドメイン]、Sub6:tagindex.com→http://www.tagindex.com/、Sub7:www.tagindex.com)

設定を完了してからしばらくすると、https://~ のURLでアクセスできるようになります。(混雑状況により時間を要する場合もあるそうです)

リダイレクトの設定

サーバーの設定が完了したら、次にリダイレクトの設定を行います。

これは、http://~ のURLに対するアクセスを、https://~ のURLに転送するための設定となります。

リダイレクトの設定にはいくつかのやり方がありますが、ここでは.htaccessを使った方法を説明させていただきます。

  • サーバーによっては .htaccess を使えない場合があります。(あまりないケースだとは思いますが)
  • mod_rewriteモジュールが利用できる必要があります。

まず、リダイレクトの記述内容は次のようになります。

<IfModule mod_rewrite.c>

RewriteEngine on

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

</IfModule>

重要:URLの部分(https://www.example.com)はご自分のサイトに合わせて書き換えてください。

コードの内容を簡単に説明しますと、

  1. mod_rewriteモジュールが利用できる場合は、
  2. Rewrite機能をONにして、
  3. HTTPSではないアクセスを、
  4. https://www.example.com に301リダイレクトする。

という指定になります。

既に .htaccess ファイルが設置されている場合

既存の .htaccess ファイルがある場合は、そのファイルを開いてリダイレクトの設定内容を追加で記述してください。

新規に .htaccess ファイルを作成する場合

新規に設置する場合は次のように作成してください。

  1. メモ帳などで新規のテキストファイルを開く。
  2. ファイルの内容にリダイレクトの設定内容を書き込む。
  3. .htaccess というファイル名で保存する。(頭のドットを忘れないように)
  4. そのファイルをWebサイトのルートディレクトリ(トップページが置かれている場所)にアップロードする。

参考

.htaccess ファイルの内容は、最後の行に改行を入れて終わらせてください。

また、私は経験したことがありませんが、ファイルの文字コードや改行コードによっては、サーバーエラーになってしまう場合があるそうです。

その他のリダイレクト

今回の設定には直接は関係していませんが、ついでなのでその他のリダイレクトと組み合わせた例を紹介させていただきます。

<IfModule mod_rewrite.c>

RewriteEngine on

RewriteCond %{HTTP_HOST} ^example\.com$
RewriteRule ^(.*) https://www.example.com/$1 [R=301,L]

RewriteCond %{THE_REQUEST} ^.*/index\.(html|php|shtml)
RewriteRule ^(.*)index\.(html|php|shtml)$ https://www.example.com/$1 [R=301,L]

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

</IfModule>

上記は、2行ごとに3種類のリダイレクトを設定したものになります。(TAG indexでも同様の設定を行っています)

1つ目は、www なしのURLにアクセスされた場合に www ありのURLへリダイレクトする設定。

2つ目は、~/index.html、~/index.php、~/index.shtml にアクセスされた場合にファイル名を省略したURLへリダイレクトする設定。

3つ目は、今回説明したリダイレクトとなります。

重要:URLの部分はご自分のサイトに合わせて書き換えてください。

アナリティクスの設定

Google Analyticsを利用している場合は、その設定内容を変更しておきます。

設定の手順

  1. 管理画面にログインして管理をクリックします。

  2. 表示された画面内でビューの設定をクリックします。

  3. ビューの設定画面が表示されるので、ウェブサイトのURLの項目でhttps://を選択してから保存ボタンをクリックします。

    以上で、アナリティクスの設定は完了です。

サーチコンソールの設定

Google Search Consoleを利用している場合は、https://~ のURLを新規に登録する必要があります。(http:// と https:// では別サイトとして扱われるため)

登録の手順

  1. 管理画面にログインしてプロパティを追加をクリックします。

  2. 表示された入力欄に https://~ のURL入力し、追加をクリックします。

  3. 所有権の確認画面が表示されるので、その画面内に記載されている方法で所有権の確認作業を行ってください。(いくつかの確認方法が提示されますが、TAG indexではHTMLファイルをアップロードする方法で確認作業を行いました)

    最後に確認ボタンをクリックして確認作業を完了させます。

    以上で、URLの登録が完了します。

上記の作業を行うことでサーチコンソールへの登録はひとまず完了しますが、他にwwwありなしの統一sitemap.xmlの登録クロールのリクエストなどを行いたい方は、以下を参考に作業を進めてください。

wwwありなしの統一

この設定は、Googleの検索結果において、URLをwww付きで表示するかどうかを指定するものになります。

  • wwwの有無をどちらかに統一しておくことで、検索パフォーマンスが改善されることもあるそうです。
  • この指定内容は、実際のURL(wwwの有無)に一致させなければなりません。(実際のURLにwwwが付く場合は、この設定でwwwありに統一しておきます)

この設定を行うためには、1つのサイトにつき2つのURL(www付きのURLとwwwが付かないURL)をサーチコンソールに登録しておく必要があります。そのため、まずは先ほどの登録の手順に沿って2つのURLを登録しておいてください。

URLなどが並ぶ管理画面のスクリーンショット

https://~ のURLを2つ登録した例。実際には http://~ のURLも2つ登録されているので、tagindex.com には計4つのURLが登録されていることになります。(http://~ のプロパティは移行が完了した後に削除します)

URLの登録が完了したら、以下の手順に進んでください。

  1. サーチコンソールのメイン画面を開き、対象となるURLをクリックします。

  2. 表示された画面内で歯車アイコンをクリックし、サイトの設定をクリックします。

  3. 使用するドメインの項目で、優先するURLを選択します。(TAG indexではwww付きのURLを優先しています)

    以上で、統一の設定は完了です。

sitemap.xml(サイトマップ)の登録

サイトマップを設置している場合は、URLを書き換えた(http → https)新しい sitemap.xml を作成し、それをWebサイトのルートディレクトリ(トップページが置かれている場所)にアップロードしておきます。

参考までに、sitemap.xml の書式は次のようになります。

重要:URL(青文字)の部分はご自分のサイトに合わせて書き換えてください。

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 

<url>
  <loc>https://www.example.com/</loc> 
</url>
<url>
  <loc>https://www.example.com/aaa/</loc> 
</url>
<url>
  <loc>https://www.example.com/bbb/</loc> 
</url>

・
・
・

</urlset>

sitemap.xml のアップロードが完了したら、以下の手順に進んでください。

  1. サーチコンソールのメイン画面を開き、対象となるURLをクリックします。

  2. 表示された画面内でメニューのクロールをクリックし、サイトマップをクリックします。

  3. サイトマップの追加/テストをクリックすると入力欄が表示されるので、そこにsitemap.xmlと入力して送信ボタンをクリックします。

    以上で、サイトマップの登録は完了です。

クロールのリクエスト

https://~ のページをできるだけ早くクロールしてほしい場合には、こちら側からリクエストすることができます。

  • このリクエストは、すべての設定が完了した後に行ってください。
  1. サーチコンソールのメイン画面を開き、対象となるURLをクリックします。

  2. 表示された画面内でメニューのクロールをクリックし、Fetch as Googleをクリックします。

  3. 表示された画面内で何も入力せずに取得をクリックし、その後に表示されるインデックス登録をリクエストをクリックします。

  4. 送信方法の選択画面が表示されるので、このURLと直接リンクをクロールするを選択して送信ボタンをクリックしてください。

    以上で、クロールのリクエストは完了です。