静的htmlサイトのSSL化とWordPress化をした時の備忘録(小規模サイト)

目次

サイトをリニューアルした振り返りをしてみる

このたび、サイトをSSL化およびWordPress化しました。開設以来、モバイルページの追加こそ行いましたが、本格的なリニューアルに着手するのは初めてなので、およそ8年ぶりの総取替プロジェクト、ということになります。移行にあたって、試行錯誤を繰り返し、ようやく着地点が明確になってきた、ということで、自分の備忘録も兼ねて記事にしてみました。もしかしたら、同じように考えている方の参考になれば幸いです。ただ、最初に言っておきますが、サイトリニューアルは、サイトの調子が良い(検索流入などが上がり調子である)時期には、当たり前ですがやらないほうがいいです。当サイトのように、落ち目になってきたサイトが逆転を目指す時にこそ効果的な方法かと思います。リスク覚悟で実施するのはよいかもしれませんが、SSL化にしても独自ドメインにしても、実施したことで目立って検索順位が上がるわけではありませんので、そのあたりは留意するようにしてください。あと、移行直後は設定ミスで500エラー(Internal Server Error)が頻発しており。リソースもかなり食っていたようなので、利用者の皆様にはご迷惑をお掛けいたしました。

リニューアルするサイトの規模感

htmlページが20ページほど(PC・モバイルでそれぞれページがあったので合計40ページ程)の静的コンテンツメインのサイトです。まぁ、このサイトの前身ですね。

リニューアルの動機

このサイトは、もともとはさくらのレンタルサーバサービスで運営しており、その初期ドメインで公開をしてきましたが、開設から数年経過し、近年のセキュリティ意識の高まりから、SSLを導入していないサイトは以下の図の通り、保護されていない通信のため危険だという表示までブラウザに出るようになってしまいました。

図1.Google Chromeに出るSSL非対応通信の警告

また、サイトは長らくタグ直打ちという極めて雑な方法で作成していました。語弊がありそうなので補足すると、決してタグ打ちが悪だというわけではありません。完璧なコードを書けるなら、特に当サイトのような更新頻度が低い静的コンテンツを見せることが主のサイトにおいては、処理速度も最速で今でも理想のWeb作成の方法だと思っています。しかしながら、当サイトの運営は趣味の延長です。そこに生活のすべてを掛けて作業の時間を割くわけにもいかず、とりあえず体裁が整って読めれば良いという割り切りで記述をしていたために、恐らくは誤っていたり、古い規格のコードがそのまま放置されていました。個人の趣味レベルで誰の目にも触れないページなら良かったのですが、数年ほど前から特定のページについては検索流入が大幅に増え、当サイトの記事をわざわざ読みに来ていただける方にも申し訳ない、という気持ちから、記事の内容こそ時々見直してはいましたが、今回はサイト全体のデザインも含めて大幅リニューアルを敢行することにしました。

リニューアルの目的

今回のリニューアルの目的は4点

  1. サイトをSSL対応にする
  2. 独自ドメインによる運用にする
  3. 人の手によるタグ打ちは大幅に減らす
  4. PC・モバイルともに閲覧できるレスポンシブデザインとする

上記目的を達成するためのリニューアル方針案

(1) SSL化対応方式の検討
さくらのレンタルサーバは、無料でSSLを使用でき、証明書も自動更新されるため、ほぼワンタッチで移行できることがわかりました。個人サイトであれば、無料SSLで十分と考えたので、現行サービスのうえにこれを採用することにします。おそらく、他のホスティングサービスでも似たような感じかと思います。
(2) 独自ドメイン運用
については、さくらのレンタルサーバで独自ドメイン取得が可能で、連携により簡単に反映できることから、これも現行のサービスに追加で採用することにしました。これも、大体のホスティングサービスではオプションで追加できるはずです。
(3) タグ打ち解消とレスポンシブデザインの実現
これはCMSツールを使用することで解決できると考え、鉄板ともいえるWordPressを採用することにしました。どうもイメージでは、日々更新をかけるようなブログサイトで使われているようなイメージだったのですが、私の使い方であれば準用しても問題はなさそうだったので、採用することにしました。逆に、ブログ的な記事を気軽に書くこともできるようになるので、それもメリットに感じました。これまでのhtmlは、1つ新しい記事を追加するたびに、そのページにリンクする全てのページを修正する必要があったので、新たな記事を作るというのは相当な労力だからです。

