> Movable Type の体験



Movable Type の体験

パンくずリストの構造化マークアップ



SEOで注目されている「構造化マークアップ」を学んでみました。

microdataやmicroformats,RDFaを使用した「構造化マークアップ」
を行うことで、検索結果にマークアップした内容が表示されます。

これを「リッチスニペット」といい、例えば「パンくずリスト」などで、


【Googleで検索された表示例】

Kindle書籍アメリカ免除申請
www.pb-support.com > 電子書籍
4 日前 - kindleで電子書籍を出版すると、Amazon出版サービス(KDP)が
アメリカのサービスなのでそのロイヤルティには日本所得税10%の他、
アメリカ所得税30%で合計40%が源泉徴収されます。・・・・

のようにリッチスニペットにパンくずリストが表示されます。


microdataでは、タイプを指定する際にschema.orgやdata-vocaburaly
のようなボキャブラリを使うことになります。
schema.orgは、GoogleやYahoo、Bingなどの3大検索エンジンが
サポートするボキャブラリですが、schema.orgを使用してパンくずリストを
マークアップしても、リッチスニペットにパンくずリストが表示されません。

「data-vocaburalyを使用したパンくずリスト」を
MovaleTypeのブログで作ってみました。





<mt:If tag="EntryCategory">
<div class="entry-categories">

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<$mt:BlogURL$>" itemprop="url">
<span itemprop="title">トップ</span></a> &gt;
</span>

<mt:IfNonEmpty tag="EntryCategory">
 <MTParentCategories glue=" &gt; ">
 <MTIfNonZero tag="CategoryCount">

  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="<$mt:CategoryArchiveLink$>" itemprop="url">
   <span itemprop="title"><$mt:CategoryLabel pmhc=""$></span></a> &gt;
  </span>

 <MTElse>
  <span itemprop="title"><$mt:CategoryLabel pmhc=""$></span>
 </MTElse>

 </MTIfNonZero>
 </MTParentCategories>

</mt:IfNonEmpty>

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <span itemprop="title"><$mt:EntryTitle$></span>
</span>

</div>
</mt:If>






このようにdata-vocaburalyで作ると、Yahoo!でもGoogleでも
パンくずリストがきちんと検索結果に表示され、クリッカブルになっています。


クリッカブルされるまで、少し時間がかかりますが、
Google「構造化データ テスト ツール」を使うと、
Google 検索結果でのページのプレビューを表示することができます。




このエントリーをはてなブックマークに追加



Check

MTの画像配置

恵比寿麦酒祭(ヱビスビールまつり)の記事を画像配置を変化させ並べてみました。


■右よせ回り込み


20110918-01.jpgのサムネイル画像サッポログループがヱビスビール発祥の地である「恵比寿ガーデンプレイス」において、2011年9月16日(金)から19日(月・祝)まで開催する、ビヤフェスティバル「恵比寿麦酒祭(ヱビスビールまつり)」の詳細が決定しました。


「恵比寿麦酒祭」は、2009年に始まり今年で3回目。昨年は期間中に25万人ものお客様が来場されるなど、秋のイベントとして注目を集めています。






■左よせ回り込み


20110918-01.jpgのサムネイル画像今回の企画は「おいしい時間」「たのしい時間」「まなぶ時間」のテーマで構成され、調和することで「豊かな時間」を創り上げます。「おいしい時間」の中心となるのは、センター広場に登場する「恵比寿ビヤホール」と、時計広場に広がる「時計広場のフードコート」です。開放的な雰囲気で、ヱビスビールと一緒にこだわり厳選のメニューをお楽しみ下さい。本年のテーマとして掲げている東日本大震災の被災地支援のために、「恵比寿ビヤホール」では東北産ホップを100%使用した特別醸造樽生ビール「麦酒祭限定 東北ホップ【生】」を販売。





さらに東北の食材を使用したメニューも提供します。合わせて両会場で販売する樽生ビールは、売上全額を被災地支援に充てさせて頂きます。



■中央配置


20110918-01.jpg


また、ご家族連れのお客様には「楽しい時間」として、サッポロ飲料のキャラクター「リボンちゃん」、ポッカのキャラクター「レモンじゃ」が登場し、お祭りを盛り上げます。



