ホームページ
のリンクについて、正しい作り方を解説しました。ハイパーリンクを正しく設置したい初心者に向けた内容ですが、上級者にも役立つと思います。SEOも意識した作成術を、詳しく説明しているからです。
なぜホームページのリンクが重要なのか？
リンクは、ホームページ同士をつなげます。つまり、さまざまな情報に出会える入口であるとも言えるでしょう。したがって、閲覧者に新しい知識を提供するという意味で、非常に重要なんです。そこで、正しい作り方について説明しようと思います。
なぜなら、誤った作り方をすると本来の目的である『新しい情報の入り口』という役割が果たせないからです。それは、お手本通りに作成するという意味だけでなく、閲覧者の使いやすさ（導線設計）という点も考慮すべきポイントが多々あります。
また、 Google などの検索エンジンはリンクを重視しますので、検索順位にもかかわってきます。正しく作ることが、結果的にはWeb集客にも好影響を与える可能性があるんですね。
そこで、どのようにリンクを設置するのがベストなのか、正しい作り方を説明します。
※リンクについて
リンクには関係性によって、以下のように２通りあります。
- 発リンク ⇒ 自サイトから他のホームページへリンク
- 被リンク ⇒ 他のホームページから自サイトへリンク
今回ご説明するのは「発リンク」ということになりますので、ご注意ください。
正式には「ハイパーリンク」と言いますが、「リンク」の方が一般的ですので、言葉遣いはそちらに統一しています。
ホームページのリンク、作り方７つのポイント！
それでは、ホームページのリンクについて、作り方を７つのポイントに分けて説明します。しっかりと目を通してください。
１．リンクの基本的な作り方とは？
まず、リンクの基本的な作り方を説明します。やり方はとても簡単で、 a（アンカー）タグで文字列を囲み、href にリンク先の URL を記述するだけです。以下の例をご覧ください。
- <a href=”https://hprs1.com/”>ウェブソルブ</a> ⇒ ウェブソルブ
このように記述すると、文字列がリンクとして機能します。たったこれだけで作れますが、とても重要なポイントがあります。それは、「ページタイトル（title タグで囲まれている部分）」と一致させることです。つまり、それなりの作法があるということなんですね。
例えば、上記の例では「 https://hprs1.com/ 」がリンク先ですので、そのページのタイトルである「ウェブソルブ」を a タグで囲んでいます。つまり、文字列は接続先を正確にあらわさないといけないんですね。なので、「こちらをクリック」などとするのは誤りなんです。
なぜ文字列にこだわるのかと言えば、人間にはわかっても、検索エンジンにはわからないからです。システムが認識できなければ、検索順位に悪影響を及ぼす可能性があります。そのため、リンク文字はページタイトルと一致させて、正しく作るようにしてください。
もちろん、人間の目で見ても分かりやすくする（ユーザービリティ）ためにも正確な文字列でリンクを作りましょう。
２．同一ページ内にリンクを張るには？
続いて、同一ページ内にリンクを張る場合をご紹介しましょう。基本的な流れは、移動先に目印（ID属性）を付けて、そこへ目がけてジャンプするという設定を行います（IDに#を付けると、アドレスとして指定できます）。以下の例示をご覧ください。
- リンク元 ⇒ <a href=”#point2″>同一ページ内にリンクを張るには？</a>
- リンク先 ⇒ <h3 id=”point2″>同一ページ内にリンクを張るには？</h3>
このように記述すると、「同一ページ内にリンクを張るには？」をクリックした際に、h3タグへジャンプします。hrefにはURLの代わりに「#ID」を設定しますが、文字列は任意で構いません。（上記では、point2 を勝手に作りました。）
つまり、ページ内でリンクを張る場合は必ずID属性を使うことになるので、ジャンプ先には何かしらのタグが必要です。一般的には、見出しに移動することが多いと思いますので、特に困ることはないと思いますが、場合によっては無理やりに設定が必要かもしれませんね。
なお、先ほどの基本的な作り方同様、リンク先の文字列に合わせるようにした方が、やはり無難だと思います（検索エンジンへの対応という意味で）。
ちなみに、IDは同一ページ内では唯一無二になるようにしてください。これはHTMLのルールなので、同じものを複数作らないよう気をつけましょう。
補足：他ページの特定位置にジャンプするには？
他ページの、特定の位置にジャンプさせたい場合がありますよね。その際は、URLの後ろにIDを続けて記述してください。具体的には以下のようにします。
- <a href=”sample.html#point3″>サンプルページ-三番目の見出し</a>
ただ、この場合はリンク文字列が少々ややこしいですね。ですが、基本的には移動先のページタイトルを使用すべきでしょう。そして、その後ろにハイフンや半角スペースで見出しの文字列を連結すれば、間違いないと思いますよ。
３．ボタン（画像）をリンクにするには？
続いて、ボタンをリンクにする方法を説明します。画像は、imgタグで表示しますので、そのままイメージを aタグで囲みます。以下の例を見てください。
- <a href=”#point3″><img src=”toiawase.png” alt=”お問い合わせ” /></a>
画像をリンクにする場合は、このように imgタグを aタグで囲むだけで簡単に設定ができます。縦横のサイズについては、自動的にイメージの大きさに合わせてくれますよ。
ただし、画像をリンクにするときは大きな問題が発生します。それは、文字列が設定できないことです。移動先を示すワードが無いですので、検索エンジンに対して良くない対応になります。そこで、必ず行ってほしいのが、imgタグにalt属性を設定することです。
alt属性が設定された画像をaタグで囲むと、そこに設定された文字列がリンク文字の代わりとして働きます。もちろん、先ほどと同様に移動先のタイトルと一致させてください。
現在主流のHTML5のルールでは、alt属性は必須ではありませんが、画像をリンクにする場合は必須だと思ってください。
４．PDFファイルにリンクを張るには？
PDFをダウンロードしてもらいたいときなど、リンク先をページではなくファイルにしたいときがありますよね。その場合は、そのまま指定しても構いません。具体的には、以下の例のようにhref属性にファイル名と場所を指定してください。
- <a href=”マニュアル.pdf”>マニュアル</a>
ちなみに、画像をダウンロードできるようにしたい場合も、hrefにファイル名と場所を指定してください。以下はその例です。
- <a href=”写真.jpg”>写真</a>
なお、接続先がページではないので、リンク文字は神経質にならなくても良いです。なぜなら、検索への影響が少ないからです。ただし、PDFファイルの場合は内容が検索対象になる場合がありますので、そこまで考えるのであれば気を配りましょう。
文字に直接リンクを張る場合でも、画像でaltに文字列を入れる場合でも、なるべくなら内容を正しく示したものにしましょう。閲覧者のためになりますからね。
補足：内容が表示されてしまう場合は？
リンク先をファイルにすると、ダウンロードではなく内容が表示される場合があります。そのような場合は、download 属性を設定しましょう。以下のようにファイル名を記述します。
- <a href=”写真.jpg” download=”写真.jpg”>写真</a>
このように記述（ファイル名だけ、パスは不要です。）すると、画像を表示せずにダウンロードできます。もちろん、PDFなど他の種類も指定できますよ。なお、IEでは download属性に対応していませんので、「右クリックして［対象をファイルに保存］」するように促すと良いでしょう。
５．ライン用のリンクを作るには？
ホームページを多くの方に知ってもらうために、ラインでの拡散を期待する方もいらっしゃると思います。実は、ライン用のリンクは簡単に作れます。ワンクリックで利用できるので、閲覧者は簡単に仲間に紹介できますよ。
以下のライン公式ページにアクセスしてみてください。指示に従って手順通りに進めば、とても簡単に作れますよ。
ただし、ラインは閉じた世界でのつながりであり、ツイッターなど他のSNSのような拡散は難しいと思われますので、過度な期待はしないようにしましょう。
６．リンク先を新しいタブで開くには？
リンク先を他サイトのページにした場合など、別のタブで開きたいことがありますよね。そのようなときは、target属性を追加するだけで、簡単に設定できます。以下の例をご覧ください。
- <a href=”https://www.sample.com/” target=”_blank”>他のサイト</a>
target属性の値は「_blank」を設定しましょう。これで簡単に別のタブで開きます。
ちなみに、blankの前の記号は、アンダースコア（バー）という記号で、Shift キーを押しながら ろ キー（右 Shift の隣）を押すと表示できます。よく分からなければ、前の段落からコピー＆ペーストしていただいても構いませんよ。
なお、この方法は閲覧者の導線に強く影響しますから、閲覧の流れを邪魔してしまわないか、よく考えて使用しましょう。
７．リンクはサイト構造を考えて作りましょう
冒頭でもお話ししましたが、リンクはページ同士を結び付ける役割があります。したがって、情報の種類と在り処をよく考えて連結する必要があります。なぜなら、閲覧者がホームページ上で迷子にならないようにするためと、検索エンジンにサイト構造を伝えやすくするためです。
ザックリ言うと、トーナメント表のようにトップページから細分化していくイメージです。先へ進めば進むほど、内容がより詳しくなるようにするわけですね。そして、関連性のあるページ同士もリンクさせて、各ページからは先頭へ直に移動できるように結び付けるのも重要です。
リンク構造のイメージ図
HTMLで完全に自作している方は、十分注意して作りましょう。WordPressなどのシステムを使っている場合はほとんど勝手に構造が作られるので、関連するページの結び付け（カテゴリーやタグ）などに注意するだけでよいと思います。
実際に、検索で下位のページにたどり着いて、そこから上位のページに移動する閲覧者は多いと思いますので、リンクによるサイト構造の構築は非常に重要であると認識しておきましょう。
いわゆる「パンくずリスト」を作成するのも、良い方法だと思います。
まとめ
いかがでしたか？ ホームページのリンクについて、正しい作り方を説明しました。
今回ご紹介したのは、リンクの基本的な作り方から始まり、同一ページ内にリンクを張る、ボタンをリンクにする、PDFファイルにリンクを張る、ライン用のリンクを作る、リンク先を新しいタブで開く、リンクはサイト構造を考えて作る、などのポイントでした。
ホームページのリンクは別ページへの移動だけでなく、より詳しい情報に誘導する役割があります。それは閲覧者の目だけでなく、検索エンジンの分析でも同じように判定されます。だからこそ、a タグで囲まれた文字列は、正確に移動先を表さなくてはいけないんですね。
このように、ユーザビリティだけでなくSEO対策にも強く影響するのが、ホームページのリンクであることを忘れないでください。何となく作るのではなく、しっかりと意図を持って設置しなくてはいけないことを、ご理解いただければ幸いです。
以上、「ホームページのリンク、正しい作り方を解説！」と題して説明しました。