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

イントロダクション

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

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

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

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 のドメインの 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&～この後のパラメータは省略～; 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&～この後のパラメータは省略～"


なお、関連記事のリンクをマウスでクリックする場合、左クリックも右クリックも、ホイールによるクリックも区別していないため、リンクを右クリックすると（右クリックメニューを出すだけ）リンク先へジャンプせずに 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