はてなブログProからWordPressへの移行作業と設定方法(2017年版独自ドメインあり)

https://s.w.org/about/images/logos/wordpress-logo-stacked-rgb.png
(画像掲載元:https://s.w.org/

2017年2月10日に5年間使ったはてなブログProからレンタルサーバー+Wordpressへ移行を行いました。
WordPressへ移行しました

はてなブログからWordpressへ移行を検討している人も多いと思います。
自分も移行作業のエントリーを参考にしながら正解を探す感じで手順を試行錯誤してきました。
今回の移行作業と設定方法、その時注意すべき事などについて書いていきます。
長文ですがエントリーを分けずにこの記事だけ読めばいいように構成しています。
(本エントリーの内容はWordpressの移行や設定を保障するものではありません。)

はてなブログか、Wordpressか

始めに、はてなブログからWordpressへ移行する事について触れます。

はてなブログについては元々、SNSから切り出した日記を公開したり、ゲームの自分用のメモ等を書いていて、広告も載せておらず収益化なども全くしていませんでした。

2015年に、ブログの収益化をテーマにしたはてなブログを見ていて、自分もどこまで出来るのか興味があったため、はてなブログの有料プランProと独自ドメイン化を行い、その後記事とアクセスが増えていきました。

また、広告収益等も順調に増え始めたため、このタイミングでWordpressへの移行を考えました。
WordPress移行については、自分の場合、幾つか理由や背景が複合的にあり、一つの理由で移行したわけではありません。

WordPressへ移行した主な理由

自分の場合、以前から潜在的にずっと移行を考えていましたが、昨年末の時点で560の公開エントリーがあり、これ以上エントリーが増えると現実的に移行が困難になるためその前に着手したという感じです。

  • 普段から見ているブログがWordpressを使っているブログが多かったため移行するならWordpressと思っていた。
  • 仕事柄Wordpressの実装も知識として知っておきたかった。
  • はてなのテーマや実装に限界を感じておりブログの成長という意味でははてなではこれ以上成長がないと感じていた。
  • 機能やサポートの面ではてなブログに魅力や愛着が薄かった。特にGoogleがモバイルフレンドリーを進める中でもそれに逆行するかのようなスターの実装に疑問が大きかった。
  • これからWEBやブログで必須対応となる常時SSL化がはてなに依存することになるのが嫌で自分で対応したかった。
  • はてな管理画面で通知の赤いメッセージが出るのが嫌だった。
  • はてなではスターや言及通知、読者、はてブ等交流からアクセスを増進する仕組みが多く使われているが、自分の場合は全く交流をしていなかったので、はてなを使い続ける意味が薄かった。
  • スマホのデザインをメディアっぽい画面にしたかったが、はてなブログではスマホ画面のデザインを大きく変更出来なかった。

はてなブログの利点と欠点

はてなブログの利点と欠点についてはbeizのノート様のエントリーが一番まとまっていると思いますので引用致します。

7年ほどはてなダイヤリーとはてなブログを使用してきて感じた利点と欠点は次の通り。

利点
はてなブログをレンタルサーバと比べた場合、その利点は次のとおりである。
• セキュリティ・デザイン・SEOなどは、未設定でも一定水準のものが提供される。
• そのため、記事を書くことだけに集中することができる。画像をアップロードしたり、amazonやgoogleのリンクを貼ったりするのは、標準機能で十分使いやすい。
• サーバが負荷に強い。amazonのサーバが使用されており、500円/月のレンタルサーバより負荷に強い。急激にPVが伸びたとしても、表示が遅延する恐れが少ない。
• エントリを書いた直後は、はてなトップページで一時的に紹介されるため、人の目に付きやすい。その他にも、はてなブックマーク、はてなキーワードなどで、何かとリンクされるため、無名のユーザーでも記事内容が面白ければPVを得やすい環境にある。

欠点
一方で、欠点は次の通り。
• カスタマイズ性が低い。セキュリティ・デザイン・SEOについて知識がついてくると、改善したい箇所がでてくるが、制限されていて変更できないことが多い。ごく一部を例に挙げるなら、固定ページが作れない、.htaccessに触れない、meta情報が勝手に入っていて消せないなど。
• 無料アカウントで使用すると、画像広告が大量に挿入されてしまう。特にスマートフォン用ページでは、トップページにに5つも画像広告が入り、記事を集中して読むことができないほどである。少々の広告は、ブログの運営費を賄うために必要であるが、あまりに多い。有料アカウントである「はてなブログPro」を申し込めば広告を除去することができるが、税込み1ヶ月1008円する。
• レンタルサーバではできるような、次のようなことができない。例えば、SSL(https)をつけたり、お問い合わせフォームをつけたり、phpを使用したサービス(例えばチャットルーム)などを設置したり、ブログと同じドメインでメールアカウント、メーリングリストをを作成したりということが、自由自在にできる。
• ブログがアカウントに紐づけされてしまう。「~~さんの利用している他のサービス」などで、ブログと関係のないものとブログが繋がってしまう。

引用元:はてなブログから、レンタルサーバ + WordPressサイトへの移転方法beizのノート

はてなブログについて自分なりに少しまとめてみます。
はてなブログというのは「初心者でブログを始めたい人が直ぐに始められる」「スマホだけでも手軽にブログ更新出来る」という人向けのブログサービスです。
初心者用にも関わらず検索に非常に強く上位表示されやすい上、はてな独自の導線の仕組みからアクセスが増えやすいため多くの中上級者もはてなブログを使っています。

しかし、ある程度経験や知識がついてくると、はてなブログ特有の制限やリスクで使い辛くなってきます。
長期にブログを続けること、収益化を含めて考えると、制限がないレンタルサーバーへの移転を考えることになります。
例えばアドセンスではデリケートな分野の広告もブロックしなければ表示されることがありますが、内容によってははてなの規約の抵触に触れる可能性があります。
自分でレンタルサーバーで運営すると(レンタルサーバー側や広告会社側の規約はありますが)基本的には規約がなく自由に行えます。

ブログ移転がリスクやデメリットになる人もいます。
はてなブログで既に大規模な読者数がいる、ブログやメディアで知名度があり多額の収益を出している人は移転すること自体がリスクやデメリットに繋がります。
特にはてなブログでは301リダイレクトの仕組みが使えないため検索エンジンの評価を持ち越して移行するという作業が非常に難しくなっています。
このため一概にはてなブログを止めてレンタルサーバーに移行すべきということは出来ずケースバイケースということにはなります。

はてなブログは初心者でも始めやすく、更新もしやすく、アクセスも増えやすいシステムですが、はてなブログからWordpressへの移行は非常に難しくなっています。
始める時は自分が将来的にブログをどのように運用したいのかを考えて使うべきです。

はてなブログからの移行を考えた場合に普段から意識しておくべきこと

はてなブログからWordpressへの移行を少しでも考えるのなら、移行の過程で削除や修正が必要になる記事の編集の仕方を普段の更新から出来るだけしないことです。
普段からはてなブログ側で更新ルールを徹底しておけば移行作業の時に楽になります。
普段から意識しておいた方がいいこととしては以下が挙げられます。

  • はてなブログPro(必須要件)
  • 独自ドメインを取得し独自ドメインでブログ運用(必須要件。独自ドメインでないと記事の移行やインデックスの維持が難しい)
  • はてなキーワードリンクオフにする。
  • 記事URLは標準形式にせず毎回カスタムでタイトルを付ける。(Wordpressインポート後にカスタムURLなら整形作業ゼロで移行可能)
  • はてなフォトライフを使わない。(フォトライフを使ってもWordpressインポート後に画像は表示されるが、はてなのサービスを使い続ける状態になる。)
  • 画像は記事に入れない。どうしても画像を使う場合はGoogleフォトなどの外部クラウドサービスを使う。
  • アイキャッチ画像は設定しない。どうしても画像を使う場合はGoogleフォトなどの外部クラウドサービスを使う。
  • カードリンクは使わない。どうしても使うならciteの部分に該当記事のURLを埋め込んでおく。
  • はてなの広告リンクや商品リンクは使わない。どうしても広告タグを記事に貼り付ける場合ははてなのタグが残らない外部サービスのツールを使う。
  • はてな記法やはてなの独自タグは使わない。
  • 編集見たままで記事を書く。
  • はてなポイントの「自動リチャージ」を使わない。はてなポイントは毎回必要なポイントだけ「買いきり」する。自動リチャージにするとはてなからレンタルサーバーに移った後もはてなポイントを自動で購入してしまうことを防ぐ。
    この画面で「自動リチャージ設定が未設定です」となっていることを確認する。
    自動リチャージ設定

移行の準備作業

準備作業1.画像サービスをはてなフォトライフからGoogleフォトに移行

上記のような理由から1月末頃からWordpressへの移行を考え始め、情報収集を始めました。
自分の場合、画像を記事に入れる際はてなフォトライフを使っているため、はてなフォトライフを使うか、他の画像サービスを使うかが問題でした。
「はてなフォトライフのままでもWordpressへ記事データ移行した際表示出来た」という報告もあったためそのまま使っても良かったですが、はてなのサービスの一部を使い続けるのは気持ちが悪かったため画像サービスもクラウドに移すことにしました。
画像クラウドにはGoogleフォトを使うことにして画像データだけをまず全てGoogleフォトに移し変えました。

画像をGoogleフォトに移し変えたエントリー
はてなブログでGoogleフォトの画像をアップロードする方法(2017年版picasa使用なし)

画像を全て移行するのに10日以上かかっていました。
その際記事のリライトと不要な記事の削除もある程度行い、560あった記事データを310くらいまで減らしました。

準備作業2.Wordpressに移行を試みるが失敗

1/29夜半から実際に移行作業を試みましたが、失敗と判断してはてなブログに切り戻ししました。

概要だけ書くとエックスサーバーのX10プランで仮契約、はてなブログから記事データエクスポート、Wordpressをエックスサーバーインストールし、記事データをインポート、ドメインのネームサーバーをはてなブログからエックスサーバーに切り替えという流れで行っています。

エックスサーバーを選択しているのは、Wordpressを使用しているユーザーが多くネット情報やエントリーが多いこと、多機能・高機能で値段も抑えられていることなど。
情報が多いのはレンタルサーバーを選ぶ上で非常に重要ですがその点も重く見ると現状ではエックスサーバーが最有力となります。

(レンタルサーバーの候補に入れていたmixhostでは2月23日に大規模なサーバー障害が発生したため、結果としてmixhostは選ばずに良かったという事になりました。)

移行作業を行ったエントリー 結果的には失敗して切り戻し
はてなブログProからWordPressへの移行失敗 移行作業で起きた問題の検証と今後の方針(解決事項追記あり)

この時、事前の調査で分かっていなかった問題が多数出て失敗と判断しました。
例えばドメイン切り替えから安定してWordpress管理画面に接続出来るまでに時間がかかる、Googleフォトが正常に表示されない、Amazon商品リンクのAmazletの表示が崩れる、Youtube動画、ニコニコ動画が表示されないなど。

この後、これらの問題を一つずつ調査して解決しました。

準備作業3.失敗原因を解決

ドメイン切り替えから安定してWordpress管理画面に接続させる

ドメイン切り替え後はドメイン浸透期間に繋がるか繋がらないか分からないため安定して接続するのが難しい状況になりますが、対策としてはhostsに自分用のエックスサーバーのIPアドレスと自分の独自ドメインを対応させるように書くと常にエックスサーバー側に繋がるようになります。
hostsについては移行作業の中で書きます。
エックスサーバーのマニュアルでもhostsを使った作業について説明があります。
hostsファイルを編集して確認する方法(エックスサーバーマニュアル)

Googleフォトが正常に表示されない

テーマによって表示される・されないがあるようです。
自分はSimplicity2というテーマを使っていますがGoogleフォト画像の表示が可能です。

Amazletの表示が崩れる

これもテーマによって崩れる・崩れないがあるようです。
Simplicity2テーマでは問題なく表示されています。

Youtube動画、ニコニコ動画の表示

はてなブログとWordpressでは使っているタグが違うため記事データを移行しても表示されませんでした。
タグの書き方を変更することで表示出来るようになります。

準備作業4.Wordpress作業環境を作る

この時点で方針としては別ドメインを取りWordpressで作業環境を作り、作業環境でWordpressでのテーマ選定、プラグイン確認、Wordpressで表示させるため記事データの編集などを行うことにしました。

なぜ別ドメインを取って作業環境を作るかというと、本ドメイン(このブログではvaris.jp)を使うとはてなブログの方に影響があると思ったためです。
が、今思うと実際には作業用ドメインは不要でした。

エックスサーバーで本ドメインのvaris.jpを登録し、hostsにエックスサーバーとvaris.jpの対応を書いておけば、はてなブログに影響なく作業が可能でした。
この時点ではこれに気付かなかったので、このような手段を取っていました。

以下のエントリーで作業ドメイン、Wordpress作業環境を作りそこでの作業内容を書いています。

はてなブログProからWordPressへの移行前に必要な準備作業と今後の方針を確定
WordPress移行計画 テスト用独自ドメイン取得からはてなブログサブブログ設定まで
WordPress移行計画 エックスサーバーWordPressにテストドメイン設定とムームーDNS切り替え
WordPress移行計画 「Photo Express for Google」導入とGoogleフォト認証情報設定
WordPress移行計画 Googleフォト画像をWordPress側で差し替えするためのテスト

準備作業5.Wordpress作業環境での作業

作業環境での作業内容を箇条書きで書きます。以下の作業を2/1から2/9頃まで行っていました。

  • はてなブログサブブログを作成し仮記事を作成
  • エックスサーバーX10プラン本契約(仮契約期間が過ぎたため本契約)
  • 作業用の独自ドメインをムームードメインで取得
  • 作業用ドメインをはてなブログに設定しムームードメインにCNAMEレコードを設定
  • 作業用ドメインをエックスサーバーに設定
  • エックスサーバーにWordpressインストール
  • ムームーDNSでネームサーバーをエックスサーバーのものに変更
  • はてなブログのメインブログの記事名とURLの一対一対応したXLSファイル作成
  • Akismetプラグイン導入
  • Googleフォトプラグイン導入、認証設定
  • 投稿フォーマット変更
  • 設定>パーマリンク設定>カスタム構造
  • マルチバイトプラグイン導入
  • 検索クロール回避
  • パスワードロックプラグイン導入
  • 設定>パスワード保護有効
  • はてなブログメインブログから記事データエクスポート
    PCローカル環境でエクスポートファイルの修正

    • エディタ(Sakura)でエクスポートファイルを開きH3をH2に一括置換(はてなブログではh3が最大だがWordpressではh2になるため)
    • STATUSをPrivate(非公開)に一括置換
  • はてなブログメインブログのエクスポートファイルをWordpress作業環境にインポート
  • WordPress作業環境でメインブログの記事を修正(ここで修正した記事データを最終的にWordpress本移行でインポートする)
  • 記事パーマリンク修正
    はてなブログでインポート時点では年月日とpostnameが合体してそのままでは移行元とURLが変わるため、Wordpressにインポート後記事のパーマリンクを以下の形式に修正する。

    例:
    元記事


    WordPressインポート直後


    以下の形に修正する

  • 画像をGoogleフォトサブアカウントへ変更
    サブアカウントで画像をアップロードし直す予定でしたが、表示だけならメインアカウントでアップロードした画像でも表示出来ており、作業量を少なくするため一旦このままとしました。
  • テーマの選定
    無料で使えるものとしてはSimplicity2が一番良さそうでした。
    ネット上の情報も多くカスタマイズするのに問題はないレベルの情報量があります。
    スマホ対応もSimplicity2でやってくれるためプラグインは不要です。

    Simplicity2テーマサイト
    Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ
    Simplicity2の親テーマと子テーマの二つはセットで使います。
    (実際に有効にするのは子テーマのみ。CSSの設定も子テーマだけに行い、親テーマのCSSは変更しない。)テーマ配布サイトからZIPをダウンロードして管理画面にアップロードして有効化します。
    Simplicity2のダウンロード

  • ニコニコ動画スクリプト修正
    Simplicity2子テーマCSSにvideo-container用記述を入れます。
    これを入れないと動画幅がレスポンシブにならないため。

    実際にニコニコ動画を記事に埋め込む時は以下のように入れます。

  • Youtubeスクリプト変更
    video-containerを使うとシークバーの表示が切れるため使わず、普通にiframeで表示させることにします。

  • アイキャッチ画像
    Simplicity2テーマ機能側で表示されるため特に作業なし。
  • CSSカスタマイズ
    Simplicity2子テーマにカスタマイズを入れます。(親テーマCSSは変更しない。)
    参考記事
    WordPressテーマ「Simplicity」をカスタマイズする19のポイント【2016.04.14更新】
    【Simplicity2カスタマイズ⑥】記事一覧をカード型の枠で囲って表示する方法
  • カテゴリースラッグ作成、親・子階層化、グローバルメニュー作成
    グローバルメニューを作るにはカテゴリーを階層化する必要があります。
    カテゴリーははてなブログから移行した段階で反映されていますが、Wordpressの機能である英語名のスラッグには対応していないせいでスラッグに日本語が入っていて英語に変更出来ませんでした。(はてなブログの時点で英語カテゴリーにしていれば英語化されるかもしれません)
    そのため最初からカテゴリーを設定し直してスラッグを作成し記事に割り当てが必要になります。自分の場合はカテゴリーを最初から設定し直し、スラッグを設定しカテゴリーの階層化を行ってグローバルメニューを作成しました。

    • カテゴリー設定、スラッグ設定、階層化
    • 記事へのカテゴリー再設定
    • グローバルメニュー作成

    参考記事
    2.2 子テーマを編集しヘッダーとグローバルナビを設定する方法
    2.3 プラグインを用いてグローバルナビを変更する方法とスタイルシート(style.css)の編集方法

  • コメント非許可設定
    投稿一覧>編集・適用>コメントを許可しないで一括設定出来ます。
  • スマホ表示テーマまたはスマホ用プラグイン導入
    Simplicity2で対応しているため不要です。
  • サイドバー設定、ウィジェット設定
    この時点ではお知らせ(固定ページ)、最新記事と新着記事(Simplicity2機能)のみ表示させていました。
  • フッター設定(コピーライト)
    テーマカスタマイズ>その他>サイトのライセンス表記
  • 固定ページ作成
    WordPressでは通常のエントリーとは別に固定ページを作る機能があるため、運営者紹介、サイトポリシー、サイト沿革等を作成しました。
    これらは記事投稿では作らず固定ページで作成します。
  • お問い合わせフォーム設置
    通常はお問い合わせフォームとして「Contact Form 7」というプラグインを使うが、メール送信元がエラーになる、プラグインを入れた方がいいなどの情報もあり対策が面倒でした。自分は元々はてなブログの時点でGoogleフォームをお問い合わせフォームとして使っていたためそちらのコードを流用することにします。
    固定ページにはてなブログ側のGoogleフォームコードをそのままコピーして作成しました。
  • その他プラグイン導入
  • 設定>メディア>画像サイズを全て0にする
    参考記事
    【WordPress】ワードプレスでメディア(画像)がぼやけない正しいアップロード(追加)方法
  • 記事を修正後Wordpress形式でエクスポート>Wordpress形式でインポート>体裁確認>を繰り返して記事を仕上げる
  • 記事がカラム落ち(divタグ落ち)していないことをチェック
  • 全てOKになったら全記事を非公開
    投稿一覧からチェックボックス全てチェック>一括操作>編集>適用>ステータスを非公開>更新で一括変更

移行作業の前に気になっていたこと

ここまでで、Wordpress作業環境で記事データの修正、テーマの選定やCSS設定、プラグインの導入、スマホ用の表示設定など全て作業を完了していますが、移行作業に直ぐに踏み切れませんでした。
まだ自分の中で解決していない疑問点があったためです。
気になっていたのは主に3つでした。

1.エックスサーバー側で削除したドメインをエックスサーバーで再度登録出来るかどうか
1月末に行った作業の際、一度本ドメイン(varis.jp)を登録して削除していました。
このドメインを再度設定出来るのかどうか分からなかったためエックスサーバーサポートに確認しましたが使用可能という回答でした。

2.ディレクトリ構造を変更すべきか
WordPressをマルチサイト化する際はディレクトリ構造を分けてインストールするというやり方もあり、どういうやり方がいいのか迷いましたが、調べたところ、「マルチサイトはプラグインの非対応などもあり初心者には敷居が高い」という情報が気になったため、自分は慣れていないこともあり今回はディレクトリ構造に手を入れずインストールすることにしました。

3.記事に付けられているインデックス評価の維持
これは二つの側面があり、
一つ目は移行中やドメイン浸透期間に同じ内容の記事が二つ存在するため、検索エンジンにコピーコンテンツと看做されペナルティを受けることを避けること。
ペナルティを避けるためcanonical設定を入れるが、はてなブログでは記事個別にヘッダー設定が出来ないこと。

二つ目はコピーコンテンツペナルティを避けるため元記事のはてなブログにアクセスされた際にWordpressの同じ記事に301リダイレクトさせたいが、はてなブログでは個別の記事から301リダイレクトが行えないこと。

現在インデックスされているドメインはwww.varis.jpですがWordpressインストール時にサブドメインのwwwなしでインストールした際はサイトURLがvaris.jpになります。
そうすると検索エンジンから見るとwwwなしになるため別URLでインデックスされこれまでの検索エンジン評価がなくなってしまいます。
対応としてvaris.jpにアクセスされた際にwww.varis.jpに転送させる301リダイレクト設定を行うのが普通ですがはてなブログでは301リダイレクトが行えません。

これについて有志がJavaScriptで実装している例がありました。
具体的にはJavaScriptを検索クローラーが読み込むため、301リダイレクト出来ないはてなブログでも記事の本文にJavaScriptを差し込めばcanonical設定出来るという内容です。

参考記事
はてなブログでmetaタグにnoindexやcanonical設定する方法
ブログ移転時必見!はてなブログ(無料)からリダイレクトをする簡単で効果的な方法!
【CSS・HTML】はてなブログ記事を「noindex」。不要な記事を削除してSEOにも効果あり

記事の評価の維持についてどこまでやるかですが、自分はこれらのやり方は使いませんでした。
GoogleフォーラムではてなブログからWordpress移行について質問している方がおられてGoogle社員が回答している内容を参考にしました。
質問内容は掲載しませんがGoogle社員の回答だけ掲載します。

ブログ移行に関する質問へのGoogle社員の回答

  • 移転がwebmastertool(インデックス)に反映されるには数週間程度時間がかかる
  • 旧ブログに対する noindex などの処理でGoogle のクローラーが認識する前にコンテンツは削除されてしまったのではないか(記事が先に削除されればnoindexを認識できない)
  • rel=”canonical”もサイトマップも設定されているのであれば次第にURL登録が進むはず
  • 最低でも移転から1ヶ月は様子を見るべき(webmastertoolのインデックス状況)

「ここで移行すると今もらっている検索順位やインデックス評価がなくなるかもしれない」
「はてなブログは現状を維持してWordpressは新規サイトとしてスタートすべきではないか」
移行の最終判断を行うにあたりかなり悩みましたが、ブログ移行後はある程度評価やインデックスが落ちても仕方がないと踏ん切りを付けました。

そもそもの考え方として、今もらっているブログへの評価は、はてなブログ自体が検索エンジンに評価されているという部分の影響が大きく、移行後ははてなの評価がなくなり自分の独自ドメインだけの評価に変わるため、検索エンジンから見た評価が一気に落ちる可能性があるためです。

移行というのははてなブログからもらっている評価を失うことと同義でこれを受け入れないと移行をすることは出来ません。

また、自分の場合は、「同じ独自ドメインから独自ドメイン」というURLが変わらないケースであり、サイト移行でも最も難易度が低いため、恐らく移行に当たり想定している以外に大きな問題は出ないだろうという感触もありました。
(Googleフォーラムではもっと複雑な問題も報告されていました。)

今回、結論としては、フォーラムの質問者と同じようなやり方で移行する事にしました。

WordPressに記事データ移行後に以下の対策を行います。

検索エンジン向けの対策
はてなブログ側は全記事を削除し、サイト移転の報告のみトップページに表示させます。
(全記事を削除し、サイト移転記事の掲載でもクローラーが認識するという報告があります。)
はてなブログのヘッダーにnoindex、canonical等を入れてインデックスを防ぎます。ヘッダーの設定は個別の記事ではなくブログ全体のみですがやらないよりはやっておく方が良さそうです。

ユーザ向けの対策
はてなブログヘッダーにmeta refreshを入れてWordpressサイトに自動的に移動するようにしておきます。移転記事をクリックしてもらえなくても数秒後に移動するようにしておきます。

流れ的には以下のような形で推移します。

  1. ムームードメインでドメイン切り替え
  2. はてなブログ側検索回避
  3. はてなブログ側全記事ゴミ箱
  4. はてなブログに設置している広告やサイドバーは全て削除
  5. トップ記事に移転のお知らせを書き、新ドメインを表記
  6. はてなブログ側でヘッダーにnoindex,canonical,meta refreshを設定
  7. はてなブログ側でドメイン削除

移行本作業

移行作業1.Wordpress側作業

以下、移行の本作業の内容となります。
作業環境の作業と被っているものもありますがそのまま掲載します。
本作業では先にセキュリティ系の設定、プラグインでセキュリティを高めてその後記事に必要になる設定を入れて記事データをインポートするという流れで行います。
作業開始時刻は2月11日の0時頃から行いました。

  • エックスサーバーで本ドメイン設定(varis.jp)
  • エックスサーバーでデータベース作成、DBユーザー作成、DBユーザーをDBに割り当て
    自分の場合は手動で作っていますが、Wordpressインストール時に自動で作成されるため、手動・自動どちらでも可能です。
  • WordPressインストール(インストール時に作成したDBを指定)
  • ムームーDNSでネームサーバーをエックスサーバーのネームサーバーに変更
  • PCのhosts設定
    移行作業で使っているPCのhostsファイルを編集し、ドメイン浸透期間の影響を受けずに作業出来るようにします。ネームサーバーを変更するとドメイン浸透が始まるため、エックスサーバー側に到達せずエラーになる場合があります。
    そのため、ドメインの影響なくhostsファイルに一時的にエックスサーバーのIPを記して確実にエックスサーバー側に辿りつけるようにします。やり方としてはsakuraエディタでC:\Windows\System32\drivers\etc\hostsを開き、以下の2行を一番最後に入れて保存します。
  • WordPress管理画面ログイン(http://ドメイン/wp-admin/)
  • WordPressサイトタイトル、サイト説明設定
  • 設定>RSS/Atom フィードでの各投稿の表示
    抜粋のみを表示にチェック
  • WordPress検索回避設定
    設定>検索エンジンでの表示
    「検索エンジンがサイトをインデックスしないようにする」にチェック(公開準備が出来たら解除します。)
  • 投稿者ユーザー作成
  • コメント非許可設定
    設定>ディスカッション設定
    自分宛のメール通知は全てオフにする(スパムコメントでメールが大量に来るため)
  • Password Protected導入、有効化
    設定>パスワード保護有効
  • Akismetプラグイン導入
    APIキー認証>受信メールでアクティベイトしてサインイン>バーを左スライドで0円にしてcreate subscription>表示されたAPIキーをコピーしてWordpress管理画面に貼り付け
  • Edit Author Slug
    各ユーザーにAuthor Slug設定
  • Force email login
  • 投稿フォーマット変更
    設定>パーマリンク設定>カスタム構造

  • マルチバイトプラグイン導入
  • テーマの新規追加からSimplicity2テーマとSimplicity2子テーマをアップロード(作業サイト用にダウンロードしたファイル)
  • Simplicity2子テーマを有効化
  • WordPress形式のインポートを可能に設定
    ツール>インポート>Wordpress
  • 記事データのインポート
    作業用サイトで記事を修正したエクスポートファイルをインポート
    インポート時に作成した投稿者ユーザーに記事を割り当てる
    ※この時は「添付ファイルをダウンロードしてインポートするにチェック」を外していたためトップエントリーとアイキャッチ画像が全て表示されなくなったためチェックを入れるべきでした。
  • Category Order and Taxonomy Terms Order
    カテゴリーを未分類を一番上にする(デフォルトだと一番下にあってスクロールするのが面倒なため)
  • インポートした時全記事がカテゴリー未分類に分類されるため、未分類をオフにする(クイック編集で開いて編集)
  • 記事のURLがインポート元を維持しているかを確認(数個ランダムに確認)
  • カテゴリー構造とカテゴリースラッグがインポート元を維持しているかを確認します。
    作業サイトで行ったカテゴリー構造を維持していました。
  • この時点で発生していたエラーの対応(作業用環境では発生していないエラーがあったため対応)
    • 記事のアイキャッチ画像が表示されない
    • トップページのトップエントリーの画像が表示されない

    記事を一旦削除してインポートし直し、その際画像も全て添付付きでインポートする(添付ファイルをダウンロードしてインポートするにチェック)
    この対応でアイキャッチ画像とトップエントリーの画像を表示出来ました。
    インポート後、再度未分類のカテゴリーを外します。

  • Max Mega Menu導入、グローバルメニュー作成
  • ヘッダー文字を等間隔にする
  • ウィジェット等の設定
    作業サイトと同じ設定にします。
  • CSSカスタマイズ
    Simplicity2子テーマに作業サイトと同じカスタマイズを入れます。(親テーマCSSは変更しない。)
  • スマホ用のCSS、メニュー等の設定
    作業サイトと同じ設定にします。
    Simplicity2子テーマのCSSまたはモバイル用CSSに設定します。
  • 固定ページ作成
    作業サイトで作成した固定ページを維持していたため不要。
  • 固定ページにnoindex設定
  • フッター設定(コピーライト)
  • モバイル用スライドメニュー設定
  • モバイルサイトトップロゴ設定
  • 設定>メディア>画像サイズを全て0にする
  • その他プラグイン導入
    • Jetpack
    • Broken Link Checker
    • No Self Pings
    • TinyMCE Advanced
    • WordPress Popular posts
    • EWWW Image Optimizer
    • Table of Contents Plus
    • Revision Control

移行作業2.はてなブログ側作業1

  • はてなブログ側のAnalyticsコードを外す
  • はてなブログ側のGoogleSearchConsoleコードを外す
  • はてなブログ側でAdsenseに影響しそうなものは外す

移行作業3.ドメイン関連作業

  • はてなブログ設定でドメイン削除
    この後はてなブログへのアクセスはxxxxxx.hatenablog.comからのみ可能になります。
  • ムームードメインのCNAMEレコードを削除

この後、ドメインがある程度浸透するまでは、自分のPC環境ではhosts設定で見えていますが実際にはどういう状態なのか判断することが難しいため、キャッシュを削除したブラウザで確認します。

自分は作業環境としてFirefoxでWordpress管理画面にアクセスして設定作業。
はてなブログやWordpressブログの確認はIEでキャッシュをクリアして表示させて確認しました。

移行作業4.公開準備完了後

  • WordPress側でパスワード保護解除
  • WordPress側で検索回避設定を解除
    設定>検索エンジンでの表示
    「検索エンジンがサイトをインデックスしないようにする」のチェックを解除

移行作業5.はてなブログ側作業2

  • はてなブログ設定で検索回避
  • はてなブログトップページにサイト移転の記事を掲載
  • はてなブログで上記1記事を除き全記事を削除(ゴミ箱)
  • はてなブログヘッダー設定

この時点で2月11日PM19時頃でしたがドメイン浸透に時間がかかるため一旦作業を終了しました。

移行作業6.ドメイン浸透後作業

2月12日AM9時頃nslookupでドメインの回答が返るようになり、ブラウザからも表示されていることを確認したので作業再開しました。

  • PCのhostsファイルを元に戻す
  • 各記事のチェック
    記事名とURLの一対一対応XLSファイルでURLが全て該当の記事が表示されることを確認
    →パーマリンクやpostnameの設定ミスが数件あったため修正
  • hostsなしの状態でキャッシュをオフにしたブラウザでアクセス出来ることを確認
  • スマホのSafariからアクセス出来ることを確認
  • Simplicity2テーマ設定からAnalyticsコードを入れる
    Analyticsコードははてなブログで設定していたものをそのまま使用(移行前・後ともドメインが同じのため)

移行作業7.www正規化設定

この時点で作業開始から1日半経過していますが、ここまで順調に作業出来ているため、www正規化設定についてもクローラーからインデックスされる前に対応しておこうと思いました。

参考記事
【WordPress】.htaccessを使ってURLをwwwありに統一する方法と注意点

www正規化とは、自分の場合はこれまでwww.varis.jpではてなブログを運営していたため、検索インデックスがwwwありで検索クエリと結び付けられています。

で記事を公開するとwwwなしのURLでインデックスされるためこれまでのインデックス評価がゼロになります。

実際には、エックスサーバーの仕様でドメインを登録時にwwwサブドメインについてもAレコードで自動登録されているため、wwwあり・なしどちらでもアクセス可能です。
ただその場合はWordpressインストール時に設定したサイトURLに一元化されます。
掻い摘んで言うとwwwあり・なしどちらでもアクセス出来ますが到着ページはvaris.jpになります。

この状態でインデックスされるURLはwwwありとなしで半々になる可能性もありますが、恐らくwwwなしの状態でインデックスされると思います。
wwwなしだとパーマリンクの構造を維持していてもこれまでの記事のインデックス評価がゼロになります。
これをwwwありに一元化する設定がwww正規化です。
移行前の評価を引き継ぐなら、移行元が「wwwあり」の場合は移行先も「wwwあり」に設定します。

www正規化については、これまで調べていた情報から.htaccessでwwwサブドメイン付きURLへリダイレクトさせるのが正しいと思っていましたが、エックスサーバーに問い合わせすると.htaccessでの301リダイレクトは不要との回答でした。
ただ単にワードプレス管理画面でワードプレスURL、サイトURLの二つをwwwありのURLに変更するだけでよいとのことです。

技術的な理由としては「WordPressの仕様で、管理画面にて設定されたサイトURLへ自動的に転送されるため、[.htaccess]ファイルへの記述は不要」とのことです。
自分もWordpressに詳しいわけではないためこの理由はよく分かりません。

WordPress管理画面からWordpressURLとサイトURLを変更した状態

変更後、管理画面に入るためのURLが変わります。

  • 変更前 http://wwwなしドメイン名/wp-admin/
  • 変更後 http://wwwありドメイン名/wp-admin/

変更後はトップページや記事のアクセス先はwww付きで表示されるようになりました。
http://varis.jpでアクセスしてもhttp://www.varis.jpがランディングページのURLになりwww正規化出来ています。

移行作業8.サーチコンソール/サイトマップ関連作業、他作業

  • Google XML Sitemapsプラグインを導入しsitemapを作成します。
    参考記事
    Google XML Sitemapsの設定と使い方

    Google XML Sitemapsはバージョン4.0以降ほぼ自動化されており、これまでのようにsitemap.xmlをサーバーに保存したり手動で送る必要はなくなっています。(手動で送る事も可能)

    Google XML Sitemapsをプラグインインストールして有効化します。
    管理画面の設定>XML Sitemapで設定して保存。
    Notify Search Engines about your sitemapの所のyour sitemapを押すと更新されます。
    サーチコンソール側のクロール>サイトマップ>サイトマップの追加/テストから
    サイトマップをURLで指定して送る事も出来ます。

  • サーチコンソールで全記事をFetch as Googleする
    本来やるべきですが面倒なのでやっていません。
  • WordPress Ping Optimizer
    リストにURLを入れてenable pingingにチェックを入れてsave settingsで保存します。
    更新通知先は有志が年度毎にPing送信先サーバーを作っているのでそれを参考にします。

    参考記事
    WordPress Ping Optimizerプラグイン設定2017最新

  • Simplicity2テーマ設定から広告設置
    URL正規化し接続が安定したため広告を設置しました。(2月12日PM20時頃)
  • アドセンス広告のブロックを許可
    これまで、アドセンスの広告ではてなの規約抵触のリスクから一部のデリケートな広告をブロックしていましたが、はてなが関係なくなったため、デリケートな広告を表示可に変更します。
  • はてなブログ側アクセスが減っていることを確認
    これを書いている2月14日AM0時時点では0です。

移行作業9.移行判断

この後、企業の本番サーバーの手順であれば「移行の最終判断」という工程が入ります。
移行手順とテスト結果からOKかNGかを判断して作業を行います。
OKケースだと切り戻しなしで現状を維持します。

NGケースではそれまで検索順位があったキーワードで極端に下がったりインデックスが新サイトにされない場合ははてなブログに切り戻しをするかどうかを検討し切り戻しを行います。
戻す場合は、はてなブログ記事管理画面の右下のゴミ箱から記事を復元出来るので記事を戻し、はてなブログを公開にして検索回避を解除します。
WordPress側を検索回避にして全記事を非公開にします。

双方のドメインも切り戻し、はてなブログのネームサーバーを復活させCNAMEレコードではてなブログにドメインを向けます。
エックスサーバーのネームサーバーを入れていた設定は削除します。
作業的には切り戻しも直ぐに行えます。

今回は特に問題なく移行出来ているため切り戻しなしとしています。
理由としてはsite:ドメイン名で表示されるインデックス数が移行前・後とも同じ。
検索結果から表示されるURLで移行先(新サイト)に飛ぶこと。
Google Analyticsの統計が取れていることなどから判断しています。

実質的にはユーザーから見て接続断がドメイン切り替えから浸透期間の間の一日程度でその間クロールされたとしてもごく僅かな記事に留まるはずなので影響はほとんどありません。

上に書いているように以前は自分のドメインでもはてなに301リダイレクトされていたため、検索順位におけるはてなの影響は少なくないと思いますが、ドメインがはてなから完全に独自ドメインの評価だけになるため検索順位はある程度落ちると思っています。
それは最初からWordpressで運営して来なかった自分の問題なので仕方ありません。

以上で移行作業は終了です。
以下残タスクやメモなどを記載します。

残タスク・メモ

残タスク

  • PCサイトトップ画像
    →対応済み(暫定)
  • 個別記事の検索対策実施(SEO title、meta description、meta keyword)
  • 画像サーバー検討(エックスサーバーに移し変え、またはGoogleフォト続行)
    →一先ずGoogleフォトを継続
  • サイト全体の常時SSL化と「http→https」の個別記事リダイレクト(エックスサーバー無料独自SSLを利用)
    →対応済み
  • PubSubHubbub導入(インデックス高速自動化)
    →対応済み
  • 自動バックアッププラグイン
    →エックスサーバーデフォルトバックアップがあるため不要?
  • Favicon設定
  • モバイルサイトロゴからトップページ遷移
    →対応済み
    参考記事
    Simplicityに画面幅いっぱいのヘッダー画像を設定する方法
    Simplicity2カスタマイザー>ロゴを画像にするにチェック>モバイルヘッダー背景画像>画像の変更から使用するロゴ画像を選択>保存して公開を押す
  • モバイルサイトで横表示の時画像の裏にサイトタイトルが出ている対応
    →対応済み(上記の対応をした時に解決)
  • グローバルメニューにFont Awesome 4 Menusアイコン表示
    →対応済み
  • 主用カテゴリーグローバルメニュー直下にカード表示
    →対応済み
  • Jetpack有効時にフッター左下にマークのようなものが出る
    →対応済み(Jetpackの設定でマーク表示をオフにする)
    参考記事
    Jetpackを使うとブログの左下にニコちゃんマークが出現するよ!
  • Webmastertool(SearchConsole)で設定していたプロパティ「www.varis.jp」が「このプロパティにアクセスできません。」エラーが出た対応
    →対応済み
    恐らくこれまではてなブログの時にDNS側にTXTレコードで”google-site-verificationコード”を入れていたものを、サイト移行の際にTXTレコードを削除したため、発生したと思われる。
    以下のエントリーで対応していた内容。
    独自ドメインはてなブログをSearch Consoleでサブドメインwww正規化する方法を解説

    エラー解消方法

    1. meta name=”google-site-verification”以下のコードをWebmastertoolで発行
    2. 発行した以下のコードをSimplicity2子テーマのheader-insert.phpに挿入して保存
    3. Webmastertoolでプロパティを確認
  • シンプリシティ2の子テーマに反映されていたCSSが反映されなくなった
    →対応済み
    bodyの閉じタグがないため。閉じタグを入れると子テーマが反映された。
  • スマホでサイトを見た場合ニコニコプレイヤーがエラーになり更新を押してもエラーになる はてなブログスマホサイトからでもエラーとなるため解消不可。 ニコニコのプレイヤーを別のものに変えても直らない。
    →ニコニコ側の問題
    対応としては動画掲載の場合Youtubeのみを使う(ニコニコ動画は掲載しない)。
  • コピー防止プラグインのWP-Copyright-Protectionを有効化するとでカスタマイザーに入れなくなる 有効化するとテーマのカスタマイズでサイトトップにリダイレクトされるためカスタマイズ不可能になった。停止するとカスタマイザーに入れる。
    →対応済み
    別のコピー防止プラグイン(WP Content Copy Protection)を使って正常動作を確認。WP-Copyright-Protectionは削除。

その他メモ

  • キャッシュ系プラグインはPVがかなり増えない限りは導入しない方がよい。
  • はてなブログは完全に削除せず数ヶ月から数年などある程度の期間は残しておく。(移行元サイトは直ぐに削除するよりある程度残したほうがよいとの情報あり)(はてなブログ削除済み)
  • Simplicity2のブログカード機能 はてなブログのようなブログカード(カード型リンク)が使える ビジュアルで開いてリンクのURLを画面に入れてリンクを挿入から同じURLを設定するとブログカードで表示される。 (はてなブログの記事データをそのまま移行しても大抵のテーマではブログカードは表示されない。但し以下のタグでも表示はされていた。)
  • All in one SEO PackとSimplicity2の競合問題
    SEO系のプラグインとテーマ側のSEO機能は競合して相性が良くないとのことなのでプラグイン側は導入しない。SEO設定はテーマ側だけで行う。
    参考記事
    Simplicity2とAll in One SEO Packの相性問題
  • ソースコードやCSSをpreタグで囲んだ場合ビジュアル画面で編集するとpreタグなしに戻ることがある。
    liタグで囲んだ場所を改行して保存すると改行がなくなることがある。
    リンクのtarget=”_blank”を入れた箇所が保存するとtarget指定がなくなる。
    →原因不明(恐らくWordpressの仕様の問題)
    ビジュアル編集だとおかしくなりやすいので、修正は出来るだけテキスト編集を使う。
  • Simplicity2テーマのカードリンクの書き方をした場合、カードリンクになるリンクとならないリンクがある。
    →原因不明
    カードリンクの書き方をしない書式で統一するか、確実にカードリンクになるプラグインが今後出てくれば導入する。

本稿の終わりに

突発的に始めたため確定申告の時期に重なり、中々作業の終わりが見えず辛いものがありましたが、ようやく終わりになり、この記事が書けて良かったです。

作業的には、画像の修正とテーマの選定、記事のインデックス評価がどこまで維持されるかが分からないことの3点が難しい問題でした。
画像は元記事の画像量が多く純粋に修正量が多かったことと、Googleフォトの書式や挙動が未だによく分からないため、調べるのに時間がかかりました。

テーマの選定は、Wordpressに移ったばかりの場合は一番の問題かもしれません。
WordPressに詳しくない初心者は管理画面にログイン出来たとしても余りにも漠然とし過ぎていて何をすればいいか分からないためです。
テーマによってスマホ表示される・されないがあり、スマホ表示されない場合はプラグインを入れて出すのかという部分まで調べないといけません。
Simplicity2やSTINGERのようなパッケージ的なテーマを使うと移行で問題になりそうな大抵の事が解決されているため、作業が分かりやすいと思います。

記事のインデックス評価の維持は人によってどこまで重要視するかが違うと思いますが、独自ドメインで同じドメインにサイトを引っ越す場合は最も難易度が低いので自分のケースはそれほど難しくなかったと思います。
もし移行の判断が難しい場合はGoogleフォーラム(ウェブマスターフォーラム)で相談するといいと思います。
ブログやCMSの移行の質問と回答がスレッド形式で行われており有識者やGoogle社員が回答しています。

Google ウェブマスターフォーラム
ウェブマスター ヘルプ フォーラム

以上はてなブログからWordpressへのサイト移行の方法について掲載しました。
本エントリーが移行の際にお役に立てれば幸いです。

SPONSORED LINK