■何もしない


20110918-01.jpgのサムネイル画像


さらに「まなぶ時間」では、ヱビスビール記念館にて、恵比寿とヱビスビールの歴史を楽しみながら学べる催しを多数用意するなど、お客様に楽しんで頂く幅広い企画を用意しました。



このエントリーをはてなブックマークに追加



Check

Movable Type 5.11は?



この6月に最新版「Movable Type 5.11」がリリースされました。


<主な新機能として>

・カテゴリとフォルダの管理一覧画面と並び替え
・ブログ記事投稿画面の変更フィールドの並び替え
・ブログ記事、ウェブページ、アイテムの新規作成
・テンプレート編集、MTタグの強化


管理画面のレイアウトなどを中心に追加変更されたが、

推奨のブラウザは

Internet Explorer 8
Mozilla Firefox 最新版
Safari 最新版

ということらしいが



「Movable Type 5.11」にアップグレードして

Internet Explorer 8
Mozilla Firefox
Safari
Google Chrome

で確認してみた。


Internet Explorer 8 はWindows 7では問題ないが、
XPではレイアウトが崩れて使えない!

確かに使い勝手がよくなった気がするが、
あえてアップグレードしなくてもいいような気がする。




このエントリーをはてなブックマークに追加



Check

タイトル文字数制限

サイドバーなどにナビゲーションとして「最近のブログ記事」タイトルを
掲載することが多いと思いますが、「ブログ記事」のタイトルが長いと改行され
レイアウトが崩れるてしまうことがあります。

ある文字数以上をトリミングし表示する「日本語トリミングフィルタ」を利用し
表示文字数制限の方法をご案内します。「人生迷い箸」提供の
「torimj.pl」を以下の手順でインストールします。


1.torimj.pl 作成

以下のテーブル内のタグをコピーしメモ帳などに貼り付け、
「torimj.pl」の名前で保存します。

package MT::Plugin::Trimj;

use MT::Template::Context;
use MT::ConfigMgr;
use Encode qw/ from_to /;

MT::Template::Context->add_global_filter(trimj_to => sub {

my($str, $nstr, $ctx) = @_;
my $sippo = '...';

my $tmpstr = $str;

my $c = MT::ConfigMgr->instance->PublishCharset;
my $conv_in;
if (lc $c eq lc 'Shift_JIS') {
$conv_in = 'shiftjis';
} elsif (lc $c eq lc 'ISO-2022-JP') {
$conv_in = 'iso-2022-jp';
} elsif (lc $c eq lc 'UTF-8') {
$conv_in = 'utf8';
} elsif (lc $c eq lc 'EUC-JP') {
$conv_in = 'euc-jp';
}
if ($conv_in ne 'euc-jp') {
from_to($str, $conv_in, 'euc-jp');
}

# 比較
my $lenstr = length($str);
if($lenstr <= $nstr) {
return $tmpstr;
}

my $out = substr($str,0,$nstr);

if ($out =~ /x8F$/ or $out =~ tr/x8ExA1-xFE// % 2) {
chop $out;
if($out =~ /x8F$/){
chop $out;
}
}
$out .= $sippo; # 尻尾を付けたくない場合は、コメントアウトのこと。

if ($conv_in ne 'euc-jp') {
from_to($out, 'euc-jp', $conv_in);
}

return $out;
});


2.torimj.pl をインストール

Movable Type をインストールしている「plugins」フォルダ内に、
「torimj.pl」をFTP転送します。


3.MTタグに trimj_to 属性を記載

ブログ記事タイトルを半角20文字に制限する場合、

<$MTEntryTitle$ trimj_to="20"$>

のように記載する。



このエントリーをはてなブックマークに追加



Check

記事に地図を表示

Movable Typeの記事に住所を書くだけでグーグルマップを表示させる方法です。

住所を書くだけで、地図(グーグルマップ)を表示してくれる<a href="http://as-is.net/blog/">Ogawa::Memoranda</a>さんのMapper Pluginです。


1.プラグインの入手と設定

以下からMapper Plugin「<a href="http://code.as-is.net/public/wiki/Mapper_Plugin.ja_JP">Mapper.zip</a>」をダウンロード
http://code.as-is.net/public/wiki/Mapper_Plugin.ja_JP

