target=”_blank”を使わずに、rel=”external”、rel=”external nofollow”で新しいウィンドウを開く方法
target=”_blank”を使わずに、rel=”external”、もしくはrel=”external nofollow”で新しいウィンドウを開く方法を紹介します。
ユーザーがリンクをクリックすると、新しいウィンドウでリンク先が表示される方法として、target=”_blank”が良く知られていますが、この書き方はXHTMLに準拠していません。
これは「新しいウィンドウを開くかどうかはユーザーが決めるのが望ましいと考えられているため」だそうです。
確かに新しい窓で開くと邪魔に感じるユーザーもいるのでしょう。
ただぼくの好みでは、やはり外部リンクは新しい窓で開きたい（サイトによりますが）。とくに最近のブラウザは新しいウィンドウではなく、新しいタブで開いてくれるので、ユーザーもそれほど邪魔に感じないのではないかと思います。
では、target=”_blank”を使わずに新しいウィンドウでリンク先を開く方法で、XHTMLのValidationでエラーがでない方法はあるのかというと、JavaScriptを使う方法があります。
この方法は、以下のサイトで紹介されています。
- target=”_blank” を使わないで新しいウィンドウでリンクを開く方法 : (cl.pocari.org)
- _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。 : (hori-uchi.com)
上記のサイトで紹介されている方法は、基本的には、JavaScriptをヘッダー部分に読み込ませて（後述）、リンクを設置するときに、taget=”_blank”のかわりに、rel=”external”を使う方法ですが、このままだと一つだけ問題があります。
それは、リンクを別窓で開き、さらにrel=”nofollow”を入れたいという場合にこのままのスクリプトでは反応してくれないということです。
rel=”nofollow”指定を追加する場合、リンクの書き方を、
<a rel="external" href="リンク先URL">アンカーテキスト</a>
ではなく、
<a rel="external nofollow" href="リンク先URL">アンカーテキスト</a>
としなくてはならず、それにあわせてスクリプトも変更しなくてはなりません。
そこで、rel=”external”でも、rel=”external nofollow”でも、どちらでも作動するJavaScriptを以下に紹介します。
*(external nofollowを逆にして、nofollow externalにしても作動します。)
初心者の方でもすぐに使えるように順を追って説明します。
1.まずはJavaScriptの設定です
以下のテキストをNotepadなどにコピー＆ペーストして、external.jsという名前で保存します。
function externalLinks() {
if (!document.getElementsByTagName) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") &&
((anchor.getAttribute("rel") == "external nofollow") || (anchor.getAttribute("rel") == "nofollow external") || (anchor.getAttribute("rel") == "external")))
anchor.target = "_blank";
}
}
window.onload = externalLinks;
2.保存したJavaScriptのアップロード
保存したexternal.jsファイルをFTPソフトなどを使って、サーバーにアップロードします。
アップロード先はどのファイル内でも構いません（次の項目で保存先を指定するので）。
一番上の階層にアップロードするとわかりやすいです。
3.JavaScriptの保存先の指定
下記のソースのyourdomain.comを書き換えてexternal.jsをアップロードした場所を指定します。
ドメイン直下にアップロードした場合は、以下のソースのようになります。
<script type="text/javascript" src="http://yourdomain.com/external.js"></script>
それ以外の場所にアップロードした場合はファイル名を入れて指定しいます。
<script tyle="text/javascript" src="http://yourdomain.com/ファイル名/.../external.js"></script>
4.ヘッダーに記入
external.jsのアップロード先を指定した上記のソースを、<head>セクションにペーストします。
例：
<head> . . <script tyle="text/javascript" src="http://yourdomain.com/external.js"></script> </head>
5.リンクの作成
上記の設定が一度済んでしまえば、あとはリンク作成時に<a>タグ内に、
rel=”external”、もしくは、 rel=”external nofollow” （rel=”nofollow external”）を記入するだけです。
例1:nofollowタグ無し
<a rel="external" href="リンク先URL">アンカーテキスト</a>
例2:nofollowタグ有り
<a rel="external nofollow" href="リンク先URL">アンカーテキスト</a>
追記：MTでの対応
トラックバックを頂いた、「Event.observe と window.onload」という記事によると、上記のソースはMTでは個別記事で動かないらしいです。ぼくはもうしばらくMTに触ってなかったし、このソース自体拾い物なので分かりませんでしたが、対応策も上記記事に記載されていますので、参考にして下さい。
参照記事
- target=”_blank” を使わないで新しいウィンドウでリンクを開く方法 : (cl.pocari.org)
- _blankを使わないで別ウィンドウを開くにはrel=”external”を使う。 : (hori-uchi.com)
- make external links open in a new window in a standards compliant way? : (nucleusfaq)
- Open External Links as Blank Targets via Unobtrusive JavaScript : (Perishable Press)
Posted 2008-12-27 (Sat) 13:30 Updated 2010-01-03 (Sun) 19:16
Category: WordPressのカスタマイズ Tag: JavaScript
Comments
Comment Closed
SEO技術は出尽していない。 »
« WordPress用：ソーシャルブックマークボタンの設置とブックマーク数を表示する方法
検索エンジンからお邪魔しました！
このブログかなりレベル高い＆参考になりますね！
グルグル回ってちょっと勉強して帰ります。お礼がてらコメント残していきます。
ではではまた勉強しに来ます☆
先生！ nofollowとexternalを同時に書くときに逆に書いたら
動きそうにありません。スペースでsplitしてきちんとしたほうが。
Anonymous, 有難う御座います。
同じことだから、external nofollowだけでいいかなと思ったんですが、
nofollow externalでも開くようにしたほうが、親切ですね。
書き換えました。:)
Event.observe と window.onload…
いや、すっかり罠にはまってました。前回のエントリで紹介した、 target=
You have posted “script tyle” in one of the code samples, it should be “script type”.
あなたが投稿した ’script tyle” にする必要があります “script type”
モハンアルン通常Lさん
Thank you!