更新:
検索評価やソーシャルメディアでシェアされるリンクのURLを統一するのに必要不可欠なcanonical属性とは
※本記事は、旧 Tech Talk Blog 内の 「検索評価やソーシャルメディアでシェアされるリンクのURLを統一するのに必要不可欠なcanonical属性とは : OLD Tech Talk Blog - Six Apart (http://www.sixapart.jp/techtalk/2012/01/canonical.html) 
こんにちは。Zenbackのプロダクトマネージャーの壽（ことぶき）です。
普段はZenback 公式ブログや、@zenbackあたりで発信しているのですが、今回はちょこっと技術的なお話をさせていただきたくて Tech Talk Blog にお邪魔いたしました。
Zenback ってどんなサービス？ そしてどんな仕組み？
さて、Zenback。これは弊社が開発しているブログパーツです。
ブログの各記事の下の方に設置するだけで、記事へのソーシャルメディアでの反応をまとめて表示したり、逆にソーシャルメディアにポストするボタンを表示できます。この記事の一番下にも表示されてます。
これらの機能はどれも「記事ページのURL」がキーになっています。
「記事ページのURL」とひもづいているツイートやはてなブックマークの反応を集めてきて表示しますし、ツイートする／はてブする／mixiチェックする／Google+1する／Facebook いいねするなどの各種ポスト機能ではその記事のタイトルとURLを各サービスに投げています。
URLまわりで、こんな困ったことってありませんか？
とあるサイトからリンクで飛んできた記事ページのURL。その後ろに何か余計なパラメータが付いていたりします。
http://example.com/article.html?ref=rss
これって実際には、
http://example.com/article.html
と全く同じページ。
同じであるにもかかわらず、記事への反応（ツイートやブックマーク）が両者に別々についてしまうことはありませんか？これをほぼ防ぐことが出来るのが、canonical属性を使った指定です。
canonicalって何？
表示しているページの正統なURLを、検索エンジンや各種シェアサービスに教えてあげるための指定方法です。ちなみにcanonicalという英単語には、「正統な」という意味があります。
正しく指定することにより、wwwの有無や、http/httpsの違いや、パラメータの有無や、ちょっとURLが違うだけのスマフォ用ページや、他サイトに全文引用してあるだけのページがあっても、それぞれのページ内で正統なURLはこれ！と指定することが出来ます。これにより、それぞれが別個のページとみなされにくくなります。
どうやって使うの？
<head> タグ内に、以下のように1行追加します。
<link rel="canonical" href="http://example.com"/>
hrefの中の"http://example.com"は、各ページごとに異なります。
例えば、このページの場合、以下のようになります。
<link rel="canonical" href="http://www.sixapart.jp/techtalk/2012/01/canonical.html>
このように指定しておくことで、wwwが無いURLでアクセスされても、検索エンジンその他各種シェアサービスからは、http://www.sixapart.jp/techtalk/2012/01/canonical.html がこのページの正統なURLであるとみなされます。
ただし、canonicalでの指定を利用するかどうかはサービスによって異なります。ヤフー、グーグル、マイクロソフトの大手検索エンジン各社はcanonicalサポートを正式に表明していますし、Twitterの公式ツイートボタンの技術ドキュメントにもcanonicalを認識することが明記されています。サービスによってcanonicalの対応状況は異なりますが、個人的には、URLをキーに検索結果を表示したり、シェアしたりするサービスは全部対応してくれると良いなと思っています。
さてZenbackも、このたびcanonical属性でのURL指定に対応しました。各ページの <head> にrel="canonical"で指定されたURLがあれば、ZenbackはそれをページのURLと認識します。そして、URLに関連する情報を表示したり、そのURLをソーシャルメディアにポストする際に、canonicalで指定されたURLを実際のURLよりも優先して利用します。
どこに設置すればいいの？
検索評価の統一、シェアされるURLの統一のために、全てのページに最初から設置しておくことが望ましいと思います。忘れがちな場所も含めてリストアップしました。運営ポリシーにより、変わってくるかとは思いますが、設置場所の参考になれば幸いです。
- トップページと各枝葉の全ての静的ページ
- スマフォ用、ガラケー用、印刷専用ページなど
- ECサイトなどでパラメータが違うだけで同じ商品を指しているような動的ページ
- 外部サイトにて自サイト記事を全文引用しているページ
逆に設置しなくても良いページは、外部とシェアする必要がないクローズドなページです。
ogpでもcanonicalURLを指定出来ます
Facebookなどでは、OGP（The Open Graph protocol）の og:url で指定されたURLをcanonicalとみなします。rel="canonical"と同じURLを指定する箇所ですので、あわせて設定されると良いかと思います。
プレゼンテーション
この内容を、社内で発表したときのプレゼンテーションをEmbedします。ご参考まで。
Six Apart をフォローしませんか？
