この記事はエックスサーバー&WordPressでサイト作成した場合の話です。その他のサーバーを利用されている人やHTMLサイトを作っている人は他の記事を見た方が良いと思います。

また、今読んでもらっているこの記事は「ドメイン取得&追加」と「WordPressのインストール」が終わっている物として話を進めていきます。まだそれすら終わっていない人は先にこれらを実施してから戻ってきて下さい。

東雲です。

先日紹介したFXルーキーズは最初からhttps化した状態でサイト作成を進めようと思っています。こちらの記事でも書いたようにアフィサイトをSSL化しても問題なく成果は計上されます。

そこで、新規で作ったアフィリエイトサイトをhttps化する時の手順をまとめました。まとめたと言っても海外SEOブログの鈴木さんの記事の通りにするだけです。最初からhttpsで始めるととっても楽です。

やる事リスト

参考記事はこちらです。こちらの記事を合わせて読まないと私の記事は意味が分からないと思います。

ブログの完全HTTPS化を完了、HTTPからHTTPSへの移行プロセスを共有

上記ブログ記事では実行した作業として13個の作業を提示してくれています。コレですね。

  1. サーバー証明書の取得
  2. HTTPSへのリダイレクト
  3. 内部リンクの修正
  4. 各種ツール・パーツのHTTPS動作確認
  5. すべてのコンテンツがHTTPSでダウンロードされているかを確認
  6. WordPressの設定変更
  7. rel=”canonical”の更新
  8. ウェブマスターツールへの登録(否認ファイル含む)
  9. サイトマップの更新
  10. ソーシャルシェアの引き継ぎ
  11. HSTSの設定
  12. 外部リンクの更新
  13. 高速化

赤字にした項目は新規サイトの場合は考える必要が無いので割愛。最後の「3.内部リンクの修正」に関してだけ補足します。

なお、鈴木さんも記事の中で「2.httpsへのリダイレクト」は「5.すべてのコンテンツが~」終わってからで良いと書いているので普通の人はそうして下さい。

実際に私が作業している手順

実際に私が新規アフィリエイトサイトをhttps化した手順は以下の通りです。

  1. サーバー証明書の取得
  2. WordPressの設定変更
  3. 各種ツール・パーツのHTTPS動作確認
  4. すべてのコンテンツがHTTPSでダウンロードされているかを確認
  5. rel=”canonical”の更新
  6. HTTPSへのリダイレクト
  7. HSTSの設定
  8. Googleサーチコンソールへの登録
鈴木さんの手順に有る「13.高速化」に関しては、私の技術では大したことが出来ないので割愛しています。やるなら、サイトが育った後で、技術屋さんに外注してやってもらうのでも遅くないと思います。
以下、順番に実際の作業画面を載せつつ見ていきます。

1.サーバー証明書の取得について

SSLの証明書取得については下記記事で詳しく書いているのでそちらを参照して下さい。

エックスサーバーでのSSL証明書取得手続きの手順【図解付】-有料SSLの場合
エックスサーバーの無料独自SSLの取得手続きの手順【図解付】

なお、上記参考記事でSSL証明書を取得しさえすれば、エックスサーバー側でやることはもう有りません。あとはWordPress側での設定になります。

2.WordPressのURL設定

先ず、WordPressのURLをhttpsに設定します。最初からhttpsで運用するため後回しにする必要はないかなと思います。

「WordPress管理画面」⇒「設定」⇒「一般設定」をクリック。

設定-一般

WordPressをインストールした時は「http~」のURLになっているので、ここを下記画像のように「https~」から始まるURLに変更。そして保存して下さい。

特段何か理由がない限り「WordPress アドレス (URL)」も「サイトアドレス (URL)」もhttpsにします。

一般設定でhttpsに変える

変更を保存すると、再ログインを求められると思いますので、再ログインして下さい。

すると下記画像のようにSSL化に成功したことを示す緑の鍵マークが付いている事が分かります。

再ログイン後https化成功

WordPressの管理画面はどっか別のサイトからパーツをダウンロードしたりしている訳ではないので、基本的にはそのページのSSL化は成功します。

問題は公開URLではどうなっているか?です。WordPressのデフォルトテンプレート「Twenty Sixteen(2016年3月7日時点)」の場合、全てのコンテンツがhttpsでダウンロードされないので、公開URLではhttps化は上手く行きません。

クロームのデベロッパーツール(F12で呼び出し)のConsoleに問題点が表示されます。以下の通り。

httpsの問題

なぜかは分かりませんが、私の場合日本のはてなブックマークのデータがhttpsでダウンロード出来てないよ!という警告が。