これら4点に加えて、既存ページの検索エンジンからの評価についても、引き継げるものは引き継ぐ必要があります。落ち目とはいえ、特定のキーワードで検索の1ページ目に出るようなページの評価を捨てるのは、勿体ないので。

なんとなく方向性は決まりましたが、WordPressは使い方がさっぱり分からずだったので、とりあえずすぐに対応できそうなhtmlサイトのSSL化から行い、その後準備が整い次第、WordPressに移行するという手段をとることにしました。いよいよ始動です。

いよいよ始動!実際の移行作業

本記事での注意事項

いよいよ実行に移していきます。ただし、この手順で行ったところ、手順④でリダイレクトの考慮漏れがあり、そのせいか検索結果が一部重複するというミス(?)がありました。こうなると、重複サイトとしてペナルティを受ける可能性もあります。以下の手順は失敗含みの手順となることをご承知おきください。また、移転後のSEO対策についても、ネットで調べて自分なりに行った内容となります。本当に正しい方法だったのかは分かりません。検索順位が移転前より大きく動いてしまった、とかはなかったので、こういうやり方で、とりあえず移転できる、くらいの感覚で見てもらえるとありがたいです。

移転手順の概要について

  1. 手順① サイトリニューアルの強い意志をもつ
  2. 手順② 独自ドメインを取得する
  3. 手順③ 取得したドメインにSSL証明書を割り当てる
  4. 手順④ .httaccessによる301リダイレクト設定を行う
  5. 手順⑤ サイトの動作チェックを行う
  6. 手順⑥ 鮮度の落ちたコンテンツのリライトおよび削除を行う
  7. 手順⑦ httpからのコンテンツ読み込みを確認する
  8. 手順⑧ 検索エンジンに移行後のサイトを周知する
  9. 手順⑨ 広告サービスの再申請を行う
  10. 手順⑩ Wordpressをインストールする
  11. 手順⑪ WordPressにテーマを適用する
  12. 手順⑫ WordPressの管理画面から、既存htmlサイトの記事を移行
  13. 手順⑬ 再度、.httaccessによる301リダイレクト設定を行う

実際の移行手順

手順①:サイトリニューアルの強い意志をもつ。(所要時間:∞)

冗談じゃなくこれが一番重要です。ひとたび手を付けたら、もはや後戻りはできません。煩雑な作業、謎のトラブル、検索順位の低下などのリスクは様々なサイトで既に周知されている通りです。この先待ち受ける幾多の困難や作業に立ち向かう勇気が出たら、進みましょう!

手順②:独自ドメインを取得する(所要時間:1時間)

独自ドメインとは何か。という問い大して明確な答えを出すことができませんが、分かりやすい例えとしては、日常生活をするうえでの「住所」を考えてもらうと分かりやすいのではと思います。その中で、独自ドメインのURLは「一戸建て」で、そうでないサブドメインを使っているURLは「集合住宅」と考えてもらうと、分かりやすいのではと思います。例として、このサイトでは「shinkansen-travel.info」というドメインを取得しました。これは世界に唯一の住所であり、他の人は同居していません。一方で、以前までのさくらのサブドメインは「xxx.sakura.ne.jp」でした。「xxx」こそ固有の名称が入っていましたが、それ以降は集合住宅の住所である「sakura.ne.jp」が入っています。今回、独自ドメインを取ることで、表向きは一切「sakura.ne.jp」という「集合住宅」の住所は出なくなりました。

さて、本題に戻りますが、初期ドメイン(サーバ事業者のドメイン名)を使っているのであれば、SSL化のタイミングで独自ドメインへ移行したほうが良いかと思います。また、さくらインターネットではそもそも独自ドメインにしなければSSLが使えませんので、この対応は必須だといえます。SSL化も独自ドメインも、ページのURLが変更となる対応であるため、ある程度のアクセス件数を稼ぐサイトでは、検索の順位に大きなインパクトを与えるリスクがあります。そのリスクを最小限に抑えるため、現在独自ドメインを使っておらず、SSL化もしていないのであれば、この際まとめて行ってしまいましょう。ドメインの取得は、使用しているホスティングサービスのサイトに詳しいことがあると思います。

