《Web担当者を応援する、ホームページ集客の専門家のブログ。》

ホームページのリンク、正しい作り方とは?

ホームページのリンク、正しい作り方とは?

ホームページリンクについて、正しい作り方を説明します。読者対象は、リンクの作り方を知りたい初心者の方ですが、作り方に慣れている方にも役立つと思います。SEOも意識したリンクの作り方を説明しているからです。

なぜホームページのリンクが重要なのか?

リンクは、ホームページ同士をつなげますので、とても重要です。そこで、リンクの正しい作り方について説明しようと思います。なお、自作したリンクのことを発リンクと呼び、他所からリンクされることを被リンクと言いますので、知識として覚えておいてください。

では、なぜホームページのリンクが重要なのかというと、先ほど言いましたように他のページとつながるからです。つながるということは、閲覧者の導線にも非常に影響します。したがって、集客という点でも非常に影響力が強いと言えます。

また、 Google などの検索エンジンはリンクを重視します。なぜなら、リンクは新しい情報へとつながるからです。つまり、検索順位にもかかわってくるわけですね。

そこで、どのようにリンクを作るのがベストなのか、正しい作り方を説明します。

正式には「ハイパーリンク」と言いますが、リンクの方が一般的ですので、これ以降の説明ではそちらに統一します。

ホームページのリンクの作り方、7つのポイント!

それでは、ホームページのリンクの作り方を、7つのポイントに分けて説明します。しっかりと目を通してください。

-目次-

リンクの基本的な作り方とは?

まず、リンクの基本的な作り方を説明します。リンクを作る際に使う HTMLタグは、 a(アンカー)です。具体的には、a(アンカー)タグで文字列を囲み、href にリンク先の URLを記述します。

このように記述すると、文字列がリンクとして機能します。たったこれだけでリンクが作れますが、とても重要なポイントがあります。それは、リンク文字をリンク先の「ページタイトル」と一致させることです。(ページタイトルとは、title タグに囲まれている文字列のことです。)

例えば、上記の例では「 https://hprs1.com/ 」がリンク先ですので、そのページのタイトルである「ウェブソルブ」をリンク文字列にしています。つまり、リンクはリンク先を正確にあらわさないといけないんですね。なので、「こちらをクリック」などとするのは誤りなんです。

なぜ文字列にこだわるのかと言えば、人間にはわかっても、検索エンジンにはわからないからです。検索エンジンに認識できなければ、検索順位に悪影響を及ぼす可能性があります。そのため、リンク文字はページタイトルと一致するようにして、正しく作るようにしてください。

もちろん、人間の目で見ても分かりやすくする(ユーザービリティ)ためにも正確な文字列でリンクを作りましょう。

同一ページ内にリンクを張るには?

先ほど説明したのは、他のページへのリンクでしたので、同一ページ内にリンクを張る方法をご紹介しましょう。ページ内にリンクを張るには、ジャンプ先のタグに「ID属性」を設定し、そこに対してリンクを張ります。また、IDは#を付けることで、リンク先として指定できます。

  • リンク元 ⇒ <a href=”#point2″>同一ページ内にリンクを張るには?</a>
  • リンク先 ⇒ <h3 id=”point2″>同一ページ内にリンクを張るには?</h3>

このように記述すると、「同一ページ内にリンクを張るには?」をクリックしたときにpoint2というIDにジャンプします。hrefにはURLの代わりに「#ID」を設定します。IDは任意で、各自好きなものを勝手に作って構いません。(上記では、point2 を勝手に設定しました。)

つまり、ページ内でリンクを張る場合は、必ずID属性を使うことになるので、ジャンプ先には何かしらのタグが必要です。一般的には、見出しにジャンプすることが多いと思いますので、特に困ることはないと思いますが、場合によっては無理やりタグを設定する必要があるかもしれませんね。

なお、先ほどの基本的な作り方同様、リンク先の文字列に合わせるようにした方が、やはり無難だと思います(検索エンジンへの対応という意味で)。

ちなみに、IDは同一ページ内では唯一無二になるようにしてください。これはHTMLのルールなので、同じものを複数作らないよう気をつけましょう。(別のページであれば重複しても大丈夫です。)

補足:他ページのIDにリンクを張るには?

