相模原市でWEBとSEOの学習メモ

神奈川県相模原市でWEB開発とSEOの勉強をしつつ地域情報発信や日記的投稿をするブログです。

SEO内部施策を用いて、完全にホワイトハットな手法でWEBサイトの順位を上げアクセスアップにつなげることを目標に、はてなブログで数々の実験をしています。ターゲットワードを決めて高順位も狙います。
現在のターゲットワード:「相模原 SEO」「商店街 SEO」

jQueryの質問をしたくて

こんな時こそはてなグループ!と思ってjQueryのグループを探してみたら、jQueryどころかJavaScriptのグループすら無かった!

まあ、このエントリを見て、答えられる方は答えてほしいのだが…

はてなブログでは、エディタでのレイアウト上の改行が勝手に半角スペース入りのp要素に変換されてしまうよね。これを、クライアントサイドのスクリプトで取り除きたい。それで書いたのが以下のコード。

$("p:contains(' ')").each(function(){
        if($(this).text == " "){
            $(this).remove();
        }
    });

だけど、これでは取り除かれない(勿論、jQuery.readyの中で呼び出していますよ)。どうしよう、今ココ。

この問題さえ解決すれば、はてなブログSEO上の弱点がかなり解決するように思うのだが…

今週の☆お題の残響効果って

今週の☆お題という文言をつけたエントリを書けば、はてなブログの公式まとめページに掲載される(何故今週の☆お題と書いているかはまあ察して下さい)。お題の受け付けが終了した後、大体「ふりかえり」が出たタイミングからアクセス解析におけるはてなブログからの数字が増加するのだけれど、これ、案外後々になっても当該エントリのアクセス数に影響するみたい。で、気付くと当該エントリがアクセス数トップに立っていたりする。

つまり、ユーザの使い方として、過去のお題を掘り返してめぼしいエントリがないかと探すという行為があるということだよね。これは想定外。みんな終わったお題については無関心なのかと思っていた。

あるいは、過去のお題のまとめページ自体にSEO的強さがあり、キーワード検索で飛んでくる人のランディングページとしての役割を果たしているということ。これは言うなれば、アーカイブページがSEO的に弱いはてなブログの、欠点を補っているということだ。

倫理的に問題あるだろうけど、投稿する全エントリに今週の☆お題指定をしても良いくらいだ。

調子に乗って長文エントリにするとまたアクセス数が…

Bootstrap談義パンダアップデートの所感など、"書きたい"ネタが沢山あったので思うがままに書いていたら、またアクセス数が落ちていました。短文投稿、心がけ大事。

はてなブログのデザインがBootstrapベースだという事を書いたけど、どうやら本家TwitterのBootstrapベースというよりは、Google Bootstrapベースになるのではという気がしてきた。ボタンのデザインが立体的になるのがTwitter Bootstrapで、Google Bootstrapはより平面的なボタンになる。

トップページのサービスへのリンクの横に、NEWという文言のラベルがついていると思うが、ああいった最近よく見るデザインはBootstrapベースであることが多い。デザインの1ジェネレーションですね。

パンダアップデート!

Googleが新バージョンのパンダアップデートを行っているそう。海外SEO情報ブログ経由の情報で、元ソースはSearch Engine Landとのこと。

元ソースの筆者であるBarry Schwartzがパンダアップデートの兆候を察知し、Googleに確認したそう。Google曰く、今回のアップデートはデータのアップデートでなくアルゴリズム自体の変更で、パンダにより不当に"黒"と判断されていたサイトの救済になるとのことですって。

パンダアップデートって何?

今更説明するまでもないだろうけど、パンダアップデートというのはGoogleの検索順位決定のためのアルゴリズムアップデートの内の一つで、ペンギンアップデートと並んで、WEBサイトが品質の低いサイトやスパムサイトではないか"白黒"はっきりつけるアップデート。ペンギンアップデートが仕込みリンク等の不正な外部施策に"黒"の烙印を押すのに対して、パンダアップデートはコピーコンテンツに"黒"を突きつける。

今回のアップデートの変更点

今回のパンダで、パンダの黒い部分の面積が狭くなったようだ。パンダアップデート以降のSEO情勢は、それまでのWordPress最高!重複コンテンツはアクセスアップの一手段!な状況から、一気にWEBサイトの設計に神経を使わなければ行けない状況に変わった。なにしろ、WordPressでカテゴリーページや月別アーカイブを有効にしているだけで、パンダに"黒"と判定される危険性があったわけだ。パンダアップデート以降更新意欲を失ったサイト運営者も多いと思う。

今回のアップデートの影響

今回のアップデートは時間をかけて有効化されていくそうなので、影響について測るのはまだ早いかもしれない。特にWordPressサイトの回復に期待したいところだけど(ここしばらくホットエントリが死ぬ現象があった)、確かにアクセス数が以前の水準に戻っているような気がする。ただ、アクセスの鈍化に対して個人的に対策も打った結果であるので、アルゴリズム変更の効果なのかは不明。

 

はてなブログには、これを受けてアーカイブページやカテゴリーページなどを、記事全文を表示するタイプに変えてほしいね。

