2013年7月29日月曜日

BloggerでWordPressのように SEOを頑張ってみる


Blogger (ブロッガーとかブロガーとか読むようです)とは、Googleのアカウントを持っている人(gmail やyoutubeなどでログインして使っている人ですね)は、契約すると同じIDですぐに使えるブログサービスです。 私のこのブログもbloggerで作られています。

で、タイトルのSEOというのはサーチエンジン最適化 ということでして、要するに検索エンジンの会社google の作ったブログシステムを使って、さらにいろいろやって、検索エンジンで上位になる方法を今回考えました。


そんな仕事がなかったので、してなかったのですが、この頃のblogger 本当にすごくて、メールフォームとか、検索の対策とか、404の処理とか、自由度が非常に高まっております。

久し振りに、とことんwordpress と何が違うねん!的発想で、頑張って作ってみました。
京都山科区のヨガスタジオマーラさんです。 こちらの方はwordpress がいいと言うけれど、エンドユーザーに後はお客様が…。と渡せるというのはblogger の最大の強みだと思います。

打ち合わせ3時間。移動時間入れて5時間。

製作時間約2日くらい。 デザインはロゴはデザイナーのロコハウスさんから来て、それを元に仕上げていきました。

その前に設定に1週間かかりました…orz  ←これがしんどかった。でも、これでサクラだろうと、どこだろうとドンと来い!設定してやるという気持になれましたw.

前からやってみたかった、ここのテンプレートを使ってみました。 なんと、これが無料なんだよね。無料でいっぱいある。wordpressの無料のテンプレートほどじゃないですが、そこそこいいと思います。

旧型のモニターで見るとこんな感じ…検証がこの頃本当に大変です。


別にテンプレート使わずにBlogger標準にjquery 入れ込んでいくのもいいかもしれないが、確かに超複雑なjquery を入れ込むの結構面倒なんで、オリジナルで書くと時間かかります。

で、このテンプレートが気にいったのは、スタティックページ(ブロガーは独立したページという機能があり、固定ページとしてメニューで表示できるものが10ページまで作れます。リンクはたくさんできます。)が、トップと右に両方に作れて、表示させるものをそれぞれ独自に設定できるという便利なJavaScriptがあったからです。

静的ページ10ページ作っても全部をコラムに表示させると目がちるし、デザイン的に美しくないので、これだと分けられるのでキレイです。

で、これに今回、私の大好きな Easy background を入れ込みまして、バックにお花がキレイに常に右端の下に表示されるようにしました。

軽くていいなと思った Flex Slider 安定してIEが見れなくて、 jquery のバージョンが 1.7.0じゃないといけなとわかるまで…若干ハマッタ。

で、今回はブログの名前にこだわりました。

このブログの名前は 京都山科のヨガ教室 マーラ です。

音声検索で検索する時に、山科区ヨガスタジオ とは私は言わないと思うんですよ。 自然に「京都山科区のヨガ教室」とか、「山科区のヨガ」とか言うと思う。 これからの時代は、携帯による音声検索を意識して名前を作っていかないといけないと。googleの人が言うとりました。なるほどなと思います。(私の英語力での判断ですが…)


これを誰かが翻訳を早く出して欲しいのですが… こちらの日本語のウェブマスターブログとは内容がまったく違いますね。

で、ま、屋号は ヨガスタジオ とされていたのですが、ここはあえて ヨガ教室ともってきたいと。

ただ、ブログのこのタイトル部分にヨガ教室とするとダザイことになってしまいます。それを今回jquery で置き換えました。 ちゃんと横文字で Mala となってます。
スタジオの綴りが間違っています!studio です。 すみません。英語できるとか言うじゃなかった(-_-;)

要するにh1.title を.html で書き換えろと。 
こうすると、h1 要素の中に span 設定を入れることができて、細かくデザインを入れられます。
検索では、このように出てきますが、ブログのタイトルとしてはすっきり見える。

