プログラミング言語や環境設定を中心としたパソコン関連の技術メモです。
主にシステム開発中に調べたことをメモしています。TIPS的な位置付けで、気が向いたときにちまちま更新していきます。
Twitterの公式ツイートボタンは「data-url」を指定しないと「rel="canonical"」タグを考慮してくれるらしい。
※あくまで2014/07/13現在の状況です。
 仕様が変わっちゃっていたらごめんなさい。


実例を挙げながら書いた方が分かりやすいと思うので、
ステマを兼ねて実際にやった手順と併せて順番に書いていきます。

とあるWebページを元にして別のページを作りました。
作ったページは

http://wa3.i-3-i.info/extension/word11567.html

だとします。
このページの元になったページは

http://wa3.i-3-i.info/word11567.html

です。

2つのページは重複コンテンツなので「extension/word11567.html」の方に「rel="canonical"」タグ

<link rel="canonical" href="http://wa3.i-3-i.info/word11567.html">

を記述しました。
「『extension/word11567.html』は『word11567.html』のコピーです」と
検索エンジンさんに教えてあげるためです。
ペナルティを喰らったら嫌なので、先に自己申告しておきました。

この状態で「extension/word11567.html」の方にTweetボタンを付けたのですよ。
コードはこんな感じですφ(--)

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="horizontal">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

試しに自分でテストしてみたところ「リンクをあなたのフォロワーに共有する」の表示内容が
こんな感じになりましてねφ(--)

.laccdbとは|「分かりそう」で「分からない」でも「分かった」気になれる拡張子辞典 http://wa3.i-3-i.info/word11567.html

あれ?URLの「extension/」の部分が無いよ(--?

ほんで、あれやこれやと調べたところ、

<link rel="canonical" href="http://wa3.i-3-i.info/word11567.html">

の部分を消したら「extension/」付きの方のURLでつぶやけましたφ(--)

.laccdbとは|「分かりそう」で「分からない」でも「分かった」気になれる拡張子辞典 http://wa3.i-3-i.info/extension/word11567.html

ここから推測するに、ツイートボタンさんは「rel="canonical"」タグを考慮してくれています。
重複コンテンツなページにボタンを置いた際には、オリジナルの方のURLを採用するようです。

今回の私のように、デザイン違いのサイトを作っている場合などはご注意ください。
「rel="canonical"」タグを使っているページを作成してそこにツイートボタンを配置すると、
つぶやきの内容が意図しないURLへのリンクになっちゃう可能性があります。

ちなみに「重複コンテンツなページの方のURLでTweetしたい!」な場合は
「https://twitter.com/share」へのアンカータグ内で「data-url」を指定してあげればOKです。
こんな感じで設定してあげたら「extension/」付きの方のURLでつぶやけましたφ(--)

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja" data-count="horizontal" data-url="http://wa3.i-3-i.info/extension/word11567.html">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

そんな感じ\(--)/
スポンサーリンク
 
このエントリーをはてなブックマークに追加 

category:● HTML・CSS  thema:システム開発 - genre:コンピュータ  Posted by ササキマコト 

  関連記事