とにかく、疲れた・・・。
このブログ、書き始めてから2017年11月までの約2年半、Googleが提供している無料blogサービス「Blogger」に独自ドメインを乗せて運営していましたが、12月に「wpXレンタルサーバー」+「WordPress」へと切り替えました。
その理由は色々あるんですが、やっぱりブログを長く続けていくとBloggerだと限界を感じてきたんですよね。例えばBloggerはGoogleの無料サーバーを使っているのでサーバー側の設定をいじれなかったり、今のところ独自ドメインだとSSLの設定もできなかったり、AMP対応もできなかったりと色々気になる点がありました。
失敗すればこれまで積み上げてきたSEO的な資産とかPVとか吹っ飛ぶ不安はありましたが、この機会にやりたいこと全部やってしまおうと一念発起して作業にかかったわけです。
普段書いている音楽ネタとは無関係ですが、無事に移行作業は終わったので、「現在Bloggerでブログを書いているけれど、将来的にWordPressへの移行を考えている人」の参考になればと思い、備忘も兼ねてまとめておきます。
前提条件:移行前の環境と移行後の環境
まず実施した内容と、それぞれの環境や状況をまとめておきます。移行前の環境から移行後の環境を目指して、作業に取りかかりました。
CMS | Google Blogger |
ドメイン | 独自ドメイン(お名前.comで運用) |
サイトの常時SSL化 | 未対応 |
サーバー | Blogger用の無料Googleサーバー |
WEBページのAMP対応 | 未対応 |
記事数 | 約800記事!!! |
移行後の新環境
CMS | WordPress |
ドメイン | 独自ドメイン(Xdomain(エックスドメイン)運用に移管) |
サイトの常時SSL化 | 対応 |
サーバー | wpXレンタルサーバー(月額1,000円くらい) |
WEBページのAMP対応 | 対応 |
記事数 | 約750記事(過去記事整理する予定でした) |
一気に色々なことやりすぎかもしれませんが、まとまった時間をとって作業することも難しいと思い、やりきりましたよ!
「独自ドメインBlogger」から「独自ドメインWordpress」への移行情報はあまりなかったので、誰かの役に立てれば幸いです。
独自ドメインのBloggerからWordPressへ移行する方法
それでは、具体的な作業手順を書いていきます。
ちなみに作業期間は移行プランの設計で1週間、テスト環境構築で1週間、実施してから微調整に数日と合計2〜3週間くらいです。また、僕のWEBやサーバーに関するスキルは、職業柄、普通の人より理解が深い(自分で言うのも何ですが)という前提です。
STEP1. Xサーバーをレンタルしてテスト環境に移行する
これはMAC+MAMPなどのローカル環境で実施しても良かったのですが、可能な限りスムーズにBloggerからWordPressへ移行したかったことに加え、移行後にデザイン調整期間などのメンテナンス期間を作りたくないと考えていました。
また、どうせ新規でXサーバーをレンタルすると決めていたので、テスト環境を構築しWordPressをインストールし、利用する予定のテンプレートでデザイン表示も確認することにしました。後ほど書いて行きますが、僕は記事数が非常に多く、Bloggerのテンプレートもかなりカスタマイズしていたので、テスト環境で作ったWordPressのデータベースをそのまま本番環境に移行すれば、移転も楽だと考えたからです。
WordPressの運用に特化したクラウドサービス『wpXクラウド』
XサーバーへのWordPressインストール手順などは、公式のサポートにも記載があるので参考にしてみてください。
WordPress 自動インストール はじめに
ここでデザインやレイアウト、SSL化の挙動やURLなど確認していくのですが、めちゃくちゃ大変でした・・・。
WordPressをインストールし、初期設定を終わらせる
まずテスト環境にWordPressをインストールします。インストールが終われば利用したいテンプレートの有効化も行います。WordPressの魅力は、なんといっても豊富なテンプレートですよね!無料でも十分綺麗なレイアウトがありますし、なんなら自分でカスタマイズしても良かったのですが、僕は今回AMP対応も目指していたこと、作業時間の効率化も考慮して有料のテンプレートを購入しました。
また、テスト環境には外部からアクセスされたくなかったのでベーシック認証をかけてクローラーなどのアクセスも弾くよう設定しています。
URLの設定をBloggerの形式に合わせる
無事にWordPressの設定が終われば、次はWordPressパーマリンク設定をBloggerと同じ形式に変更します。URLが変わってしまうと、これまでせっかく積み上げてきたGoogleからの評価がなくなってしまうので、SEOの観点からもこの作業は非常に重要ですよ!
設定はWordPressの管理画面から「設定」→「パーマリンク設定」で、一番下の「カスタム」を選択して「/%year%/%monthnum%/%postname%.html」を入力します。
これで、WordPressの投稿もBloggerと同じように「example.com/2017/12/hogehoge.html」のような表示形式になりますね。
Bloggerから記事をWordPressにインポートする
基本設定が終われば、次にこれまでBloggerで書いてきた約800記事をWordPressに移行しました。移行にはBlogger Importer Extended」というプラグインを利用します。
WordPressの管理画面から「プラグイン」→「新規追加」で対象のプラグインを検索してからインストールし、有効化した後にスタートするだけです。Bloggerを書いているGoogleアカウントとの連携など、画面に表示される手順に従っていけば問題ありません。
URLとレイアウトを整える
レイアウトの確認、記事投稿内に直接書いていたスタイルシートは文字列に!
まず全体的なレイアウトを確認していきます。Blogger時代にそれほどテンプレートを変更していなければ問題ありませんが、僕は色々とやりすぎたあまり、全体テンプレートだけでなく個別の記事内でもデザインを変えたく、記事内<style type="text/css">といった形で直接スタイルシートを書いていました。
これらの記述は全て文字列に変換してWordPress側にインポートされてきたので、全て記事内にスタイルシートではなく文字列として表示される結果に・・・。どの記事に直接スタイルシートを書いていたか忘れていたので全て手作業で探すハメになりました・・。
公開日を変更した記事のURLは再変更が必要
次に確認したのは、過去の追記時に公開日時を変更した記事のURL確認です。
Bloggerには、いわゆる記事の投稿日時しか表示されない仕様があったため(内部的には初投稿日時と更新日時を持っていますが)、僕は大事な追記をした過去記事は投稿日時を更新して公開していました。
Bloggerの場合、例えば2015年8月に公開した記事は「example.com/2015/08/example.html」というURLになっており、この記事の公開日時を「2017年10月」に変更しても、記事のURLは変わらないままでした。
それがWordPressに先ほど紹介したプラグインを使って記事をインポートすると、記事のURLが「example.com/2017/10/example.html」に変わってしまっています!これではURL変更によりこれまでのSEO効果やリンクされているURLの効果がなくなってしまうので、全て手作業で戻していく必要があります。
僕は結構な記事を更新して公開日を新しくしていたので、これもまた疲れました・・・。
日付が違う同じパーマリンクは使えない
これはWordPressの仕様だと思うのですが、パーマリンクの設定が日付移行の部分しか見ていないようなので、例えば「2015/08/example.html」と「2015/10/example.html」といったURLは共存ができません。
Blogger時代はこれが可能だったので、僕は結構このURL使ってたんですが、WordPress環境下では「2015/08/example.html」と「2015/10/example-2.html」のようなURLになります。
プラグインを使って記事をインポートし、後ほど説明するリダイレクトの設定をしっかり行えば表示自体は問題ないですが、URLが変わるのは嫌です。
が、これはどうしようもないので諦めました。
なぜだか知らないけど、URLが途中で切れている・・・。
これは本当に謎であり、かつ一番影響が大きいので途方にくれました。
今回僕は「Blogger Importer Extended」を使って記事をインポートしたのですが、本来「2015/08/example.html」であるはずの記事が「2015/08/examp.html」になるなど、なぜかURLの文字列が途中で切れてしまっている事象が全体の5%くらいありました。
約800記事全部手作業でチェックするとか狂気の沙汰でしたが、やらない訳にもいかないので対応しましたよ。
根拠はないですが、URLの最後が「t」や「l」や「ll」で終わっている記事に関して文字列の抜けが多かった気がします。
ここまで作業を完了することで、ようやくテスト環境への移行が終わります。
STEP2. テスト環境で移行用のバックアップを作成する
レイアウトやURLなど確認し、問題がなければテスト環境のWordPressからデータベース(sql)のバックアップをとります。
お気付きの方もいるかもしれませんが、ここまでやってしまえば後はWordPressのドメイン変更をするイメージですね!バックアップのとり方やドメイン変更は以下の記事が分かりやすいので参考にしました。
基本的にはここに書かれている通りの方法でデータベース(sql)のバックアップを作成しておきます。
STEP3. ドメイン管理をお名前.comからXドメインに変更する
なんとかテスト環境への移管、データベースの作成が完了すれば、次はいよいよドメインの管理を、独自ドメインでBloggerを運用する際にドメイン購入したお名前.comからXdomain(エックスドメイン)へ移管する作業です。
単純にBloggerからWordPressへ移行するだけであれば別に必要ない作業ですが、Xdomainでドメインとサーバーを管理すれば無料でSSL証明書を利用できるので対応しました。
ちなみに僕は最初からサーバーもXサーバーのX10利用を想定していたので、先にサーバーの本契約を済ませています。時期にもよりますが、サーバー契約時に独自ドメインを一つ無料で利用できるオプションが付いている場合があります。今回もキャンペーン中だったので、僕はお名前.comからドメイン管理を移管し、そのドメインを元々の残りの期限+1年間利用できるようにしました。
実際の移管手順については、こちらの記事を参考にして進めました。少し画面が古かったりしますが、対応内容はそのままです。
https://www.pc-weblog.com/domain-transfer/
それぞれ移管の確認や承認メールは届くまでの数時間から最大3日ほど期間が必要です。実際僕が実施した時も、移管確認のメールが12時間以上届かなくて、まずそこで大幅に作業工程が遅れていまいました。
移管の手続きが終了すると、Xdomain側でネームサーバーやDNSレコードの設定ができるようになりますが、何もしなければ旧管理元のネームサーバー設定のままなので、新しい内容に変更していきます。
またDNSレコードに、これまでBloggerで利用していたDNSレコードの設定追加を忘れない様にしてください。そうしないと、現在運用しているBlogger側に繋がらなくなってしまいます。
僕もすっかり忘れていたのですが、Bloggerを独自ドメインで設定した際に、以下2つのDNSレコードを追加していたので、新しいドメイン管理元にもこれらを追加します。
ホスト名 | 種別 | 内容 |
of6hdmdy5j4x.example.com | CNAME | gv-2bq3rcxw2nj4s3.dv.googlehosted.com |
www.example.com | CNAME | ghs.google.com |
※example.comの部分は、自分が使う独自ドメインです。
これらの作業が終われば、これまで利用していた独自ドメインの管理元がXドメインに変わりました。もう少しです!
STEP4. 独自ドメインにWordPressをインストールする
ここまでくれば作業はもう少しで、移管した独自ドメインに対してもWordPressをインストールします。
XサーバーのSSL無料オプションは、「Xドメインで管理しているドメインをXサーバーで利用している時」のみ利用できるので、このタイミングでSSLの設定も行います。
またXサーバーの10日間無料お試し期間中では設定できないので、SSL化を実施するのであれば、本契約が必要です。設定方法は公式に書いてある以下の通りですね。
STEP1でテスト環境を構築した時と同じ様にWordPressの設定が終われば、いよいよバックアップしていたデータベースとSQLを独自ドメインのWordPress環境に移行します。
方法は先ほど紹介した「WordPressのドメイン変更手順」に記載がありますが、SQL内のドメイン変更など忘れない様にしてください。
wordpressのドメイン変更6つのステップと注意点。
このあたり、作業感に自身がなければ多少のメンテナンス期間は仕方なしと考えて、テスト環境を経由せずに、いきなり本番環境で作業をした方が、簡単なのは簡単です。その場合は、STEP1に記載してある移行時の注意など確認しながら、レイアウトやURLの確認を行ってください。
STEP5. BloggerからWordPressへのリダイレクト設定を行う
いよいよ独自ドメインのWordPress+常時SSL環境でブログが動き始めたら、これまで使っていたBloggerからWordPressへの301リダイレクト設定を行います。SEO観点から絶対に301リダイレクトにしますよ。
BloggerからWordPressへのリダイレクト設定
設定には「Blogger 301 Redirect Plugin」を利用します。
WordPressの管理画面から、「プラグイン」→「新規」にて対象のプラグインをインストールし、設定ですべてのチェックボックスにチェックをいれます。
その後表示されるコードをBloggerのテンプレート編集画面に張り付けるだけです。Bloggerの管理画面から「テーマ」→「HTMLの編集」と進み、現在使っているテンプレートを全削除して、新しく表示されたコードを貼り付けます。万一に備えて切り戻しできるように、念のためバックアップを忘れずに。
Bloggerの仕様であるURLの「?m=1」もリダイレクトさせる
本当に最後までBloggerの独自仕様に足を引っ張られますが、Bloggerの設定でスマホなどモバイル端末からアクセスした場合は、URLの末尾に「?m=1」というパラメータがつきます。
これがやっかいなことに、Googleの検索結果にパラメータ付きでインデックスされている記事は正確にリダイレクトされず、WordPress側で404エラーとなってしまいます。
これらを解消するためには、新しいサーバーで「.htaccess」を編集する必要があります。「.htaccess」の細かな説明は省きますが、サーバー側の設定になりますので、WEBサイトにアクセスする時、サイトの中身よりも何よりも一番最初に読み込む命令のようなものです。
Xサーバーのコントロールパネル上から、この「.htaccess」ファイルを編集し、ファイルの一番最初に以下のコードを付け足します。
こちらに関しても、先人がまとめてくれていますね。
BloggerからWordPress移行時に?m=0,?m=1をリダイレクトさせるには
以上でスマホからのアクセスでも問題なくリダイレクトしてくれるようになります。
STEP6. www有無、SSL有無など統一する
最後に新しいサイトにアクセスした時の挙動を統一します。これは別途紹介するGoogle検索インデックスにどのURLを表示するかとも関連してくるので必ず統一します。
僕は、必ず「SSL有りのwww無し」にアクセスされるように統一しましたが、こちらの設定も「.htaccess」を編集する必要があるので、以下のコードを付け足します。
※example.comの部分は、自分が使う独自ドメインです。
これに関しては自分がどのルールで統一したいかにより変わってくるので、以下など参考にしてください。
.htaccessでリダイレクト設定[www有無統一][http,https]
以上で独自ドメインBloggerからWordpressへの移行作業は完了です!お疲れ様でした!
まとめると
いかがでしょうか。
ここまで読んでいただいた方であれば分かると思いますが、本当に疲れました。。。
特にテスト環境で色々と修正した時にURLの変更とか不要な文字列削除とかが、本当に大変でした。ここに一番時間取られました。まぁ、約800記事に膨れ上がるまで何も手を打たなかった僕が悪いのですが。
ちなみに、SSL化対応後はAnalyticsやSearch Console、TagManagerなど各種ツールへの対応も必要ですが、それはまた別の機会に・・。以下のサイトで分かりやすくまとめられていますので、参考にしてください。
サイトのhttps化が終わった後は、GoogleアナリティクスとSearch Consoleの設定をちゃんと変更しよう
今のところ常時SSL化対応により何か大きく変わったことはないですが、やっぱりきちんとしたメディア運営ができるようになったと自己満足しています!
ただ何度も繰り返しますが、本当に記事数が多く大変な移行作業でした・・・。今後BloggerからWordPressへの移行を検討している方は、早めの対応を強くオススメです。