日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2015年2月8日日曜日

LinkWithin:関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由する理由

イントロダクション

このブログでは、各投稿の関連記事をリストアップして、ユーザへ提示するのに、LinkWithin というサービスを使用しています。

LinkWithin - Related Posts with Thumbnails
http://www.linkwithin.com/learn


LinkWithin は独自のアルゴリズムによって、そのページに関連がありそうなページを最大 5 件までリストアップして、自動的に記事の最後にそれらを提示してくれます。

LinkWithin 標準では関連記事の一覧は横方向に並ぶ
LinkWithinによる関連記事表示


わざわざ手動で、関連する記事をリストアップして、記事に関連記事の一覧を追加する必要が無いため、非常に便利です。

ページの下部に関連記事が表示されることによって、閲覧者に対してブログ内の他のページを見てもらえるという効果があります。


関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由する

さて、この LinkWithin の関連記事の URL ですが、よくよく調べてみると面白いことが分かります。

LinkWithin によって表示された関連記事の上にマウスカーソルを乗せると、たいていのパソコン向けブラウザでは、リンク先の URL が左下などに表示されます。

LinkWithin によって表示された関連記事の上にマウスカーソルを乗せた状態 Chrome ブラウザでは、通常画面の左下にリンク先の URL が表示される  ここでは、一番上の関連記事にマウスカーソルを乗せている (カーソルは Windows 標準のキャプチャのため、写っていない)  表示された URL :  http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html
LinkWithin によって表示された関連記事の上にマウスカーソルを乗せた状態
Chrome ブラウザでは、通常画面の左下にリンク先の URL が表示される

ここでは、一番上の関連記事にマウスカーソルを乗せている
(カーソルは Windows 標準のキャプチャのため、写っていない)

表示された URL :
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html


では、実際にそのリンクをクリックしてみます。

すると、リンクを開いた瞬間、一時的に LinkWithin のドメインの URL を経由した後、すぐにその関連記事のページに移動(リダイレクト)していることが分かります。


その時に経由した URL は、次のような URL です。なお、関連記事によっては多少 URL に違いがあります。

http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&~この後のパラメータは省略~


つまり、LinkWithin が表示している URL をクリックした場合には、直接関連記事に飛ぶのではなく、LinkWithin のページを経由してから関連記事に飛んでいます。

そのため、ブログのアクセス解析をしている場合には、「widget5.linkwithin.com」(widget の後の数値にはいくつかのバリエーションがあります。3 だったり、6 だったり。)というような URL を参照元としたアクセスが記録されているはずです。


何故このように、関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由しているのでしょうか?


関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由する理由

実際に、LinkWithin の設置されている箇所のソースコードを見てみましょう。

関連記事へのリンク(a タグ)のソースコードをピックアップしてみます。
(Chrome のデベロッパーツールの Elements タブの DOM ツリーのもの)

<a name="linkwithin_link_0" href="http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html" onmousedown="this.href='http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&amp;~この後のパラメータは省略~; return true;" style="スタイルは省略" onmouseover="this.style.backgroundColor='#dde'" onmouseout="this.style.backgroundColor=''">
~省略~
</a>


関連記事へのリンク(a タグ)のリンク先(href) は、ブログ内の関連記事への URL が設定されています。

href="http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html"


関連記事へのリンク(a タグ)のソースコードをよくよく見てみると、マウスによるクリックイベント時(onmousedown)に、a タグのリンク先(this.href) を LinkWithin のドメインの URL に書き換えていることが分かります。

onmousedown="this.href='http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&amp;~この後のパラメータは省略~; return true;"


つまり、関連記事のリンク先に移動しようとして、関連記事のリンクをクリックすると、その瞬間に関連記事のリンクの URL がブログ内のページの元から、LinkWithin ドメインのページ(関連記事に直ぐにリダイレクトするページ)に書き換わることになります。


実際に、クリック後の関連記事へのリンク(a タグ)のソースコードは次のようになっています。
(Chrome のデベロッパーツールの Elements タブの DOM ツリーのもの)

<a name="linkwithin_link_0" href="http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&amp;~この後のパラメータは省略~" onmousedown="this.href='http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&amp;~この後のパラメータは省略~; return true;" style="スタイルは省略" onmouseover="this.style.backgroundColor='#dde'" onmouseout="this.style.backgroundColor=''">
~省略~
</a>


このように、関連記事へのリンク(a タグ)のリンク先(href)は、クリック前はブログ内の関連記事の URL だったものが、LinkWithin ドメインのページ(関連記事に直ぐにリダイレクトするページ)に書き換わっていることがわかります。

href="http://widget5.linkwithin.com/redirect?url=http%3A//upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html&amp;~この後のパラメータは省略~"


なお、関連記事のリンクをマウスでクリックする場合、左クリックも右クリックも、ホイールによるクリックも区別していないため、リンクを右クリックすると(右クリックメニューを出すだけ)リンク先へジャンプせずに URL の変化を観察することができます。


まとめ

以上が、LinkWithin の関連記事のURLが直リンクのように見えるのに、LinkWithinのページを経由する理由です。


なかなか注意深くしていないと気が付かない動作ですが、この動作(閲覧者が LinkWithin の関連記事をクリックしたときには、LinkWithin のページに移動してから関連記事のページに移動している)を知っていると、アクセス解析(Google Analyticsなど)をする場合には、これによって LinkWithin の関連記事をクリックしたことによるページビューなどを把握できるようになっているでしょう。

ただし、このことを気にかけていないと、アクセス解析結果の各種データの見方を誤ってしまうかもしれません。


追記:
インターネット上を検索してみると、この「LinkWithin の関連記事の LinkWithin ドメインページへのリダイレクト」について、言及されている方々がおられました。

LinkWithinを導入すると関連記事をクリックするたびにリダイレクトされる | メモロウ
http://www.memorou.com/2014/05/linkwithin.html

[太]LinkWithinが黙って利用者のサイトから自サイトに301リダイレクトかけてるんだけどどういうこと? | Fujitaiju Blog
http://fujitaiju.com/blog/wordpress/%E5%A4%AAlinkwithin%E3%81%8C%E9%BB%99%E3%81%A3%E3%81%A6%E5%88%A9%E7%94%A8%E8%80%85%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%81%8B%E3%82%89%E8%87%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB301%E3%83%AA/

LinkWithin の怪しい動き - 電脳めも帳
http://wat.hatenablog.com/entry/2014/06/04/204530


関連記事

あまりにも自然すぎて気が付かなかった! Linkwithin による関連記事の表示は、そこが見えるようになってから行われる - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/linkwithin-load.html


Blogger:投稿の上部へ関連記事へのジャンプを追加して、閲覧者の使いやすさの向上! - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/blogger-linkwithin-jump.html

Linkwithinの画像つき項目にマウスポインターを乗せると項目を拡大する - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2014/06/linkwithin-hover-zoom.html


LinkWithinの記事一覧を横ではなく縦に表示したい!CSS変更でやってみた! - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-vertical.html

LinkWithinの関連記事一覧を階段状に表示できた!?偶然の産物です - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-stepwise.html


LinkWithinのフォントを変える!cssのfont-familyを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font.html

LinkWithinのフォントサイズを変える!cssのfont-sizeを強制適用 - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.com/2015/02/linkwithin-css-posts-title-font-size.html







関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...
Related Posts Plugin for WordPress, Blogger...