この時点ではプラグインは何も有効化していないし、「Twenty Sixteen」にはてブがダウンロードされているとも思えない。はたまた私のChromeの拡張機能が悪さをしているのか?

と、色々悩みましたが「Twenty Sixteen」のテンプレートのままでサイト作成を行う人もいないと思うので、この時点ではスルーでOKだと思います。私の場合はテンプレートを変えたら上記の警告は出なくなりました。

3.各種パーツ等がHTTPS動作するかの確認

鈴木さんの記事では以下のようなものがhttpsの状態で動くかどうかチェックしたと書かれています。

  • Googleアナリティクス
  • ソーシャルボタン
  • AdSense
  • プラグイン
  • サイト内検索

アフィリエイトサイトの場合は「アフィリエイトリンク」もチェック対象になりますが、aタグに関しては問題なく動くのでアフィリエイトリンクの動作は大丈夫だと思います。

新規立ち上げサイトの場合は、AnalyticsもAdSenseもプラグインもhttpsに既にした状態で導入していくと思うので、特に問題は発生しません。

この中で面倒の物と言えば、ソーシャルボタンかもしれません。特にテンプレート付属のソーシャルボタンを利用している場合ですね。テンプレートをいじる技術が無い人は苦労するかも。

プラグインの「WP Social Bookmarking Light」でソーシャルボタンを表示させる場合は警告が出なかったので、テンプレ作者が対応してくれるまでは当面プラグインで対応した方が良いかもしれません。自分でイジれない人は。

4.すべてのコンテンツがHTTPSでダウンロードされているかチェック

まず、Chromeで全てのページで「緑鍵表示」されているかチェックします。緑の鍵の部分をチェックすると以下の様な画像が表示されます。

Chromeで証明書が認められているか確認

多分、この表示が出ればOK。「証明書の透明性に関する情報はサーバーから提供されませんでした。」という文言は非常に気になるところなのですが、鈴木さんのブログでも同じ文言が出てくるのでそこまでクリティカルな問題では無いのかなと思い放置しています。

この辺は、もうちょっとSSL化の情報を調べてから対応できるなら対応したいと思います。私の今の理解力では無理です。

あと、アフィリエイトサイトの場合はASPサーバーから取ってきているimgタグのURLがhttpスタートになっている場合は、エラーが出ます。各ASPのSSL化対応状況は以下の記事でまとめていますので、そちらを参照して下さい。

主要ASPのアフィリエイトリンクコードのSSL化対応状況【2016年1月時点】

ASPのimgタグがSSL対応されていない場合は、imgタグ及びimgタグを使わないようにすれば、問題なくアフィサイトでもhttps化出来ます。どうしてもASP(というか広告主)発行のバナーを使いたい場合は、SSL対応しているASPに移行するか、提供されているバナーを自分のサイトに取り込んで表示させるかです。

但し、バナーを自分のサイトに取り込んでしまうと、バナーが更新されませんので注意が必要です。(調べてないので分かりませんが、そもそも自分のサイトのimageフォルダにバナーを突っ込むのは規約違反かもしれません。やるときは規約調べてからやって下さい。)

5.canonicalの設定・更新

こちらは鈴木さんのブログ参照。WordPressだと自動でやってくれるはずなので、特にやる事は有りません。

6.HTTPSへのリダイレクト-7.HSTSの設定

「HTTPSのリダイレクト」と「HSTSの設定」はどちらも「.htaccess」ファイルを触るので一緒にやりました。詳細は鈴木さんのブログです。

こちらの記事では参考までに「エックスサーバーでPHP5.6.18」の時の「.htaccess」ファイルがこの作業でどうなるのか紹介します。「.htaccess」ファイルの内容はこの作業以外では触っていません。

.htaccessファイルの変更の仕方が分からない人はググッて調べてみてください。
■この作業をする前の.htaccessファイルの内容

serveridとなっているところには、皆さんのXserverのサーバーIDが入っているはずです。

■この作業をした後の.htaccessファイルの内容

serveridとなっているところには、皆さんのXserverのサーバーIDが入っているはずです。

これでhttpsへのURLへのリダイレクトとHSTS設定が完了しました。(残念ながら追記する部分が</ifmodule>の前で良いのか分かっていません。が、これで問題なく動作しているので大丈夫だと思います。)

「includeSubDomains; preload」の部分はGoogle Chromeのプリロード HSTSへ登録するための物です。

https://hstspreload.appspot.com/

上記URLをクリックすると以下の様な画面になります。

プリロードhsts