参考 さくらのドメインさくらインターネット

外部で取得したドメインを持ち込むことも可能ですが、新規取得にあたっては連携などを考えるとあまりメリットはありません。さくらインターネットの場合は、マイページにアクセスし、そこから取得まで簡単に進めることができました。独自ドメインのメリットは、なんといっても唯一無二の自分だけのURLを持つことができるようになることです。そう聞くと、ドメインってお高いんでしょう?と思うかもしれませんが、.com .net .infoなどのドメインであれば、年間2,000円程度で持つことが可能です。ドメインが有効化されると、「http://ドメイン名.com」のようなアドレス形式でアクセスできるようになりますので、サイトの内容に即したドメインをつけることで、ユーザーからも信頼が置けるサイトとなります。

手順③:取得したドメインにSSL証明書を割り当てる(所要時間:10分)

いよいよSSLを有効にします。さくらインターネットはサーバコントロールパネルからSSLを有効化するだけで使用できるようになります。SSLを有効にしても、既存の初期ドメインが付与されているページにhttpでアクセスできなくなるわけではないので、設定をしたところで現在見ることのできるサイトには特に影響はありません。進めましょう。

ちなみに、さくらインターネットでの設定方法は、以下を参照しました。

参考 【無料SSL】サーバコントロールパネルからの導入手順さくらインターネット

手順④:.httaccessによる301リダイレクト設定を行う(所要時間:60分)

注意
ここの手順でリダイレクト設定に失敗しました。独自ドメイン化とSSL化を同時にやる方は注意願います。

手順③で、httpでアクセスできなくなるわけではない、と書きましたが、裏を返すと、何もしなければいつまで経っても訪問者はhttpでアクセスしに来ることになります。そういった訪問者に対して、特に意識させることなくhttpsサイトへ誘導する必要があります。また、これが特に大事なのですが、既存ページが既にたくさんの被リンクを獲得していた場合、リンクして下さっている方に、新しいURLを通知して張りなおしてもらう…ということは現実的ではありません。
そのような場合に使うのが、既存のURLにアクセスしながらも、意識することなく新しいURLへと転送させる仕組みがあり、これをリダイレクトといいます。これはユーザー目線と、検索エンジン目線の双方から必要になります。リダイレクトを適切に設定しないと、前述のhttpサイトへのアクセスが続いてしまうばかりか、SSL化したページと既存のSSL化していないページが重複していると見なされ、検索においてペナルティを受ける可能性もあります。これを防ぐために、「.htaccess」ファイルによる「301リダイレクト」を行います。リダイレクトについている「301」というコードは、検索エンジン向けに「ページが恒久移転した」ということを周知することができます。これにより、検索エンジンは、古いページから新しいページにインデックスを修正します。また、301リダイレクトによる移転は、元のページの評価を引き継ぐという特性があるので、これをやっておかないとまっさらな評価で出直すことになります。むしろ前述の重複サイトとしてマイナスになります。
リダイレクトの記述方法は、包括的に解説された詳しいページがあるため割愛しますが、リダイレクトのルールを記述したテキストファイルを作成し、最上位のディレクトリにFTPソフトで配置するだけなので、さほど難しくはありません。階層構造に変化がなく、https化と独自ドメインのURLにリダイレクトするだけであれば、数行程度の記述で済みます。今回は既存ページをそのままSSL化するだけですので、特に記述量が多くもなりませんでした。ただ、次のステップではWordPressに記事を移植します。その際にあえてURLは変更しようと考えているので、ほぼページ単位にリダイレクトルールを記載する必要が出てくると思われます。

参考 サイト移転に必須!!301リダイレクトの為の.htaccess書き方5選FASTCODING BLOG

ただし、ここで私は、初期ドメイン(http)から独自ドメイン(https)のリダイレクトは設定しましたが、独自ドメイン(http)から独自ドメイン(https)のリダイレクトを失念していました。普通に考えたら分かる話ですが、すっかり頭から抜けていました。失敗談についてはまた別で記事にしたいと思います。

