[Blogger] PCとモバイルで異なるブクマ数やシェア数が表示されている場合の対応策【テンプレートで解決版】

【Blogger】PCとモバイルで異なるブクマ数やシェア数が表示されている場合の対応策｜サイボーイ通信
いろいろなBloggerのサイトを見ていると、どうもPCとモバイルで違うブクマ数やシェア数が表示されている人が多いみたいです。 ...
気にしていなかったー。と言うかモバイル版に表示していなかったー。

ということで、調べてみました。

ちょっと試行錯誤してみましたが、なかなかうまくいきませんでした。

テンプレートの変更を元に戻してちゃんと元に戻っているかなと徐に検索すると、何やらそれっぽいデータタグを発見しました。

data:blog.canonicalUrl

検索してみると、クリボウさんのブログに記事を発見。

Blogger の blogspot.jp リダイレクトに関していろいろ | クリボウの Blogger Tips

data:post.canonicalUrl という Blogger のテンプレート内で使える特別な情報タグ（データタグ）の存在を知りました。data:post.canonicalUrl は投稿ガジェット内で使える、投稿ページ URL を示すデータタグ。同様の data:post.url と異なるのは、必ず基本ドメインの URL を表示する点です。なのでたとえば、

• クリボウの Blogger Tips: Blogger の投稿フッターにはてなブックマーク件数を表示する方法

のカスタマイズでいうと、はてなからデータを得るために使用している data:post.url を data:post.canonicalUrl に置き換えて使うことで、これまで blogspot.com で溜めたはてブ件数をリセットせずに表示したり、引き続き blogspot.com ドメインの投稿ページをブックマークしてもらったりすることができます。

via Blogger の blogspot.jp リダイレクトに関していろいろ | クリボウの Blogger Tips

そして、実際に試してみると、まさにこれで解決できました。

テンプレートの変更点

以下のように、シェアボタンで「data:post.url」を指定している部分を「data:post.canonicalUrl」に書き換えます。「data:blog.canonicalUrl」はページの URL になるので、記事一覧のページにシェアボタンを表示している場合を考えて「data:post.canonicalUrl」を指定するようにしました。

<!-- tweet button -->
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-via='' expr:data-text='&quot; RT @toshiya240: &quot;+data:post.title' expr:data-url='data:post.canonicalUrl' href='http://twitter.com/share'>Tweet</a>
<!-- facebook -->
<fb:like expr:href='data:post.canonicalUrl' font='tahoma' layout='button_count' send='false' show_faces='false' width='120'/>
<!-- hatena -->
<a class='hatena-bookmark-button' data-hatena-bookmark-layout='standard' expr:data-hatena-bookmark-title='data:post.title' expr:href='&quot;http://b.hatena.ne.jp/entry/&quot; + data:post.canonicalUrl' title='このエントリーをはてなブックマークに追加'><img alt='このエントリーをはてなブックマークに追加' height='20' src='http://b.st-hatena.com/images/entry-button/button-only.gif' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button_wo_al.js' type='text/javascript'/>
<!-- Google +1 -->
<g:plusone expr:href='data:post.canonicalUrl'/>

ちなみに、サイボーイさんで書かれている link タグの指定は以下のようにしました。

<!-- Canonical URL -->
<b:if cond='data:blog.isMobile'>
<link rel='canonical' expr:href='data:blog.canonicalUrl' />
</b:if>

以下のページを読むと、SEO 対策として指定しておいた方がよいかもしれませんね。 「canonical でないものに追加」とのことですので、モバイル版の場合だけ指定するようにしました。

rel="canonical" 属性について - ウェブマスター ツール ヘルプ
各 HTML ページのバージョンのうち、canonical でないものの セクションに rel="canonical" リンクを追加します。 ...

関連記事

loading..