SEO効果を捨てずにwordpressを移行したまとめメモ

先日、このブログをサーバー&ドメイン移行した際にSEO効果を捨てずに移行したメモを下記に残します。
SEO効果を捨てずにと特に根拠はないのですが、実際に自分が移行して、数日間たつのですが、アクセスは減っていないため問題ないと判断したのでメモしておりますw

今回自分が移行した内容は下記。

http://e-com.webhop.net/wordpress/
自宅サーバー+DDNS(マンションタイプの光のため固定IPじゃないから)
※CentOSを使ったLAMP環境

 ↓↓

https://matsudapress.com
さくらVPS+お名前.com
※CentOSを使ったLAMP環境

実際に移行した作業

  1. 移行先のサーバー契約&ドメイン取得とDNSの設定
  2. 移行するデータのバックアップを取る。移行先にwp-contentディレクトリだけコピー
  3. wordpressのエクスポート機能を利用してエクスポートし、移行先にインポート
  4. 移行先で実際にwordpressが正しく動いているか確認する。

    おそらくデータ移行後も投稿データ内の画像データのパス名が旧ドメインのパスに向いているとおもうので、こちらは直接投稿データのDBを書き換えます。
    下記のようにsqlの便利なreplaceをつかって旧ドメイン→新ドメインへ書き換えを行います。
    ※SQLはターミナルや、phpmyadminなどから実行できます。
    ※wordpressのメディア機能などを利用している場合はwp-content/uploadsディレクトリなども移行させておいてください。
    ※wp_などテーブル名は、環境によって異なるのでwp-config.phpのprefixを確認してください。

    update wp_posts set post_content=replace(post_content,'古いURL','新しいURL')
    update wp_posts set guid=replace(guid,'古いURL','新しいURL')
    update wp_options set option_value=replace(option_value,'古いURL','新しいURL'
  5. あとは移行先のプラグインなどカスタマイズ設定を手直し
    SEOプラグインやソーシャル機能のプラグインなど、色々ありますが(汗
  6. そして無事移行先のwordpressが問題ない状況になったら移行元のURLから新しいURLにリダイレクトする設定をします。
    今回はwebサービスとしてapacheを利用しているので、apacheの.htaccessを利用したリダイレクトを行います。
    ※今回の設定はmod_rewriteと.htaccessが利用できる必要があります。
    移行元のwordpressのルートディレクトリに下記のように.htaccessを設置します。
    自分の場合だと http://e-com.webhop.net/wordpress/ に下記.htaccessを設置。

    Options +FollowSymLinks
    RewriteEngine on
    RewriteRule (.*) https://matsudapress.com/$1 [R=301,L]

    この方法であれば正しく単一記事のURLも引継ぎます。
    http://e-com.webhop.net/wordpress/?p=100
    ↓ (ちゃんとパラメータを保持してます)
    https://matsudapress.com/?p=100

    また、この301リダイレクトの方法はgoogleのヘルプにものっており、正しい方法と思われます。 http://www.google.com/support/webmasters/bin/answer.py?answer=83105

  7. 上記301リダイレクトより、より速やかにgoogleに移転告知したいのであれば、
    google webmasterツールアドレス変更機能を利用するといいみたいです。
    ただアドレス変更機能はルートドメインのみになっており、今回の自分みたいに
    http://e-com.webhop.net/wordpress/ とサブドメインを利用していたり、パスをきっているとダメなようなので注意が必要。
    ※今回は新しくサイトと追加しました。

    ウェブマスターツール アドレス変更

    上記のように変更できません。

    ただこれ見て思ったのが、ルートドメインはSEO的に結構優待されるのでは!とおもってしまいました。

    いままでhttp://e-com.webhop.net/wordpressは自分が持っているほかのドメインのサイトよりアクセスが大きい方だったのですが、いっこうにpagerankがあがりませんでした。

    なのに、他のドメインでルートドメインのものはこのブログの10分の1のアクセスしかないなのに、pagerankがあがったのでルートドメインは重要な役割があるのかもしれませんw
    すみません、あくまで推測ですw

  8. 移行元と移行先のサーバーで並行稼動期間をもたせて、旧ドメインにアクセスしても新しいドメインへ流れさせます。
    あとはタイミングをみて旧サーバーをクローズしようと思ってます。

奥行きのある3Dにみせるjqueryライブラリ『smart3d』を使ってみました!

先週の休みにせっかくこのブログをリニューアルしたので
TOPのヘッダー画像にギミックを入れてみました!

画面上部の画像の上でマウスを動かすと奥ゆきがあるように動きます。

最近googleのトップロゴもよくギミックがつかわれていますが、まけじと何か新しいのを入れようと思い色々さがしたところ『jquery.smart3d』というライブラリを発見!

『jquery.smart3d』
http://4coder.info/en/code/jquery-plugins/smart3d/

奥ゆきを出し3Dっぽくみせることができるライブラリです。
いくつか用意した画像を何枚もかさねています。png画像を利用して、blurをかけてそれっぽくしてます。
インスパイアされたのはバイオハザード4のこのシーン↓(汗

バイオハザード4インスパイア

 

ただ背景が白くて奥ゆきがあるというだけですが、、(汗

・・・・・利用方法も簡単で、下記ライブラリとjqueryを読んで

<script type="text/javascript" src="/js/jquery_smart3d/jquery.smart3d.js"></script>

あとは、jqueryで下記のように記述し

<script type="text/javascript">
    $(document).ready(function() {
        $('#smart3d-head').smart3d({ last_is_static: true });
    });
</script>

htmlで下記のように表示した画像を指定する。とてもシンプルにできています。

<ul id="smart3d-head" style="display:none">
                                <li><img src="/images/headers3d/back1160.jpg" /></li>
                                <li><img src="/images/headers3d/matsudapresslogo3d.png"  /></li>
</ul>

一応IEにも対応してます。
またmedia queriesでスマホなどの画面サイズ小にも対応するため、
画面サイズが大きくないとこのギミックが表示されないようにしました。
※onloadで読み込んでいるので、読み込みが完了してから上部画像みていただけると幸いですw

 

ずっとプログラマーとしてやってきたので、
最近デザインももっと勉強しなきゃと日々危機感を感じている今日この頃。。

リニューアル!! ルートドメインへ変更&MediaQueriesでスマートホンレイアウトに対応しました。

今回サイトのサーバー移行と一緒に、いままで無料のDDNSで利用していたサブドメインを、
独自ドメインを取得してルートドメインに変更しましたw

http://e-com.webhop.net/wordpress/ → https://matsudapress.com

また、移行先もwordpressにしhtml5&CSS3対応にし、スマホで表示してもレイアウトが崩れないようまえから気になっていたmedia queriesを利用したブログに変更しました。

Media Queriesを利用することで、ブラウザの画面サイズによって利用するCSSを変更できるので、ブラウザの画面サイズを意識し、スマホでも見やすいサイト作成ができます。
このブログでもサイズによってこんな感じに変わります。

media queries

サイズ小(主にスマホ用)

 

 

 

下記のように横幅の最小と最大を指定し、そのサイズ内ならこのCSSを適用するということができます。

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	body {
		padding: 0;
	}
	#page {
		margin-top: 0;
	}
	#branding {
		border-top: none;
	}
}

上記を利用しスマホの画面サイズを意識て作ることできれいなPCデザインをいかしつつスマホにも同時に適用できるのが魅力的です!
ちなみにいままでwordpressのプラグインでスマホ用の画面を用意してましたが、この方法なら好きにカスタマイズできるし、PC&スマホ両方に適用させたい場面など大変便利になります。

実は今回利用しているテーマですがデフォルトテーマで、最初からMedia Queriesに対応しているので、気になる部分をカスタマイズして利用させていただいております♪

 

サイトを移行しました!

本ブログ(wordpress)を移行&リニューアルしました!
いままで自宅サーバーで稼動していたのですが、、
安くて評判がいいさくらのVPSに乗り換えましたw

最近自宅サーバーの調子がわるくまたDDNSをしているため管理が面倒 だったので、
このタイミング切り替えました。

自宅鯖

 ↓↓↓

さくらのVPS

というのも・・本当に自宅サーバーってお得なのかを、考えてみました。。

自宅サーバー(タワー型サーバー HPProliant ML115)
メリット:サーバー代のみ、ランニングコストなし(電気代は別)、自由に触れる(制限がほぼない)
デメリット:電気代、停電のリスク、うるさい 、ネット環境必須

さくらのVPS(安いので月1000円しない)
メリット:設置スペースが不要、うるさくない、ネット&電気代かからない(ランニングは発生するが)、固定IPが付いてくる
デメリット:完全自由には触れない(だが順仮想でrootがもてる)、ランキングがかかる(電気代はかからない)、

ざっと上記が判断材料としてあがり、気になる電気代を下記電気料金をシミュレーションしてくれるサイトで計算してみた。

電気代計算シミュレーター
http://www.ienakama.com/tips/page/?tid=353 

結果的にいまの自宅サーバーだと24Hフル稼働しているので、電気代で1500円~3000円ぐらいはかかっている・・・しかも設置スペースと音がうるさい。。との事で嫁に承諾を得てVPSを契約しました。

実際使ってみた所管は、環境が外にあるので、管理している感がなく非常に楽になった感じします。またDDNSを利用していたので、毎回IPが変わるのを気にしなくてもよく安定感がでました。