こんなことしなくても、上の方に超小さくタイトルを入れて…タイトルは別に画像で作るとかしてもよかったのですが、他のデザインの関係でこっちの方がいいかと。

これ、googleが禁止している隠し文字になるかもしれない… いや、そんなはずはない。しばらく実験ということで…。たぶん大丈夫だと思うのですが。←大丈夫みたい。

見たらびびるほど、jsの塊みたいなサイトなんですが、不思議なことに適当に作っても、基本的にblogger で作るとかなり早くgoogle では上位に上がってくるので、そこまでする必要もないのですが、前からこれができるはずだと思っていたのです。 なかなかオシャレな技ではないかと気に入っています。 山科 ヨガのキーワードすぐ近くにすでにライバルもあって、結構厳しいキーワードらしいことがわかってやってみました。

でも最初いい加減でjs入れていたらIEで全滅に見れてなくて、慌てて順番を調整。JSの順番でうまくいかないのがIEの特徴ですね。

で、今回勉強したのが、このテンプレート、トップページの見せ方を強制的に写真を200*200に縮小するので変になる。で私がstyle= のところに width=200 height=auto と書くとIEでうまく表示できない。それがなぜか cssでクラス設定するとちゃんと出るねん! 勉強したわ。



後、今回のオススメは、新しく追加された連絡フォームを静的ページの1ページとして入れました。


後、サウンドクラウドで音声を添付してみました。 音声は何かしながら聞けるので、説得という意味では宣伝にピッタリな媒体ではないかと思います。 AQUOSPADで録音しました。 お客さんから商品の魅力を聞き出して、それをそれこそそのまま載せることができるのがいいと思います。

後、何といっても一番早く検索エンジンに登録されるのは、カスタム検索ですので、カスタム検索をくっつけました。 めんどくさかったから、色を似せたのをカスタマイズして、

#___gcse_0{width:260px !important;height:40px !important;;float:right !important;z-index: 10;}

と書き加えて入れてみました。 
こういう超カスタムテンプレートを使うと、自分のオリジナルで壁紙変えたいとかできにくいのが玉に瑕(たまにきず)ですが…。



私がブロガーがいいなと思うのは…wordpress とか nucleusとかでサイト作って、エンドユーザーが編集できますというても…しないわけである。

なんか怖い感じがするらしい。でも、このblogger だとけっこうお年寄りでも使ってくれるわけです。
写メで送ったらそのまま記事になるので、後はちょちょいです。みたいな感じで。

インターフェイスがやはり使いやすい感じはするので、お客様に使ってもらえるホームページにはこのgoogle blogger は悪くないと思っています。 日本ではアメーバ-カスタマイズが多いのですが、私はアメーバの読者になったら迷惑メールが山盛り来る感じが好きになれず…。

また、そのうちjquery のトップの画像やコメントをユーザーが好みで変更できるような工夫も考えてみたいなと。

やっぱり、最近プログラムいじったりする仕事が多かったのですが、私はやっぱりCSSを細かくいじるのが好きだわと思った。

凝りだすとキリがないのが困りものである。

今さら聞けないjQuery実行パターンまとめ ←人の書いたものを見ているとよくわからないときがあり、$=jQuery なのだというのはわかっているのだが、なぜわざわざ書き分けるのかしりたかったのがわかった。 
blogger のコンパネに新しく、記事ごとの検索エンジンへの説明が追加されました。
 これは非常に重要で、ここに文章の簡単な説明を追加することでよりSEOになると思います。 また下のコメントを記事ごとに許可、不許可が選べるようになっています。なぜか、ずっと不許可になってしまうブログがあるのですが…不思議でたまりません。いちいちここ開けて許可にしてください。
ここのコメントをgoogle+のコメント欄にすることができます。これが結構SEOにこれまたいいと思われます。まだメンバー少ないから拡散にはならないけど。なんか私は個人的にはGoogle+のスッキリした感じが好きですよ。

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索