Blogger関連 SEO対策 コラム

Bloggerではてブボタンを設置したら、ブクマタイトルが……

少し前から、このサイトの末尾にも表示していた『はてなブックマークボタン』。
久し振りに見直してみたところ、ある困ったことに出会してしまい、非常に面倒な思いをしたので
同じような事が皆様に起こらないように、この記事をひとつ書いておこうかなと。

そもそも、はてなブックマークって何？　という件については別の項目でやろうかなと思いますので、ここでは割愛しておきます。

　ボタン設置までは簡単

さて、はてなブックマークボタンの設置ですが、正直これは他の方のページに大変参考になるものが幾つもありましたので、あえてこちらで紹介する必要もないかなと思い。
一応、筆者はこちらのページなどを参考にさせて頂きました。


最初にこのページに訪れてしまった人のために、簡単にご説明させて頂きますと、以下のコードをブログのレイアウト項目から編集して追加するだけです。

1.Bloggerの管理画面にログインするよ

よくあるやつです。


2.「テンプレート」項目から「HTMLを編集」ボタンをクリックするよ

3.以下のコードを表示したい場所に貼り付けるよ

<a class='hatena-bookmark-button' data-hatena-bookmark-lang='ja' data-hatena-bookmark-layout='vertical-balloon' 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@2x.png' style='border: none;' width='20'/></a><script async='async' charset='utf-8' src='http://b.st-hatena.com/js/bookmark_button.js' type='text/javascript'/>


筆者はブログの末尾に追加したかったので、こちらに設定しました。

さて、何事もなく表示されるはてなブックマークボタン。
これ、実際に登録してちゃんと確認した事がなかったので気付かなかったのですが、何度やってもブックマークタイトルがこんな感じに登録されてしまうのです。

さて、これは困ったぞ。
どうやって解決したものか。

　そもそも、「<data:blog.pageTitle/>」って何？

これは、Bloggerのルールで予め設定されている予約語のようなものです。
本来はこのタグを引っ張ることで、ページタイトルを取得することが可能になっています。


『HTMLの編集』項目からHTMLを眺めてみると、ちゃんとタイトル付近に記述されている事が分かるはず。

この文字列が直に出てきてしまっているということは、タグから正しくページタイトルが引けていない、ということ。
実際に指定されたページタイトルのタグが、そのまま出てきてしまっているようです。
なんでかな…………？

あれこれ悩んで、上記のコードを修正してソースコードを眺めては登録して、の繰り返し。
…………しかし、一向に解決する気配を見せません。

よく見てみたら、一度ブックマークに登録したものは確かに「<data:blog:pageTitle/>」になっているのですが、初めてブックマークを登録する時のタイトルはちゃんと表示されておりました。

でも、実際に登録してみると、ブックマークのタイトルが上の文字列になってしまう。

なんだこれ……なんだこれ……

そもそも、実際に表示されたブログのソースコードを取得したら、こんな文字はどこにも存在していないんだよなあ。

いや、待てよ。

　結論：はてなブックマークを利用する時は、ページソースのtitleタグに注意しよう

これじゃない？　……そうだ、これだ！！

さて、プログラマーって一度ソースコードを変更したら、以前まで利用していたソースコードをコメントにして、その下に新しい記述を入れたりするんですよね。
筆者も例外ではなく、律儀に日付なんかコメントに入れて、編集記録を残しています。
前にどうやって書いていたのか覚えておかないと、元に戻せなくなってしまうので。

今回はそれが原因でした。

詳しい事は、はてなブックマーク側のJavascriptに依存するために何とも言えませんが、
コメントにした「<title><data:blog.pageTitle/></title>」という文字列が、恐らくページのソースコード上で一番上にあったがために、今回はブクマ登録時にそのような文字列が取得されてしまったようなのです。

コメントでも引っ掛かるってことは、「title」文字列辺りで引っ掛けているのかもな……

ということでコメントを削除した所、今度は正常に動く事が確認されました。



いや、暮らしじゃないですけど。

いやー、これは実際、よくやってしまう事なのではないかと思います。
ましてブクマ登録直前までは正しく見えていたりするもんで、体良く追加ができてよしよし、と思って終了…………ちょっと待って！　まだそれは完全ではないのよ！
という事ですね。

実際、はてブで「<data:blog.pageTitle/>」で検索したら、ある程度ヒットしますし。

他のブログでは試した事がないので分かりませんが、Bloggerを使ってはてブボタンを設置する場合は、他のソースコードにも気を付けましょうね、というお話。

いや、よく考えたら他のブログでも結構関係する内容なのかもしれない。

コメントのtitleタグを拾う、という事だからな……。Blogger関係ないかもしれないな……
皆さん、はてブボタンを用意したら、ちゃんと正しい文字列で登録される事を確認しましょう。

　今回の収穫。

お前、自分で自分のページいくつブクマすんねん。

セルクマは一応公式で許可されている事なので、悪い事ではないようですけどね。

スポンサーリンク

スポンサーリンク