これまで４年間Seesaaブログで独自ドメインを適用してブログを書いてきました。
(シーサー社さま、ありがとうございましたm( )m)
が、いろいろあって再度新しいドメインを取り「はてなブログ」に引っ越すことにしました。
なぜ引っ越したか？の理由はまた別の記事に書くとして、、、、
ここではその手順についてまとめておきます。
全部で１０ステップあります。 それなりに時間がかかりますが、じっくりやっていけば全然難しくはありません。 続きは以下から。
2016.04.08 記事の細かい体裁調整・目次追加
- 0. 前提条件
- 1. 新しいドメインをとる
- 2. はてなブログをスタートする
- 3. はてなブログProにアップグレードする
- 4. はてなブログに新しくとったドメインを設定する
- 5. Seesaaからブログエクスポート
- 6. ブログデータをインポート
- 7. インポート後データの整形
- 8. Seesaaブログ側にリダイレクト設定を入れる
- 9. 非公開設定の解除・動作確認
- 10. 検索エンジンのインデックシング開始
- apendix. この方法の課題
0. 前提条件
- Seesaaブログに独自ドメインのサブドメインを当てて運用している((ex)blog.mamohacy.tribrid-jp.com)
- 使っているPCはMacBookAir13インチ(2014Early) + Mac OS X Yosemite
主に参考にさせて頂いたサイト
1. 新しいドメインをとる
レジストラで新しいドメインをとります。私の場合はお名前ドットコムで下記のドメインをとりました。
mamohacy.com
お名前ドットコムの場合手順は全然難しくないので割愛。下記記事を参考にしてください。
$ whois mamohacy.com Whois Server Version 2.0 Domain names in the .com and .net domains can now be registered with many different competing registrars. Go to http://www.internic.net for detailed information. Domain Name: MAMOHACY.COM Registrar: GMO INTERNET, INC. DBA ONAMAE.COM Sponsoring Registrar IANA ID: 49 Whois Server: whois.discount-domain.com Referral URL: http://www.onamae.com/ Name Server: 01.DNSV.JP Name Server: 02.DNSV.JP Name Server: 03.DNSV.JP Name Server: 04.DNSV.JP Status: ok https://www.icann.org/epp#OK Updated Date: 01-mar-2016 Creation Date: 02-feb-2016 Expiration Date: 02-feb-2018 ・・・・・・
2. はてなブログをスタートする
はてなブログをスタートし、ドメインを決めます。
私の場合は独自ドメインを当てる前提ですすめているのでどのドメインを使って始めるかはあんまり関係ないといえば関係ないですが、SEO的に有効かどうかは別にして、最も信頼されているであろう「hatenablog.com」を選んでスタートさせました。
mamohacy.hatenablog.com
この時点では公開範囲を「自分だけ」にしておくことを忘れずに！
この一連の作業を１日で終われない場合に、引越し途中の微妙なエントリをクローラに拾われてインデックスされてしまうからです。 公開範囲は独自ドメインを設定したあとに検索エンジンのインデックス設定とともに元に戻します。
3. はてなブログProにアップグレードする
ここはちょっとだけ勇気がいります。私は調査が終わっていたのでえいやっ！て感じで一気でしたが、ブログ引越しを考えている人がいきなり有料で始めるってのはだいぶ勇気がいるかもしれません。
ブログの設定から「Proにアップグレードする」を選んでProにあげます。有料にはタイプがあって、長いこと契約すればするほど安くなるのですが、どうせ独自ドメインで運用するし検索インデックスも流し込んでしまうので2年コースを選びました。
このときの注意点として、契約料の支払いはクレジットカードで直接行うするタイプではなく、「はてなポイント」なるものを先に購入して、Proへのアップグレード契約をそのポイントで行うのですが、２年コースを選ばれた方は、購入画面に表示される「自動リチャージ設定」のチェックを必ず外してください。
やってみたわけではないのですが、自動リチャージ機能の解説に
「残高が300ポイントを下回った時点で、自動的に今回ご購入いただいたものと同様のポイントを補充いたします」
あるので、たとえば2年コース分の14400ポイントを購入し、その後にこの14400ポイントを使って２年コースを契約するとその時点で残りが0ポイントになってしまうので、ここでまた14400ポイントがチャージ＝14400円をカードで支払うことになってしまう気がします。
はてなポイント14400ポイント購入 → 残高14400ポイント ↓ 14400ポイントではてなブログPro契約 → 残高０ポイント ↓ 300ポイントを下回る → 自動で14400ポイント購入！？
300ポイントを下回ってからチャージまで１日のリードタイムがあるようですが、後でいくらでも変更できるのでいずれにしても一括購入をする場合には外しておいたほうが無難です。
ともかくもポイントを購入してアップグレードの手続きを行うと次のような画面になりProが適用されていることがわかります。
4. はてなブログに新しくとったドメインを設定する
Seesaaからブログを取り込む前に、先に取得したドメインがはてなブログに向かうように設定します。
(1)はてなブログへのCNAME設定を入れる
僕の場合はお名前COMでとったので、ドメインナビでCNAME設定を入れました。 手順としてはこちらが詳しいです。
- お名前.COMのドメインナビ(https://www.onamae.com/domain/navi/)にログイン
- 「ドメイン設定」→「DNS関連機能の設定」を選択
- 「内部ドメイン一覧」から対象ドメインを選択し「次へ」
- 「DNSレコード設定を利用する」の右側にある「設定する」を押す
- 「A/AAAA/CNAME/MX/NS/TXT/SRV/DSレコード」の下にある入力欄に、CNAMEレコードの登録内容を入力して「追加」を押す
左側がブログで使うドメイン、レコードタイプはCNAME、右側は「hatenablog.com」です - 確認画面を表示して登録します。
例によってDNSのレコードは反映まで時間がかかるのでゆっくり対応しましょう。
確認方法としては、設定したドメイン（blog.mamohacy.com)にアクセスし、ブラウザが返す404NotFound系のエラーかもしくはレジストラ自身の画面ならまだプロパゲーションが進んでおらず、下記の画像のような「はてなブログが返すエラー画面」になったら設定が有効になっている証拠です。
(2)検索エンジンのインデックス登録回避
この時点でクローラにサイトを巡回されインデックシングされてしまうと移行途中のブログをそのまま検索エンジンに認識されてしまうのでいったん除外しておきます。
「設定」->「詳細設定」->「検索エンジン最適化」にある「 検索エンジンに登録させない（noindex, nofollow）」にチェックを入れます。
引っ越し完了後にこの設定は外します。
(3)はてなブログ側の設定で独自ドメインを設定する
「設定」->「詳細設定」->「独自ドメイン」に、先ほどCNAMEで設定したブログ用のドメインを設定します。（私の場合であればblog.mamohacy.com）
一度登録すると「独自ドメイン」の下に「ドメイン設定をチェック」ボタンが登場するのでボタンを押して、先のDNS設定が正しく効いているか確認します。問題なければボタンの上に「ドメインの設定状況：有効」になります
(4)独自ドメインの動作確認
はてなブログにログインした状態で、(3)に設定したドメインにブラウザからアクセスしてみます。(私の場合なら「http://blog.mamohacy.com」) ここでデフォルトの状態のトップページが表示されれば成功です。
念のためはてなブログからログアウトし、同じドメインでアクセスしてみて、Not Foundになれば非公開設定も効いているので安心です。
ログアウト状態でトップページが表示されてしまったら、公開設定が「すべての人に公開」になっているので、「自分だけに公開」に変更しましょう。
5. Seesaaからブログエクスポート
Seesaaブログの管理画面から「設定」→「エクスポート」を選んで、記事をエクスポートします。 文字コードは「utf-8」、取得期間は最も古い記事から最新までを選んで「エクスポート」ボタンを押します。
6. ブログデータをインポート
はてなブログの管理画面から「インポート」を選んで上でエクスポートしたデータをインポートします。
タイプは「MovableType形式」でファイルを選び、次の画面で文字コードとして「UTF-8」を選びます。記事のプレビューが見れるので文字コードが合ってるか確認しつつインポートしてください。
7. インポート後データの整形
この作業、地味にかなりの時間を費やしました。私の場合は記事の数が100以下でしたので少ないほうですが、それでも４〜５時間くらいでしょうか。
というのも、Seesaaブログ側で記事内にHTMLを直接書いて無理矢理に整形させていたような記事がいくつもあり、それをはてなブログ側でもまともに表示できるように形を整える必要があったからです。
中には画像のリンクが切れていたり、改行コードがすべて飛んでいるもの、フォント色が背景色と同系で文字が見えなくなっているもの、さらには自分の過去ブログへのリンクを張っているものなどかなり手強いものばかりでホント苦労しました。
なんとか見れるレベルまで訂正しましたが、一部の記事はもうムリクリ感全開。基本的に決められたマークアップ以外は使わないほうが無難ですね。反省。
新しいブログではすべてMarkdownで書こうと決めました。
8. Seesaaブログ側にリダイレクト設定を入れる
現在のままだと同じ内容のブログが２つ存在してしまうことになりGoogle様に「これはコピペブログだ」と判断されてページランクが下がっちゃうので、旧ブログから新ブログに強制的にリダイレクトをかけて、新しく作ったほうが正しいブログだよということを検索エンジンに認識させます。 「トップページ」「個別ページ」「スマホページ」の３つに設定を入れます。
(1)トップページ
「管理画面」→「デザイン」→「PC」→「HTML」→「HTMLの追加」を選択し、
の下に下記コードを 挿入します。<link rel="canonical" href="http://新しいブログのURL" /> <meta http-equiv="refresh" content="0;url=http://新しいブログのURL" />
これでトップページのアクセスは強制的に新しいブログにリダイレクトされます。
(2)個別記事ページ(PC)
各エントリのヘッダに強制リダイレクトのHTMLを挿入するよう設定します。 手順は、下記URLの「続いて各記事ページのリダイレクト」以下を参照して欲しいのですが、
ポイントはここに書かれているコードの意味です。はてなブログにデータをインポートすると、
http://[新しいブログのドメイン]/entory/YYYY/MM/DD/hhmmss
というフォーマットで自動的にディレクトリ作成と記事作成が行われます。ここの「/YYYY/MM・・・」はインポート元の記事の投稿日時(年/月/日/時分秒)です。 挿入するコードは
<% if:page_name eq 'article' -%>
<link rel="canonical" href="http://新しいブログのURL/entry/<% article.createstamp | date_format("%Y/%m/%d/%H%M%S") -%>" />
<meta http-equiv="refresh" content="0;url=http://新しいブログのURL/entry/<% article.createstamp | date_format("%Y/%m/%d/%H%M%S") -%>" />
<% /if -%>
ですが、これの「article.createstamp」が記事の作成日時出力、date_format()がその出力フォーマットの整形です。 元記事の投稿日時からリンク先のはてなの記事のURLを自動生成して強制的にリダイレクトしています。
(3)個別記事ページ（スマートフォン）
上記設定はスマートフォン版のコンテンツに埋めても有効にならないようなので、別のコードを埋め込みます。
「管理画面」→「デザイン」→「スマートフォン」→「コンテンツ」を選んで、全部のブログパーツを外し、「自由形式」というパーツを「ヘッダー」エリアに入れたのち設定ボタン（「自由形式」の文字の右側の歯車アイコン）を押します。
表示されたウィンドウのテキストエリアの部分に下記のコードを埋め込んで「保存」を押します。
<script>
document.cookie = 'force_pc=1; max-age=157680000; path=/';
document.cookie = 'force_sp=0; max-age=157680000; path=/';
var url = location.href;
document.write('<meta http-equiv="refresh" content="0; URL="' + url + '">');
</script>
これが何をしているかというと、スマートフォンでアクセスが来た場合にcookieと呼ばれるブラウザが持っている設定一覧ようなものの値を強制的に「これはPCからのアクセスだ」というふうに書き換えて、その後にページの再読み込みを行わせています。
Seesaaブログの場合は同一のURL/同一のHTMLでPCにもスマホにも対応するレスポンシブデザインに対応していないようで、PC版のリダイレクトコードが効かないそうです。おそらくSeesaaブログでは記事をポストするとPC版とは別のHTMLをシステムが自動生成することでコンテンツの投稿日時が変わってしまい、PC版のような投稿日時によるリダイレクトをかけると、はてなブログ側にインポートした記事とずれてしまうのではないかと予想していますが真相はわかんないです。。
なので、かなり遠回りですが、
（元ブログ）モバイルページ ↓ （元ブログ）PCページ ↓ （新ブログ）PC/モバイルページ
といった順番でアクセスさせることで、結果的に新しいブログの個別ページへ誘導する動きを作っています。
このような情報をWebに公開してくださっている id:pyhu さんに感謝しきりですね。
(4)ページデザインの簡素化
旧サイトのデザインを、PCページ/モバイルともに簡素化したものを適用するように変更します。これはリダイレクトコードが実行されるまでの時間を短くするためです。
Seesaaの管理ページ→「デザイン」で、「PC」と「スマートフォン」の両方のデザインを、とにかくなんでもいいのでシンプルなやつにします。
私は、PCは「超シンプル(右サイドバー)」、スマートフォンは「ブルー」を選びました。
当然ですがキレイなスタイルや画像が適用されていると読み込みまでに時間がかかってしまうので、新ブログにリダイレクトされるまでの時間が長くなってしまいます。「超シンプル」やデフォルトスタイルなどを選んで簡素化することで、ページ全体をロードする時間を少なくして時間を短縮します。
また、トップページにアクセスされた場合のリダイレクトも早くさせるため、トップページに表示させる記事の数も「１」に設定しておくことをお勧めします。 「設定」→「ブログ設定」→「トップページ表示件数」のところです。
9. 非公開設定の解除・動作確認
先ほど設定した公開範囲を「自分にだけ公開」から「すべての人に公開」に変更します。
いったんはてなブログからログアウトして、Seesaaブログ側のトップページ、各個別のPCページ、モバイルのページのそれぞれにアクセスしてみます。 最初Seesaaのページが表示されたのち、はてなブログにリダイレクトされるのを確認してください。
10. 検索エンジンのインデックシング開始
いよいよ、ここから移行後のブログが世に放たれます！
先ほどチェックをオンにした「検索エンジンに登録させない（noindex, nofollow）」のチェックをし、検索エンジンのクローラがインデックス登録できるようにします。
元サイトとまったく同じサイト名にしていた場合、検索エンジンの上位に表示されるようになるまで数日〜長くて１ヶ月くらいかかる場合もあるそうです。 古いサイトは検索エンジンによるインデックス登録が終わるまで当分の間残しておくほうが無難です。
以上で移行設定作業はすべて完了です！！お疲れさまでした！
apendix. この方法の課題
実はこの手順による引越し方法には唯一の問題点があります。
それは、各記事に埋め込まれている画像がSeesaa側で参照されてたものをそのまま使っているので、元サイトをたたんでしまうと記事の画像がすべて見れなくなる可能性があることです。
またさらにいうと引っ越し元のブログで独自ドメインを使っていたりした場合で、画像参照用のURLをそのドメインのパスで指定していた場合、有効期限が切れたとたんに画像が参照できなくなってしまいます。
これら画像のリンクについては、Seesaaブログからいったんローカルに全部落として新しくはてな側（はてなフォトライフ）にアップロードし直し、ひとつずつリンク付け替えるか、もしくは別のクラウドストレージに全部あげてWeb公開し、そのURLを一つずつ張り替えていくなどの対策が必要になります。
あと元のドメインの有効期限が切れるまであと３ヶ月くらいあるので、アクセス数が多いものから徐々に移し替えを行なっていきたいと思っています。
