Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

(X)HTML Bookmarklet MovableType SEO 小技集

検索エンジン3社が開始した、rel=canonicalの使い方

投稿日:


Google、Yahoo!、Live(Microsoft)の3社が「ページの正当なURL」を定義するための方法を導入する事になったようです。
headタグの中にrel=”canonical”というlinkタグを記述すれば良いそうです。

<link rel="canonical" href="http://creazy.net/" />

詳しい説明は下記ページが参考になりました。
検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入(URLの正規化) :: SEM R
サイト内の重複コンテンツを防ぐ新たな手段、rel=”canonical”が登場 – F.Ko-Jiの「一秒後は未来」
で、早速色々試してみました。

MT(MovableType)で正統なURLを指定する方法

下記のようなタグをテンプレートのheadの中に指定するだけです。
(※エントリーアーカイブ用のタグです。)

<link rel="canonical" href="<$MTEntryPermalink$>" />

今見ているページが正統なURLか判別するUserScript

この rel=”canonical” なんですが、基本的に検索エンジン用なんですね。
ですけど、ボクらが便利に使う方法はないかと考えてみました。
Alert Not Canonical URL for Greasemonkey
rel=”canonical” が指定されていて、Canonical(正統)ではないURLのページでアラートがでます。
Alert Not Canonical URL sample
インストールは下記から。
http://userscripts.org/scripts/source/42486.user.js
重複したURLかどうか知りたいのは検索エンジンだけではないですからね。
このGreaseMonkeyを登録しておく事で、正統でない重複したURL(Not Canonical URL)にアクセスしたらすぐ分かるようになります。
あと、GreaseMonkeyが使えない人のために、同じ機能をBookmarkletで使えるようにワンライナー書きました。

javascript:(function(){var d=document,l=location,c=0,li=d.getElementsByTagName('head')[0].getElementsByTagName('link');for(var i=0;i<li.length;i++){if(li[i].getAttribute('rel').toLowerCase()=='canonical'&&li[i].href!=l.href){c=li[i].href;break;}}if(c)alert('Canonical URL is ...\n'+c);})();

上記をブックマークしてください。
IEとかでも動くと思います。

正しいURLを(ソーシャル)ブックマークするためのブックマークレット

「正統なURL」を判断したいケースとして、ブックマーク対象のURLがパラメータの有無によって分散してしまう問題があると思います。
例えば、http://www.example.com/ をRSS経由で閲覧している場合、(恐らくアクセス解析目的で)「ref=rss」というパラメータが付与されているケースがあります。
通常)http://www.example.com/detail.html
RSS)http://www.example.com/detail.html?ref=rss
これらをそのままブックマークするとそれぞれ別のブックマークページができあがりますが、実際は同一のページ内容ですのであまりよろしくありません。
ですので、ブックマークを登録する際のブックマークレットに細工してみる事にしました。
はてなブックマーク用

javascript:(function(){var d=document,l=location,c=l.href,li=d.getElementsByTagName('head')[0].getElementsByTagName('link');for(var i=0;i<li.length;i++){if(li[i].getAttribute('rel').toLowerCase()=='canonical'){c=li[i].href;break;}}window.open('http://b.hatena.ne.jp/add?b2=1&url='+encodeURIComponent(c),'_blank','width=800,height=600,resizable=1,scrollbars=1');})();

Delicious用

javascript:(function(){var d=document,l=location,c=l.href,li=d.getElementsByTagName('head')[0].getElementsByTagName('link');for(var i=0;i<li.length;i++){if(li[i].getAttribute('rel').toLowerCase()=='canonical'){c=li[i].href;break;}}window.open('http://delicious.com/save?url='+encodeURIComponent(l.href)+'&title='+encodeURIComponent(d.title)+'&v=5&noui=1&jump=doclose','_blank','width=800,height=600,resizable=1,scrollbars=1');})();

このブックマークレットは、ブックマークしようとしているページに rel=”canonical” が指定されている場合は、その値を優先してブックマーク対象URLに指定しようとします。
このブックマークレットは検索エンジンがやろうとしている同一ページのURL統一という部分で役立つとは思いますが、その反面、#〜などで表されるページ内リンクを無視してしまいます。ブックマークの最小単位としてページを指定するものであり、ページの部分にまでスポットする事は無いので注意が必要です。

まとめ

今回、検索大手3社が手を組んでいるという事で、そこそこ効果が期待できるんじゃないかと思っています。
ただ、一方では実装をユーザーに任せる部分が大きいので対応するページがどれくらい増えるかも気になっています。rel=”canonical” が有効な方法だと広く認識され、ブログのデフォルトテンプレートなどにこの記述が入るようになれば無意識のうちに一般化されるのかもしれませんが…。
なんだか、無理矢理使う方法を考えてみたんですが、今後の普及の具合によって他にも有効な使い方がでてくるかもしれませんね。

-(X)HTML, Bookmarklet, MovableType, SEO, 小技集

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

no image

第8回:Twitter JavaScript Badges の日付フォーマットを自由にカスタマイズ

久しぶりに twitter ネタです。 というかシツコク JavaScript badges のお話。 以前のエントリーで IE での日付表示がおかしい件に対応しました。 そのエントリーにフォローする …

Huluで「寝落ちワープ」しない方法

こんにちは、寝落ち王ヤガーです。 割りと夜遅くまで仕事(だったり他のPC作業)してるんですが、すでにちょっと眠いくせに一日の最後は何かお楽しみを・・・なんて考えてHuluを見たりします。Huluはみな …

新しいFacebookページにStatic iframe形式でタブを追加する方法

【2011/02/21:追記】 iframe形式を使おうと思っている方は、こちらの記事も参考にしてください。 Facebookページのiframe形式タブに切り替える場合は、バグに注意! 少し前にfa …

Googleスプレッドシートのチェックボックスを便利に使う方法

2018年中旬、Googleスプレッドシートにチェックボックス機能が搭載されました。エクセル同様に、計算式やGAS(Google Apps Script)による高度なカスタマイズで、ビジネスの効率化に …

Facebookにいいね!されたリンク先に長いパラメータが追加されるのを自動で短縮する方法

Facebookにいいね!された投稿などリンク先に遷移すると、上の画像のようにものすごく長いURLになってしまいますよね。Facebookのインサイト(解析)に使われているものと思われますが、このパラ …

スポンサードリンク

スポンサードリンク