2013年6月30日

Blogger(ブロガー)の記事をtweetされやすくするためにcanonicalタグを設置する方法

こんにちはin0sea(いのせ)です。

このブログもモバイル対応を進めていて、
Zenbackなどのツールもスマホで表示できるようにカスタマイズをしているのだが、
進めているうちにちょっとした壁にぶつかった。



Bloggerはスマホ向けページだとURLにm=1のパラメータがつく

最近はtwitterやFacebookなどのソーシャルボタンを
ブログに設置することはもはや常識になってきている。
このブログでももちろん設置している。

こんなやつ。

御存知の通り今までツイートされた回数やいいねの数などが表示されるのだけれど、
Bloggerはスマホ向けページだとURLが変わってしまうので、
同じエントリーでもPCページとスマホページで別のページとしてカウントされてしまう。

  • ・PCページ
  • http://in0sea.blogspot.jp/2013/06/hatena-bookmark.html

  • ・スマホページ
  • http://in0sea.blogspot.jp/2013/06/hatena-bookmark.html?m=1

上記のようにURLの末端に?m=1とモバイルであることを示すパラメータがつくのだ。


このままだとせっかくのツイート数も分散してしまって残念なので、PCページとスマホページの
ツイートカウントを統合できるようにする。




canonicalタグを使うと分散しているツイート数を統合できる

canonicalタグは重複するwebページのURLを統一するときに使うものと考えて良い。
正確にはちょっと違うけど、上記のようにPCページとスマホページで
URLが異なってしまう場合に用いるには問題無いだろう。

canonicalタグはHTMLのhead要素の中に書く。
つまり<head></head>の中だ。


上記で記載した例をつかって書くと、スマホページのhead要素の中に
<link href='http://in0sea.blogspot.jp/2013/06/hatena-bookmark.html' rel='canonical'/>

というように書くことで、
「ここはhttp://in0sea.blogspot.jp/2013/06/hatena-bookmark.htmlと同じページですよー」
ということを教えてくれることになる。

もともと検索エンジン向けの記述なのでもちろん検索エンジンも認識してくれる。



Bloggerでcanonicalタグを書くには


方法はふたつある

  • <b:include data=’blog’ name=’all-head-content’/>
これは、ブログのメタデータ・リンクデータとして必要な情報を全て表示する、というタグである。
この中にcanonicalのタグも含まれていて、当然URLも動的に表示されるので
これだけ書けばまず問題ないはずだ。

このブログもこの方法で書いている。

canonical以外にもatomやrss、文字コードなどの情報も取ってきてくれるので
このタグは必須といっても良いかもしれない。



もう一つの方法は下記のように書くことだ。


  • <link expr:href="data:blog.url" rel="canonical"/>
これは単純にcanonicalに現在のページのユニークのURLを入れてくれるダグだ。
他の要素が不要ならシンプルにこちらだけを使えばいい。



Facebookは未対応?

と、このようにcanonicalの設定方法を書いてきたが、
現状ソーシャルボタンではFacebookのいいねボタンはcanonicalに対応していないようだ。

いくらcanonicalタグをページに挿入してもいいねの数は統合されない。

これは仕方ないのかな?
Facebookが仕様を変更するのを待つしかないですかね。

何か良い方法を知っている方がいたらおしえてください。




この記事「Blogger(ブロガー)の記事をtweetされやすくするためにcanonicalタグを設置する方法」はあなたのお役に立ちましたか?よろしければ「いいね!」や共有、ブクマをしていただけるとうれしいです。

1 件のコメント:

  1. 記事ありがとうございます。参考にさせて頂きました!

    Facebookのいいねボタンのコードを、expr:data-href='data:blog.canonicalUrl'に変更することで私のところでは統合されました。ご参考までに。
    http://www.livingroom23.net/2017/02/bloggerpcfacebook.html

    返信削除

著者より:コメントをいただけるとうれしいです。お気軽にどうぞ!