Movabletype4.2x 静的ページにてLPO対策してみました。GoogleAjaxFeedAPIを使うことで手軽で簡単に実装対応することが可能です。その方法について紹介しています。
Movabletype4.2x静的ページでLPO[Landing Page Optimization（ランディングページ最適化）]対策してみました。Google AJAX Feed API - Google Codeを使えば、結構簡単に実装・対応できます。（ただし、検索機能を使います。最新エントリー順に表示されてしまいます。）
PHP化でのプラグインしかないようなので、ajax使えば静的ページでも簡単に対応できるだろうと思い、jQuery ajaxで試すも、パースがうまくできず、最後の手段で考えていたGoogle AJAX Feed APIを使うことにしました。
実際にLPO対策したページを見てもらうには以下のGoogle検索のテキストリンクから当ブログに訪問してもらえばわかります。記事右手の検索ボックスの下にLPO対策の関連記事が表示されます。
あと、サイト内検索でのリファラーにも対応しています。一度、このサイト内でお好きなキーワードで検索してみてください。検索結果後からの選択記事先でもリファラー取得できますので、LPO対策の関連記事リストが生成されます。
PHP化でのLPO対応策
動的生成すればプラグインで簡単に対応できるようです。以下の記事を参照ください。
- WordPress＆MTにLPOを導入しよう！
- http://ascii.jp/elem/000/000/211/211773/
- Movable Type 備忘録 - TinyLPO プラグイン
- http://bizcaz.com/archives/2009/01/25-154411.php
- 検索エンジンの検索ワードから関連リンクを提示するMovableTypeプラグイン：TinyLPO - Open MagicVox.net
- http://www.magicvox.net/archive/2008/10061124/
- MT4で簡易的なLPO対策を実現するモジュール : delab
- http://de-lab.com/article/mt-searchkeyword-lpo/
静的ページでのLPO対策
MT4.2xでは、サイト内検索キーワードに対してフィードが生成されます。（ある意味独自コンテンツapiを提供できるという解釈もできるかと・・・）リファラーから文字を抜き出して、search.cgiに投げて、返ってきたxmlをパースし表示させればできる。
FeedControlNew! Google AJAX Feed API - Google Codeのコードにリファラーから文字列を抜き出すコードを追加する。以下そのコードとなります。<head></head>の間に追加すればOK
<script type="text/javascript" src="http://www.google.com/jsapi?key=[API-KEY]"></script>
<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
var pattern = /[&\?](p|q|query|MT|qt|searchText|kw|search)=([^&]+)/;
var ref = document.referrer.match(pattern);
if(ref){
var refword = decodeURI(ref[2]);
var feedControl = new google.feeds.FeedControl();
feedControl.addFeed("http://[mtcgiまでのパス]/mt-search.cgi?search="+refword+"&Template=feed&IncludeBlogs=[ブログID]&", refword+"を含む記事");
feedControl.draw(document.getElementById("feedControl"));
}
}
google.setOnLoadCallback(initialize);
</script>
xmlアドレスには、ブログ検索が実行されるアドレスに書き換えればOKです。（実際に自分のブログで何かキーワードで検索実行するとそのアドレスが表示されますので、/mt-search.cgi?searchまでのurlパスに書き換えてもらえればOKです）
あとは、新規ウィジェットテンプレートもしくは、テンプレートモジュールを作成して、searchcgiの結果表示する以下のコード書き込み、好きな位置に置けば（ウィジットもしくはインクルードさせれば）OKです。
<div class="widget-archives widget">
<div id="feedControl" class="widget-content">
</div>
</div>
デザインの整形は、以下を参考にcssにて整形してみてください。
<div class="gfc-resultsRoot"> <div class="gfc-resultsHeader"><div class="gfc-title">Digg</div></div> <div class="gfc-results"> <div class="gfc-result"> <div class="gf-result"> <div class="gf-title"><a href="http://feeds.digg.com/~r/digg/popular/~3/M11s29jzMDw/Barack_Obama_sends_bust_of_Winston_Churchill_back_to_UK" class="gf-title" target="_self">Barack Obama sends bust of Winston Churchill back to UK</a></div> <div class="gf-relativePublishedDate">25 分前</div> <div class="gf-snippet">The return of the bust of Churchill (loaned after 9/11) flustered the British government because they didn't ask for it to be ...</div> </div> </div> </div> </div>
プラグイン化も考えて、途中まで作ってみたものの、search部分のパスアドレスの取得がわからず断念。Movable Type Developer Documentationで探してみるも見つけれなかった。（$blog->site_pathで取得できる？）
LPO対策関連エントリーの位置
本文頭もしくは、末尾においてもいいかと思います。ただ、頭に置いた場合、本来の検索結果で期待する記事に余分なコンテンツが入り、ストレスを感じさせるかもしれないと思い、右部分に。
本文末尾にした場合、本文を途中まで読んで、自分の期待するコンテンツでなかった場合、離脱するかと思い、右部分にしました。
MT4.2xの検索機能
MT4.2xでの検索機能でフィード（xml）を生成するのは魅力的です。MTはいくつものブログを生成できます。データベース用のブログを構築し、自社商品・サービスに関連するキーワードのデータベースブログ（IT用語辞典 e-Wordsみたいなもの）を構築。記事の内容に併せて、関連キーワードについての情報を提供できるようにしてみるのもいいかと思います。
今回と同じようにGoogle Ajax Feed APIを使って本文末尾に表示させてみてもいいかとおもいます。その際に渡すキーワードはタグから拾ってみてもよろしいかと。
今現在perl勉強がてらtwitter botを作成中。よくあるbotは、自コンテンツの更新情報を流すのみの機能。そうじゃなくて、@で投げてきたキーワードに対して、自社コンテンツの情報から関連する記事情報を返信するようにすると面白い。そんなものを作成中。サブルーチンでXML::Atom::Feedを使い、MTのsearchcgiにキーワードを投げ、返ってくる情報を返信するように。MTとtwitterを使ってそんなこともできる。APIを提供しているサービスはほとんどできると思うけど。
twitter bot 例
- Twitter / glang
- Twitter / yungsang作：翻訳bot 英文を投げれば、翻訳したものを返す。
- Twitter / tabebot
- 「@tabebot 駅名」で駅近くの話題のレストランをあなたに変わって調べます
大切なのは、コミュニケーションできるプラットフォームのなかに欲しい時に欲しい情報が取り出せる仕組みを作ることかと思う。一応MTだとそんなこともできると思う。
ｊQueryで
本当はjQueryを使って実装してみたかった。最初は、$ajaxでやってみるもうまくパースできず（なんでだろう？）、次にjFeed: JavaScript jQuery RSS/ATOM feed parser plugin - jf-hovinne.blogもxmlアドレスでエラーがでてしまう。結局Google Ajax Feed API使いました。お時間ある方、jQueryで実装できるコード考えてみてください。そうすれば、もう少し表示内容に幅を持たせることができると思います。自分でもチョコチョコやってみるつもりでもいます。
参考記事
今回の記事内容についてこちらの記事をよんで参考にさせてもらいました。ありがとうございました。（マッチ部分パターンについて）
- LPO導入で用語辞典からASCII.jpへの誘導が2倍に！
- http://ascii.jp/elem/000/000/193/193041/
はじめまして。
このページを参考にさせて頂いてます。
エキサイト検索から日本語をキーワードに検索した結果から表示すると、（例えば、「photoshop 合成」でWEBデザイン BLOGさんを検索し表示すると、）
firefoxではLPO対策の関連記事は表示されず、IE8では"
エラー: デコードする URI は有効なエンコーダではありません｡"と警告されます。
var refword = decodeURI(ref[2]);
が引っかかっているようなのですが、どうしてでしょう？
はじめまして、コメントありがとうございます。
エキサイト検索の時のクエリパスパターンが無かったからかもしれないですね。
ちょっと調べてパターン追加して試してみます。お声かけていただいてありがとうございます。Google検索ではLPO対策で弾き出されたテキストまでキャッシュしてくれているので親和性はよさげですね。
返信ありがとうございます。
エキサイト検索は、Shift_JISなんですね。
しかたがないので、エキサイト検索を対象外にしました。
ご報告ありがとうございます。あれから試したものの・・・わからないままでした。
また、時期をみていくつかの検索サイトのクエリなども調べてみます。
これからもよろしくおねがいします。