他ページの、特定の場所にジャンプさせたい場合がありますよね。その場合は、URLの後ろにIDを続けて記述してください。具体的には以下のようにします。

  • <a href=”sample.html#point3″>サンプルページ-三番目の見出し</a>

ただ、この場合はリンク文字列が少々ややこしいですね。ですが、基本的にはリンク先のページタイトルをリンク文字のメインにすべきでしょう。そして、その後ろにハイフンや半角スペースで見出しの文字列を連結すれば、間違いないと思いますよ。

ボタン(画像)をリンクにするには?

続いて、ボタン(画像)をリンクにする方法を説明します。画像は、imgタグで表示しますよね、したがって、そのまま imgタグを aタグで囲みます。

  • <a href=”#point3″><img src=”toiawase.png” alt=”お問い合わせ” /></a>
お問い合わせ

画像をリンクにする場合は、このように画像を aタグで囲むだけで簡単に設定ができます。リンクの大きさも、自動的に画像の大きさに合わせてくれるので簡単ですね。

ただし、画像をリンクにするときは大きな問題が発生します。それは、リンクに文字列が設定できないことです。リンク先を示す文字列が無いので、検索エンジンに対して非常にまずい状況になると言えます。そこで、必ず行ってほしいのが、imgタグにalt属性を設定することです。

alt属性が設定された画像をaタグで囲むと、altに設定された文字列が、リンク文字の代わりとして働きます。もちろん、先ほどと同様に、リンク先のタイトルと一致させてください。

現在主流のHTML5では、alt属性は必須ではありませんが、画像をリンクにする場合は必須だと思ってください。

PDFファイルにリンクを張るには?

PDFファイルをダウンロードしてもらいたいときなど、リンク先をページではなくPDFファイルにしたいときがありますよね。この場合は、そのままPDFファイルをリンク先に設定してしまっても構いません。具体的には、href属性にPDFファイルの場所を指定してください。

  • <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 の隣)を押すと表示できます。よく分からなければ、こちらの「_blank」をコピーしていただいても構いませんよ。

なお、この方法は閲覧者の導線に強く影響しますから、閲覧の流れを邪魔してしまわないか、よく考えて使用しましょう。

リンクはサイト構造を考えて作りましょう

冒頭でもお話ししましたが、リンクはページ同士をつなげる役割があります。したがって、サイトの構造をよく考えてリンクさせる必要があります。なぜなら、閲覧者がサイト内で迷子にならないようにするためと、検索エンジンにサイト構造を伝えやすくするためです。

ザックリ言うと、トーナメント表のようにトップページから細分化していくイメージです。先へ進めば進むほど、内容がより詳しくなるようにするわけですね。そして、関連性のあるページ同士もリンクさせて、各ページからはトップページへ直に移動できるようにリンクするのも重要です。

リンク構造の模式図

HTMLで完全に自作している方は、十分注意して作りましょう。WordPressなどのシステムを使っている場合はほとんど勝手に構造が作られるので、関連するページの結び付け(カテゴリーやタグ)などに注意するだけでよいと思います。

実際に、検索で下位のページにたどり着いて、そこから上位のページに移動する閲覧者は多いと思いますので、リンクによるサイト構造の構築は非常に重要であると認識しておきましょう。

いわゆる「パンくずリスト」を作成するのも、良い方法だと思います。

まとめ

いかがでしたか? ホームページのリンクについて、正しい作り方を説明しました。

ご紹介したのは、リンクの基本的な作り方とは?、同一ページ内にリンクを張るには?、ボタン(画像)をリンクにするには?、PDFファイルにリンクを張るには?、ライン用のリンクを作るには?、リンク先を新しいタブで開くには?、リンクはサイト構造を考えて作りましょう、などでした。

ホームページのリンクは、単に他のページへ移動するための手段ではありません。例えば、何かについて簡単に説明し、詳しくはリンク先を見てもらうようにするといった役割があります。つまり、リンクによって詳細な情報が手に入ったり、新しい情報に触れられるのです。

それは閲覧者の目だけでなく、検索エンジンの分析でも同じように判定されます。したがって、リンク文字は正確にリンク先を表してください。このように、ユーザビリティだけでなく、SEO対策にも強く影響するのがホームページのリンクなんですね。

リンクは何となく作るのではなく、しっかりと意図を持って作るものであると、ご理解いただければ幸いです。

以上、「ホームページのリンク、正しい作り方とは?」と題して説明しました。