ここにドメイン名を入れてエンターを入力。「https://」の部分は不要です。ドメインだけでOK。

FXルーキーズでプリロードhstsを実践

上手く行くと下記画像のように「Thank you!」から始まる文言が出てきますので完了。

プリロードHSTSの登録完了

但し、上記画像の中に「That domain has been queued for review.Review can take several weeks. You can check the status by entering the same domain again in the future.」という文言が有りますね。

なんて書いてあるかというと「貴方のドメインはまだリストに載せるかどうかレビューしている段階です。数週間後にもう一度同じドメイン名を入力して、登録が完了しているかどうかステータスを確認して下さい」という事が書かれています。

1ヶ月後に見てみたら、以下のようにキッチリ登録されている事が分かりました。めでたしめでたし。

preloded

プリロードHSTSについてはWEB担の記事を参照の事。

HTTPSを使うなら“HSTS”と“HSTSプリロード”でセキュリティを高めよう

あと、一応自分でブラウザに「http」のURLを打ち込んで「https」のURLにリダイレクトされるかもチェックしておいて下さいね。

追記:プリロード HSTSの登録が少しだけ複雑化?

2016年11月に新たに登録しようとしたら、先程紹介したこちらの画面ではなく

プリロードHSTSの登録完了

下記のような画面が出てきました。

hsts-preload

同意書みたいなのが出てきます。2つ共にチェック。私の拙い日本語訳だと

・私は該当ドメインの所有者でHSTSに登録する権利を持っています
・サブドメイン等々へは有効なHTTPS証明書無しにアクセスされることは無いと理解しています?

的な。よく分かりません。また調べて追記します。青枠の「submit~~~」をクリックすると、下記のような画面が出てきます。

submit-preload

これで申請完了。数週間後にもう一度訪問してしっかりと登録されているかどうかチェックして下さい!

8.Googleサーチコンソール(旧:ウェブマスターツール)への登録

サーチコンソールへの登録に関しては下記記事を参照して下さい。

Google Search Consoleへのサイト登録の手順と最低限設定すべき項目

  • ①https://www.ドメイン名
  • ②https://ドメイン名
  • ③http://www.ドメイン名
  • ④http://ドメイン名

の4つを登録して、メインのURLでサイトマップを登録するだけなので、若干手間はかかりますが簡単です。

補足-内部リンクの修正について

searchconsoleヘルプのHTTPSでサイトを保護」ページによれば、HTTPSを使用する場合、内部リンクは相対URLを使用した方が良いようです。以下、引用。

同じ安全なドメイン上にあるリソースには相対 URL を使用します。たとえば、サイト example.com 上のページを参照するには、<a href="https://example.com/about/ourCompany.php"> ではなく、<a href="/about/ourCompany.php"> を使用します。

  • 絶対URL・・・https://example.com/about/ourCompany.php
  • 相対URL・・・/about/ourCompany.php
  • プロトコル相対 URL・・・//example.com/about/ourCompany.php

鈴木先生はプロトコル相対URLを使っているようですが、これ結構面倒ですね。WordPressでエディターのリンクボタンを利用する時って絶対URLになりますからね。

また、相対URLを採用するといつかのタイミングで一斉に内部リンクを変えなければならなくなった時に、何か規則性の有るURLを用いてないと大惨事が起こるような気がします。

例えば、投稿名のURLに必ず「post」という文言が入っているなら、それをキーにして内部リンクを探す事が出来るけど、そういう決まったURLがない場合には後々大変な事になるかもしれないという意味。まぁ、そういう事が起こる可能性は少ないと思いますが。

URLのssl化

そういう風に考えると「プロトコル相対URL」を利用するのが無難かもしれませんね。プロトコル相対URLを利用すれば必ず自分のドメイン名が入ってくるので、それをキーにして探す事が出来ますから。現実的には最初は絶対URLで記述しておいて、ある程度絶対URLを記載している記事が溜まってきてらsearch regexでプロトコル相対URLに一括変換が良いかもしれませんね。

私もちょっと何が良いのか考えてみます。なお、上記サチコのヘルプページでは外部ドメインへのリンクには「プロトコル相対URL」が望ましいと書かれています。少し面倒ですが、そのへんも意識してやった方が良いかもしれません。

とは言え、これをやっていないからといって順位が下がったり、中々順位が上がらなかったり・・・なんて事にはならないと思うので、面倒な方は絶対URLでも良いと思います。

終わりに

長くなってしまいましたが、最初からhttps化する場合の作業自体は非常に簡単です!一回通しでやれば、あとは5分程度もかからずに作業できるようになるでしょう。