ダウンロードして解凍したら「Mapper.pl」を、MTのフォルダ「plugins」にアップロード

次で「Google Maps API key」を取得
http://www.google.com/apis/maps/signup.html
自サイトのURLを入力して、「Generate API Key」をクリックし取得

「Your key is :」下のキーをコピー

例)ABQIAAAAUiB-AOY4YowjRLEEgCdiSRRrTR2vgpYbpBcoPC6Ctj0P5ZNHyhQ8Xps6HPV2DxJC4HecfV-8QXmg

MTのプラグイン「Mapper 0.12」の設定で上の「Google Maps API key」を貼り付ける


2.テンプレートの修正

1)カテゴリーアーカイブ

<MTMapper>
<MTEntries>

</MTEntries>
</MTMapper>

のように囲む。


2)ブログ記事テンプレート

<MTMapper>

<$MTEntryTitle$>
<$MTEntryBody$>
<$MTEntryMore$>

</MTMapper>

のように、<$MTEntryBody$>と<$MTEntryMore$> 囲む


3.地図の表示設定

  地図の表示はタグ<MTMapper>に、追加記入(アトリビュート)して表示指定

  マッピングサービス指定
  method="Google / Alps"

  描画する地図の横幅と縦幅を指定
  width="size" height="size"

  描画する地図のズームレベルを指定
  zoom="zoom-level"

  描画する地図のタイプの指定
  maptype="G_MAP_TYPE / G_SATELLITE_TYPE / G_HYBRID_TYPE"

  <記述例>

  <MTMapper method="Google" width="620px" height="400px">
  ~省略~
  </MTMapper>


4.ブログ記事への記載方法

  [map:住所]

  <記述例>

  [map:東京都港区赤坂1-1-1]



このエントリーをはてなブックマークに追加



Check

カテゴリの並び順変更

Movable Typeの場合、カテゴリーの並び順はカテゴリ名の文字コード順となり、
時によりユーザーに分かりにくく表示されることがあります。

Movable Typeでカテゴリの並び順を変えるにはいくつかの方法がありますが、
見た目がよく行うにはプラグインを使って並び変えるのがいいと思います。


まず、プラグイン「pmHeadChanger」 をダウンロードし解凍。
次に解凍したプラグイン「pm_headchanger.pl」を

MTのフォルダ下
/mt/plugins/pm_headchanger.pl
のように配置。

カテゴリ名の先頭に「001)」並び替えのための数字を加え、名前を変更します。

テンプレートのカテゴリ名を表示する部分

<$MTEntryCategory$>
<$MTArchiveTitle$>

などを

<$MTEntryCategory pmhc=""$>
<$MTArchiveTitle pmhc=""$>

カテゴリー名を表示するタグで「pmhc=""」を加え修正します。

これにより、カテゴリ名の先頭の数字「001)」部分が
プラグインで表示のカテゴリ名から取り除きます。


このエントリーをはてなブックマークに追加



Check

MTを携帯サイトに対応

Movable Typeで携帯サイトに対応するツール(他社サイト)を紹介します。

Movable Typeでサイトを構築していると、
以下のツールを使用することで、モバイル対応にすることが可能です。

PCと携帯の両方に対応する例です。



<簡単に携帯対応>

無料で利用できます。

「MT4i/MovableType用 携帯電話向け変換プログラム」


<アフィリエイトサイトの携帯対応>

専用のプラグインが提供されており、
PC用の記事を書くと自動で携帯用のページも作成されます。

「PC&携帯サイト同時生成ツール~ツインビルダー for MT」


<プラグインで携帯対応>

公認サイト並みにしっかり対応しようとすると携帯サイトは思った以上に
難しく手間が掛かりますが、プラグインで機能拡張することにより、
これらに対応することが可能です。

「ケータイキット for Movable Type」



このエントリーをはてなブックマークに追加



Check

Sitemapsを自動作成

検索エンジン(Google、Yahoo!、MSN)にサイトの更新情報やページの一覧を規定のXMLファイルにして、
検索エンジンのクローラーに知らせる「sitemap.xml」を、MovableTypeで自動作成する手順です。