多分、はてなBootstrapを作りたいのではないかと思う

Twitterが提供する便利なCSSフレームワーク、Twitter Bootstrap。改変利用が自由という事で、Bootstrapを自社用にチューンして使用するWEBサービス企業なども多い。まあ、はてなもきっとそのうちの一つなのだろう。

Googleは、Twitter Bootstrapを元に、GoogleっぽいUIを実現するGoogle Bootstrapという派生プロジェクトを行っている。Twitterっぽいインターフェースを使いたいという人は多いだろうが、Googleのデザインはね…

Googleに似せたフィッシングサイトを作るくらいにしか使えないんじゃない(笑)

 

Bootstrapの改変版を自社で提供すれば、WEBサービス企業としてのアピールにもなる。そこで、はてなもそのうちはてなBootstrapという形でチューンしたヴァージョンを出すのではと思っている。まあ、現状はてなブログなどにオリジナリティあるデザインの部分は無いので、先のことになるかもしれないけど。

はてなブログトップページはTwitter Bootstrapを土台にしているのかな

Twitter Bootstrapとは

Twitter BootstrapというCSSフレームワークがある。まず、CSSフレームワークについて説明をしなければならないが、要するに出来合いのCSS記述集のようなもので、既にデザイナーがCSSを使って魅力的に作ったボタンなどのUIを、HTML側で指定するだけでサクっと利用できてしまうという仕組みだ。

導入の仕方は、他のWEB系フレームワークよりも簡単で、metaタグでCSSファイル(と、JavaScript)を読み込むだけで良い。こんなので導入できるものだから、HTMLの初学者でも迷わず使い始められる。

 

で、なんでTwitterが名前についているのかというと、このフレームワークを提供しているのがTwitterだからだ。つまり、Twitterでよく見かけるあんなボタンやこんなUIを、HTML側で要素にクラスを指定するだけで簡単にサイトに追加できる。デザイナーいらずだ。

 

そんなわけで、ホームページ初心者だけど簡単に見栄えのいいホームページを作りたいという人には、WordPressよりもオススメだ。WordPressの場合インストール部分を伝えるのが少し難儀なのだが、Bootstrapの場合はHTMLさえ判れば簡単に終わる。

 

はてなブログがBootstrapベースと疑う理由

で、Bootstrapの強力な部分は、メイン部分とサイドバーのようなカラムレイアウトを簡単に実現できるところだ。やり方は簡単。まず画面全体の広さを12という数字と見なして、メイン部分がサイドバー部分の二倍の広さをもつレイアウトにしたければ、メイン部分のdivにspan8、サイドバー部分にspan4というクラスを指定する。8と4を足すと12。つまり、画面の幅を12分割したうちの、12分の幾つを使うか数字で決めて、それをspanの後ろにつける。もし5対7にしたければspan5とspan7ね。

また、Bootstrap本体のCSSの他にbootstrap-responsive.cssというCSSを読み込めば、レスポンシブデザインが実現してしまう。PCとタブレットとスマホとそれぞれの画面解像度に合わせたデザインに自動的に切り替えるのがレスポンシブデザイン。結構作るとなると面倒臭いのだけれど、これも勝手にやってくれるわけだね。

 

で、はてなブログトップページのソースを眺めていたら、メイン部分にspan8、サイドバー部分にspan4というクラス指定がしてある。ははーん、トップページについてはレスポンシブデザインの実現や、その他今風な機能の実装に楽をしたんだなと気付いた。はてなダイアリー時代の雰囲気(borderとか多用したお行儀の良いオタクデザイン)と少し異なるのはそのためだろう。

Twitter Bootstrapは良いものだ

Twitter Bootstrapはどうも名前で損をしていると思う。Twitterがついているから、Twitterの機能拡張のように思われる。ツイートしなきゃいけないの?となる。ところが、蓋を開けてみるとただの便利ソース集、手間ひまバスターなわけで、案外使えるじゃんとなる事請け合い。無料でテンプレートも結構転がっているので、WEBデザイナーポートフォリオ作成時には重宝するんじゃないかな。こんな今風の事もできますよ!という売り込みに最適。なにしろレスポンシブデザインができるとなると、即戦力ですからね。

はてなグループ プログラミングのグループのカオスな感じが良い。

はてなグループは規模から言っても、プレゼンテーション的にもまだまだこれから。と以前書いた。サービス開始直後に作られ、いまだ参加ブログが1になっているグループを見ると、他人事ながら心配になる。

その中で、比較的参加者の多いプログラミンググループ。現在参加ブログ数が80と、グループに登録する意味がありそうな数字になっている。

プログラミングというおおまかなカテゴリなので、当然参加者の言語や習熟度などがバラバラで、このグループのタイムラインを追っても何も参考にならないところが面白い(笑)。でも、こうしたカオスなタイムラインというのは、ブログサービスに本当に必要なもの。トップページの新着エントリーの代替だと書いたそのまま、ユーザとしてはこういうものを求めているはずだね。

ただ、ウチのようなブログがグループに参加するとなると、SEOのグループのタイムラインに相模原記事を沢山載せる事になってしまう結果になるのだが、タイムライン投稿用のタグなんかはあるのかな。