手順⑤:サイトの動作チェックを行う(所要時間:規模による)

.htaccessファイルをアップロードしたら、サイトへアクセスしたり、リダイレクトチェッカーで正しく反映されているか確認しましょう。サイトへアクセスして確認する場合は、ブラウザのキャッシュを消してからでないと古いサイトが表示されることがあります。また、リンク切れが無いかも併せて確認します。

リダイレクトチェック以下のURLで簡単に可能です。複数回のリダイレクトがあれば、5回まで追跡してくれます。

参考 リダイレクトチェッカーツールWEB便利ツール@ABASHI

手順⑥:(任意)鮮度の落ちたコンテンツのリライトおよび削除を行う(所要時間:規模による)

特に情報提供系のサイトでは重要となります。情報の鮮度が落ちていると、この後行う広告サービスへの再申請時に不利に働く(質の悪いコンテンツとして認識される)可能性があります。それ以前に、サイト運営者として訪問者に正しい情報を提供しなければならず、ユーザーファーストという視点から、古いコンテンツも見直しを行い、最新の情報を反映できるようにしておくのが望ましいと思います。

手順⑦:httpからのコンテンツ読み込みを確認する(所要時間:規模による)

小さい…

サイトをSSL化することで、アドレスバーに「鍵マーク」は出るようになったかと思いますが、アドレスバーの右端に、このように気になるアイコンが出ていることがあります。これはChromeですが、何やら危なげなアイコンです。

これは、SSL化しているにも関わらず、保護されていない通信(http)により読み込むコンテンツが存在していることを示しています。発生する理由としては、主に絶対パスで画像パスなどを指定している場合、そのパスがhttpsからのパスになっていないことが考えられます。ちなみに、Chromeの場合、このアイコンをクリックして保護されていないコンテンツを表示するようにすると、アドレスバーの「https://」の部分が赤色となり、一目で危険であるというような見た目となります。

これは視覚的に「いかにも危ないサイト」っぽい。

正直この状態は、httpサイトの「保護されていません」よりも視覚的に強烈になってしまうため、何とか原因を探し出す必要があります。

手順⑧:(任意)検索エンジンに移行後のサイトを周知する(所要時間:30分程度)

たかがSSL化とはいえ、URLが変更になるということは、検索エンジンから見たら「まったく別のサイト」に見えます。よって、Googleなどの検索結果に反映されるためには、検索エンジンのクローラーが巡回してきてその結果を反映してからでないと、表示されません。特に何もしなくても、ここまで行ってきた作業をしていれば、クローラーが既存サイトを巡回してきたときにリダイレクトにより移転を察知し、適切に検索結果に表示してくれるようになりますが、そうなるまでに非常に時間がかかることがあります。このため、グーグルのサーチコンソールにサイトを登録したり、サイトマップを再送するなど、新しいページを認識させてあげる必要があります。一刻も早くアクセス件数を回復したい場合には、実施してみると良いでしょう。

手順⑨:(任意)広告サービスの再申請を行う

当サイトでは、ある一定のアクセス数があることが分かってからはグーグルアドセンスを貼っています。しかし、ドメイン移転を行った場合、再度審査を受ける必要があるということが分かりました。これまで特に問題なく運営してきているので、特に問題はないだろうと思いましたが、申請してから同じような境遇の人のブログなどを見てみると、意外と最申請でポリシー違反などで引っかかっている人がいるようです。特に、記事数が増えていくと、どれがポリシー違反のページなのか、見当もつかないようです。

とりあえず、作戦としては、今すでにアドセンスを貼ることができている構成のまま、一旦審査申請を行い、審査が終わり次第WordPressに置き換えていくことにしました。そして、この期間は、永遠のように長く感じられる時間でもあります。審査状況のページにも、「通常は1日足らずで完了」と書かれているにも関わらず、1日どころか2日、3日経っても連絡はありません。ネットで調べると、申請した人のブログというのは星の数ほどあり、「すぐに通った」という人から「2週間かかって落ちた」という人まで、ほとんどバラバラな状態でした。しかし、2週間かかって落ちた、となると、精神的に相当ダメージがありそうです。

