隠しリンクの作り方と見つけ方！SEOなど注意点も [ホームページ作成] All About

隠しリンクとは

隠しリンクとは、閲覧者には容易に見えない形で掲載されたリンクのことです。リンクの存在を視覚的には完全に見えなくする方法や、極端に見えにくくする方法、ある条件を満たさない限り表示されないようにする方法など、様々な隠し方があります。宝探しゲームなどの遊び要素として使う分には問題ありませんが、検索結果のランキング操作目的で使おうとするとペナルティを受ける可能性があり、使い方には注意が必要です(後述)。

見つけられることを前提にした隠しリンクを作ってみましょう

隠しリンク(隠しページ)の作り方と見つけ方を紹介

ウェブ上のリンクは、閲覧者に別のページへ移動してもらう目的で作るのですから、隠す意味はありません。しかし、おまけページなどへのリンクを見えにくくしてこっそり隠すのは、ちょっとした遊びとして面白い場合もあるでしょう。そこで今回は、隠しリンク(隠しページ)の作り方をご紹介いたします。

また、その隠しリンクが「どれくらい発見しにくいのか」を判断するために、隠しリンクの見つけ方(探し方)も併せて解説しています。隠しリンクと言っても、本当に誰にも見つけられなかったら用意する意味がありません。それぞれの隠しリンクの見つけ方も参考にして、どの方法を使って隠すのかを選んでみて下さい。

なお、具体的な解説の前に注意点を2つほど述べておきます。

■注1：隠しリンクは見つけてもらうことが前提
本記事でご紹介する隠しリンクの作り方は、最終的には閲覧者に見つけてもらうことを前提にした隠し方です。不特定多数に公開すると困るような情報は、ユーザ認証などのアクセス制限方法を使いましょう。詳しくは記事「Basic認証(基本認証)でアクセス制限をかける方法」で解説しています。

また、そこまで強固なアクセス制限は必要ないものの、隠しページの存在を軽く隠しておきたいだけの場合には、JavaScriptを使う手軽な方法もあります。詳しくは「JavaScriptでパスワード認証を設定！簡単な閲覧制限」で解説していますのでご参照下さい。これは、リンクを隠す(見えにくくする)のではなく、ページを隠す(アクセスしにくくする)方法です。

■注2：検索エンジンスパム(SEOスパム)だと誤解されないよう注意
人間の閲覧者には見えにくい配色や大きさで掲載した文字のことを「隠しテキスト」と呼びます。この隠しテキストや隠しリンクは、SEO(検索エンジン最適化)目的の偽装手段として使うと、Googleのウェブマスター向けガイドライン(品質に関するガイドライン)に違反します(特に隠しテキストと隠しリンクページで解説されています)。

もし、ページ中の隠しリンクがSEO目的の偽装行為だと判定されてしまうと、そのページやリンク先のページが検索結果から除外されるなどのペナルティを受けることになってしまいます。検索サイトからもアクセス者を得たいページでは特に、これらの方法を多用しないよう注意して下さい。使わないでおくのが最も無難です。

【この記事の目次】

背景色と同じ文字色にして見えなくする隠しリンクの作り方

隠しリンクを作る最も簡単な方法が、配色を調整して見えなくする方法でしょう。文字色を背景色と同じ色にして掲載すれば、ブラウザ上の見た目ではリンクの存在が分かりません。作るのも簡単ですが、見つけるのも簡単です。

A. 隠しリンク
B. もう少し見つけやすくした隠しリンク

■A：隠しリンクの表示例：

ここに隠しリンクがあります。

上記の不自然に空いたスペースにリンクがあります。文字は見えなくても、マウスポインタを載せるとポインタの形状が変化するのでリンクだと分かるでしょう。

■A：この隠しリンクの作り方：
方法はとても簡単で、リンク文字の入りを背景色と同じにすれば良いだけです。例えば、背景色が灰色(#dddddd)の場合は、HTMLとCSSを以下のように記述します。

ここに
<a href="hidelink.html" style="color: #dddddd; text-decoration: none;">隠しリンク</a>
があります。

上記のHTMLでは、a要素を使って「hidelink.html」へのリンクを設けています。その際、style属性を使ってCSS(スタイルシート)で下記の2点の装飾を施しています。

color: #dddddd;
この記述で、リンク文字の配色を背景色と同じ灰色(#dddddd)に変えています。もし白色にしたいなら「color: #ffffff;」や「color: white;」と書きます。
text-decoration: none;
代表的なブラウザでは、リンク文字には標準で下線が引かれます。ここではその下線を表示しないように指定しています。

■B：もう少し見つけやすくした隠しリンクの表示例：

ここに隠しリンクがあります。

上記の不自然に空いたスペースにリンクがあります。マウスポインタを載せたときにだけリンク文字が見えます。先程よりも見つけやすいでしょう。

■B：この隠しリンクの作り方：
方法は先程とほぼ同じです。リンクの上にマウスポインタが載った際の装飾も加えるため、HTMLとCSSを別々に記述します。まず、HTMLは以下のように記述しておきます。

ここに
<a href="hidelink.html" class="hidelink">隠しリンク</a>
があります。

上記では、リンクを作るa要素に「hidelink」というclass名を付加しています。次にCSSソースを以下のように記述します。

<style type="text/css">
/* ▼リンクの配色 */
.hidelink {
   text-decoration: none;  /* リンクの下線を消す */
   color: #dddddd;         /* 文字色を灰色(#dddddd)にする */
}
/* ▼リンクにマウスが載った際の配色 */
.hidelink:hover {
   text-decoration: underline;  /* 下線を加える */
   color: blue;                 /* 文字色を青色にする */
}
</style>

「リンクの配色」部分は先程と同じです。「リンクにマウスが載った際の配色」は上記ソースの後半のようにhover疑似クラスという記述方法を使うことで指定できます。ここでは、リンク文字に下線を加え、色を青色に変化させています。

※注：本記事をAll Aboutのウェブサイト以外で読んでいる場合(RSSリーダーや提携サイトなど)や、装飾の一部を無効にするようなブラウザの機能(リーダーモードなど)を使って読んでいる場合は、記事中のサンプルが意図通りには見えない可能性があります。

この隠しリンクの見つけ方・攻略法

上記でご紹介した「文字色を背景色を同じ色にする方法での隠しリンク」は、作るのも簡単な分、見つけるのも簡単です。見つけ方はいろいろありますが、例えば以下の方法が使えるでしょう。

ページ全体を範囲選択してみる
マウスをドラッグするなどして範囲選択すると、多くのブラウザでは選択領域が反転表示されます。すると、隠されているリンク文字も見えます。たいていは、[Ctrl]+[A]キーを押すと簡単にページ全体を範囲選択できます。
TABキーを連続で押していく
多くのブラウザでは、[TAB]キーを押す度にリンクや入力欄などを順番に移動できます。ブラウザによっては、そのとき選択状態になっているリンクを点線などで囲んで表示するため、文字色が背景色と同じでも見つけられます。
CSSを無効にしてみる
装飾の変更にはCSSを使っていますから、ブラウザの機能でCSSを無効にすれば隠されているリンク文字も見えます。
ページのHTMLソースを表示する
この隠しリンクは単に配色を変更しただけであって、リンクそのものはHTMLのa要素(＝aタグ)を使って作られています。したがって、HTMLソースを見て「<a href="～"……」という記述を探せば、すべてのリンクを探せます。
リンク一覧を表示する
後述のアドオンなどを使って、ページ内のリンクを一覧表示させれば、もっと簡単に見つかります。