このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

ハイパーリンクとは

この記事では、ハイパーリンクとは何か、なぜ重要なのかを詳しく説明します。

前提条件: まずインターネットはどのように動くのかを理解し、 ウェブページ、ウェブサイト、ウェブサーバー、検索エンジンの違いについてよく理解している必要があります。
目標: ウェブ上のリンクとその重要性について学びます。

概要

ハイパーリンク(通常はリンクと呼ばれます)は、ウェブを支える基本概念です。リンクとは何かを説明するために、ウェブアーキテクチャの基本に立ち返りましょう。

ウェブの発明者でもあるティム・バーナーズ・リーは、 1989 年にウェブを支える 3 つの柱について語りました。

  1. URL、ウェブ文書を追跡するアドレスシステム
  2. HTTP、URL が与えられたときに文書を見つけるための転送プロトコル
  3. HTML、埋め込みハイパーリンクを可能にする文書形式

3 つの柱からわかるように、ウェブ上のすべてのものは文書とそのアクセス方法を中心に展開されています。ウェブの当初の目的は、テキスト文書に簡単にアクセスし、読み、文書間を移動できるようにすることでした。それ以来、ウェブは画像、ビデオ、バイナリーデータにもアクセスできるように進化しましたが、こうした改善によって 3 つの柱が変わることはほとんどありませんでした。

ウェブが登場する前は、文書にアクセスして別の文書に移動することはとても困難でした。URL は人が読めるため、文書へのアクセスはすでに容易になっていました。それでも、文書にアクセスするたびに長い URL を入力するのは大変です。そこでハイパーリンクが状況を一変させました。リンクを使うと任意のテキスト文字列を URL に関連付けることができ、ユーザーはリンクをアクティブにするだけですぐに対象の文書にアクセスできます。

リンクは下線付きの青い文字で表示され、周囲のテキストと区別できます。リンクをタップまたはクリックしてアクティブにします。キーボードを使用する場合は、Tab キーを押してリンクにフォーカスを移し、Enter キーまたはスペースバーを押します。

ウェブページにおけるリンクの基本的な表示と効果の例

リンクは、ウェブをとても便利で成功させた画期的なものです。この記事の残りの部分では、さまざまな種類のリンクと、それらが現代のウェブデザインにとって重要であることについて説明します。

より深く掘り下げる

すでに述べたように、リンクは URL に関連付けられたテキスト文字列です。リンクを使用すると、ある文書から別の文書に簡単に移動できます。とはいえ、考慮すべき点がいくつかあります。

リンクの種類

内部リンク

同じウェブサイトに属する 2 つのウェブページ間のリンクを、内部リンクと呼びます。内部リンクがなければ、1 ページのウェブサイトを除いて、ウェブサイトは成り立ちません。

外部リンク

あなたのウェブページから他者のウェブページへのリンクです。ウェブはウェブページのネットワークであるため、外部リンクがなければウェブは成り立ちません。あなたのウェブページで提供しているもの以外の情報を示すには、外部リンクを使用してください。

被リンク

他の人のウェブページからあなたのサイトへのリンク。外部リンクの反対です。誰かがあなたのサイトにリンクしたときにあなたはリンクバックする必要はないことに注意してください。

ウェブサイトを構築するときは、サイトを使いやすくする内部リンクに重点を置いてください。リンクが多すぎず少なすぎないよう、バランスを取りましょう。別の記事でウェブサイトナビゲーションの設計について説明しますが、原則として、新しいウェブページを追加するときは、ほかのページの少なくとも 1 つからそのページにリンクしてください。一方、サイトに 10 ページを超えるほどのページがある場合、すべてのページからほかのすべてのページにリンクするのは逆効果です。

サイトを作り始めたばかりなら、外部リンクや被リンクについてそれほど心配する必要はありません。ただし、検索エンジンにサイトを見つけてもらいたい場合には非常に重要です(詳しくは後述します)。

アンカー

ほとんどのリンクは 2 つのウェブページを結び付けています。アンカーは、1 つの文書内の 2 つのセクションを結び付けます。アンカーを指すリンクをたどると、ブラウザーは新しい文書を読み込むのではなく、現在の文書の別の部分にジャンプします。ただし、アンカーの作成と使用の方法は、ほかのリンクと同じです。

ウェブページにおけるアンカーの基本的な表示と効果の例

リンクと検索エンジン

リンクはユーザーにとっても検索エンジンにとっても重要です。検索エンジンはウェブページをクロールするたびに、そのページ上のリンクをたどってウェブサイトをインデックスに登録します。検索エンジンはリンクをたどってウェブサイトのさまざまなページを見つけるだけでなく、リンクの表示テキストを使って、どの検索クエリーで対象のウェブページを見つけられるかを判断します。

リンクは、あなたのサイトが検索エンジンの検索結果にどれだけ表示されやすいかにも影響します。問題は、検索エンジンの活動を測定するのが難しいことです。企業は当然、自分のサイトが検索結果の上位に表示されることを望んでいます。検索エンジンがサイトの順位をどのように決めるかについては、次のことがわかっています。

  • リンクの表示テキストは、特定の URL がどの検索クエリーで見つかるかに影響します。
  • ウェブページの被リンクが多いほど、検索結果のランクは高くなります。
  • 外部リンクは、元のウェブページと遷移先のウェブページの両方の検索ランキングに影響を与えますが、その程度は不明です。

SEO (検索エンジン最適化)は、検索結果でウェブサイトを上位にランク付けする方法の研究です。ウェブサイトのリンクの使用を改善することは、有益な SEO テクニックのうちの一つです。

次のステップ

次は、リンクを使ったウェブページをいくつか作ってみましょう。

  • すべてのリンクは URL を指すため、より理論的な背景を知るには、URL とその構造について学んでください。
  • もう少し実践的な内容を知りたいですか?ハイパーリンクの作成では、リンクの実装方法を詳しく説明しています。