インデックス・テンプレートに以下のようなテンプレートを追加します。
テンプレートの名前は「Sitemaps」などとして
出力ファイル名は「sitemap.xml」とします。


<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<url>
<loc><$MTBlogURL encode_xml="1"$></loc>
<priority>1.0</priority>
</url>
<MTCategories>
<url>
<loc><$MTCategoryArchiveLink encode_xml="1"$></loc>
</url>
</MTCategories>
<MTEntries lastn="9999">
<url>
<loc><$MTEntryPermalink encode_xml="1"$></loc>
<lastmod><$MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ"$></lastmod>
</url>
</MTEntries>
</urlset>



SitemapのXMLファイルが正しく出力されたら、

⇒ http://www.google.com/webmasters/sitemaps/login
⇒ https://siteexplorer.search.yahoo.co.jp/

などから検索エンジンに登録をします。

※事前に管理サイトの登録を行う必要があります。


このエントリーをはてなブックマークに追加



Check

トラックバックと更新通知送信

ブログ記事を更新したとき、大手ブログに「トラックバックと更新通知」を
自動送信すると、ブログの広がりアクセスアップにつながりますが、

アクセスアップにつながる各ブログのPing送信先をリストしてみました。

http://ping.rss.drecom.jp/
http://www.blogpeople.net/servlet/weblogUpdates
http://blog.goo.ne.jp/XMLRPC
http://ping.bloggers.jp/rpc/
http://api.my.yahoo.co.jp/RPC2
http://www.bloglines.com/ping
http://blogsearch.google.com/ping/RPC2
http://rpc.pingomatic.com/
http://ping.myblog.jp
http://blogstyle.jp/xmlrpc/
http://rpc.reader.livedoor.com/ping


上記の他にもたくさんのpingサーバーは
ありますが、あまり多くの更新通知を送信しても、送信エラーの数も増える可能性が
ありますので、効果的なものをセレクトしていった方がいいと思います。



このエントリーをはてなブックマークに追加



Check

Movable Type EC Pack

シックス・アパートがMovable Type 最新版利用したECショップの
ソリューションパックを、2007年末に発表し、

依頼のあった「照明器具販売サイト」の構築を、
「EC パック」で構築した。

照明器具の販売[シバタ照明]
http://www.shibatasyoumei.com/

この「EC パック」は、米国で先行発表した「QUICK CART」という
商品ページを切り替えず買い物カゴに入れるという斬新な仕組みが付属している。

日本では未だ、このようなカートに慣れていないと思うが
これから人気のカートになるのではないかと期待している。

ECサイトを構築するのに、通常のMovable Type で苦労していたかと思うと
この「Movable Type EC パック」はかなり便利と言える。



このエントリーをはてなブックマークに追加



Check

Movable Type 4.23

当サイトは、Movable Type 4.23とを利用して構築しました。Movable Typeを使って新しいウェブサイトを誰でも簡単に、実際に数回のマウスクリックだけで立ち上げることができます。ウェブサイトのためのブログを作成して、汎用ウェブサイトのセットを選んで、再構築するだけです。ご覧のとおり!Movable Type のおかげでこんなに簡単にウェブサイトを作成できました!



このエントリーをはてなブックマークに追加



Check

Movabie Type の出会い

2004年の暮れごろから、ネットショップ仲間が、
「Movabie Type のブログが便利で検索対策でもいいらしい」と紹介してくれた。

すぐさま「MT-3.151」バージョンを導入し、
見よう見まねで自社のホームページにインストールした。

それが、
台湾ダイビング倶楽部〔フォルモサ〕です。

そのうち、FileMaker で商品ページHTMLファイルを作り、
Movabie Type で販売サイトの構築が出来るという話しを聞き、
初めて自社ドメインの販売サイトを構築した。

FileMaker と Movabie Type を組み合わせることで、
簡単に大量の商品ページができ、SEO的にもうまくいくので
Movabie Type の採用は管理人にとっては、ありがたいソフトでした。

昨年は、

「Movabie Type 4.01」
「Movabie Type 4.1」

そして今年は、

「Movabie Type 4.23」

と進化し、バージョンアップに苦労しながらも
機能アップしたMovabie Type が、新規サイト構築のベースになっている。



このエントリーをはてなブックマークに追加



Check