審査の申請をしてから6日間、ステータスは常に「承認手続きを進めています」でした。他のブログなどを見ていると、すぐに「審査中」に変わるとありましたが、どういう基準なのでしょうか。もしかして申請してから忘れ去られているのかと思い、サイトの申請を削除をして再送信したくなる気持ちもありましたが、申請ページに、「削除しないでくれ。遅くなるから」と書いてあったのでぐっと抑えて待っていたところ、7日目の夕方ごろ、グーグルからメールで承認の連絡がありました。大幅なサイトの変更は行わずに、コンテンツのリライトとプライバシーポリシーのページの新設のみを行った状態でしたので、本格的なリニューアルはやはりアドセンスの審査申請が終わってから実施するべきでしょう。

手順⑩:WordPressをインストールする

審査を待つ間、最終的な移行先となるWordPressをサーバーにインストールします。さくらインターネットは、簡単にWordPressのインストールが可能です。他のホスティングサービスをご利用の方も、ルートディレクトリではなく、サブディレクトリにインストールするということだけ気を付けておけばよいかと思います。だいたいのホスティングサービスでは、インストール手順があるはずです。

参考 【WordPress】独自ドメインでWordpressをインストールするさくらのサポート情報

また、インストール後から手順⑫が終わるまでは、作業中のページがインデックスされないようにしておきましょう。ダッシュボードの「設定」⇒「表示設定」から、「 検索エンジンがサイトをインデックスしないようにする 」にチェックを入れておきます。

手順⑪:WordPressにテーマを適用する

有料・無料を問わず、たくさんのテーマがあります。サイトがある程度できてしまうと、変更する際に不具合が出ることもあるので、長く使うつもりで慎重に選びましょう。

手順⑫:インストールしたWordPressの管理画面から、既存htmlサイトの記事を転載・リライトする

htmlサイトの記事をWordPressに書き起こします。そのままコピペ、と思いきや、それだけだとレイアウトが崩れたりすること必至なので、WordPress用に編集しなおしてやる作業が発生するはずです。ちなみに、静的サイトからの移行では「固定ページ」を使いなさい。と解説するページもありますが、記事の性質次第だと思います。htmlサイトでも、ブログ記事のような記事があれば、普通に「投稿」として追加してしまえば問題ありません。ただし、新規投稿するとその日付が投稿日付となりますので、できる限り最新の情報にリライトしてから公開したほうが、ユーザーのためになります。

手順⑬: WordPressのサイトURLを変更し、再度、.httaccessによる301リダイレクト設定を行う

記事をすべてWordPressに書き起こしたら、ついに最後の作業です。現在、WordPressはサブディレクトリにインストールされていますが、サブディレクトリのURLでアクセスさせるのはあまり綺麗ではないので、ルートディレクトリのURLでアクセスさせるように変更します。以下参考ページが詳しいです。また、古いhtmlページから移行する場合は、301リダイレクトによってWordPressのURLに誘導してあげる必要があります。私は古いhtmlページからURLを全て変えたので、「RewriteRule」に、1行ずつ紐づけを書いていきました…。

ここまで終われば、ひととおり移行作業は完了です。お疲れさまでした。

参考 WordPressのURLを変更する方法(サイトアドレスの修正)マサオカブログ

まとめ

ここまでの移行作業で、サイトは無事にhttps化され、新しいドメインとなり、WordPressでの記事公開と、狙った形にすることができたと思います。また、WordPressというのは、思ったほど敷居が高くなく、コンテンツの更新もWebブラウザだけで完結するため、非常に作業がしやすいです。これにより、面倒なサイト更新に対するモチベーションを保ちやすくなるのは間違いありません。これまでのように、重たいエディタを立ち上げてソースコードを全ページ修正してFTPでアップロード…みたいな作業が一切不要となりました。また、デザインに優れるテーマを作って下さる方がいるので、自身でサイトをデザインする必要がないというのも、利点の一つかと思います。

そして、放置することで下がってしまった検索順位は、記事の質を上げることでまた戻ってくるのか、楽しみなところではあります。今回はこれぐらいにしておきますが、リダイレクトの失敗も含めてもう少しネタがあるので、準備ができ次第更新をかけようと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です