ホームページを作っていると、「他のサイトへのリンクを貼りたいけれど、HTML ではどう書けばいいの？」と迷うことがあります。
例えば、企業の公式サイトや SNS、参考サイトなどを紹介する場合、リンク先の URL をどこに書けばいいのか、初めて HTML を書く方にはわかりにくい部分もあるでしょう。
また、リンクをクリックしたときに今見ているページを残したまま、新しいタブでリンク先を開きたい場合には、HTML で特別な指定が必要です。
ここでは、こうした外部サイトへのリンクの貼り方から、別タブで開く方法、リンクを貼る際の注意点まで詳しく解説します。
ホームページから他のサイトへリンクを貼る基本の書き方
実際に自分のホームページから他のサイト（外部サイト）へ移動するリンクを貼るための、具体的なHTMLの書き方を見ていきます。
外部サイトへのリンクはaタグとhrefで作る
外部サイトへリンクを貼る場合の、基本的な HTML は次のとおりです。
<a href="https://example.com">公式サイトを見る</a>このコードを分解すると、それぞれ次のような役割があります。
・<a> と </a>：リンクを作るタグ
・href：リンク先を指定する属性
・https://example.com：移動先となる外部サイトのURL
・「公式サイトを見る」：画面上に表示され、クリックする文字
つまり、
「aタグでリンクを作り、hrefに移動先のURLを指定する」
というのが、外部リンクの基本です。
hrefには外部サイトのURLを指定する
他のサイトへ移動する「外部リンク」を作るときは、href=” ” のダブルクォーテーションの間に、リンク先となる Webページ の URL を指定します。
例えば、リンク先の URL が https://example.com であれば、次のように記述します。
<a href="https://example.com">公式サイトを見る</a>href に指定した URL が間違っていると、クリックしても目的のページが開かなかったり、エラーページが表示されたりすることがあります。
そのため、URL は正確に指定することが大切です。
URLはブラウザのアドレスバーからコピーする
HTML 初心者の方は、URL を手入力するよりも、ブラウザのアドレスバーからコピーして貼り付ける方法がおすすめです。
URL を手入力すると、文字の入力ミスや記号の打ち間違いが起こりやすいためです。
手順は次のとおりです。
・リンクしたい Webページ をブラウザで開く
・画面上部のアドレスバーに表示されているURLを選択する
・URL をコピーする
・HTML の href=”” の間に貼り付ける
この方法なら、長いURLでも手入力する必要がないため、入力ミスを減らせます。
「http」と「https」はどうすればいい？
Webサイト の URL には、http:// から始まるものと、https:// から始まるものがあります。
現在は、通信を暗号化できる https:// を利用する Webサイト が一般的ですが、リンクを貼るときに自分で判断する必要はありません。
リンクしたいページをブラウザで開き、アドレスバーに表示されている URL をそのままコピーして、href に貼り付ければ OK です。
これなら、http と https を間違えて入力する心配もありません。
aタグはリンクにしたい文字だけを囲む
外部サイトへのリンクを文章の中に入れる場合は、リンクにしたい部分だけを aタグ で囲みます。
文章の一部だけをリンクにする
例えば、次のような文章にリンクを設定するとします。
<p>詳しい情報は、<a href="https://www.google.co.jp/index.html">Googleの公式サイト</a>でご確認ください。</p>この場合、文章全体ではなく、「Googleの公式サイト」という文字だけを <a> と </a> で囲んでいます。
ブラウザでは、
と表示され、「Googleの公式サイト」の部分だけをクリックできます。
このように、文章の中でリンクにしたい部分だけを aタグ で囲むのが基本です。
リンクテキストは「ここをクリック」だけにしない
aタグ で囲んだ文字を「リンクテキスト」または「アンカーテキスト」と呼びます。
この文字は、「ここをクリック」のような表現だけにするより、リンク先の内容がわかる言葉にするのがおすすめです。
例えば、
<a href="https://example.com">ここをクリック</a>よりも、
<a href="https://www.google.co.jp/index.html">Googleの公式サイトを見る</a>のほうが、クリックする前に「どこへ移動するのか」がわかりやすくなります。
リンクテキスト（アンカーテキスト）はなぜ重要？
リンクテキストをわかりやすくすることには、次のようなメリットがあります。
・ユーザーがリンク先を判断しやすい
・文章の内容がわかりやすくなる
・検索エンジンがリンク先の内容を理解する手がかりにもなる
そのため、「ここをクリック」のような曖昧な表現よりも、リンク先の内容が伝わる具体的な言葉を使うことを意識してください。
これは HTML の書き方だけでなく、「読者にとってわかりやすいホームページを作る」という意味でも大切なポイントです。
リンク先の外部サイトを別タブ（ウインドウ）で開く方法
外部サイトへのリンクは、クリックしたときに現在のページとは別の閲覧先で開くように設定することもできます。
target=”_blank”を追加する
リンクをクリックしたときに、今見ているページを残したまま、リンク先を新しい閲覧先で開きたい場合は、aタグ に target=”_blank” を追加します。
実際のHTMLは次のように target=”_blank” を追加すると、リンク先が新しいタブなどで開かれるようになります。
<a href="https://www.google.co.jp/index.html" target="_blank">Googleの公式サイトを見る</a>target=”_blank”はどこに書く？
target=”_blank” は、aタグ の中に記述します。
例えば、href の後ろに半角スペースを1つ入れて追加します。
<a href="URL" target="_blank">href や target のように、タグの中に設定する項目を「属性」と呼びます。
複数の属性を記述するときは、属性と属性の間を半角スペースで区切ります。
そのため、
href="URL" target="_blank"のように記述します。
「別タブ」と「別ウインドウ」はどう違う？
HTML のコード（target=”_blank”）としてはどちらも全く同じ命令を出しています。
target=”_blank” が意味しているのは、あくまで「新しい閲覧先（新しい画面）を用意して開いてね」という大まかな指示だけです。
それを「今あるブラウザの新しいタブ」として開くか、完全に別の「新しいウインドウ（別画面）」として立ち上げるかは、読者が使っているパソコンやスマホ、ブラウザ（Chrome や Safari など）の設定環境によって自動的に判断されます。
現在のインターネット環境では「新しいタブ」として開くことがほとんどですが、どちらのパターンで開かれたとしても、ホームページの仕組みとしては正しく動いているので安心してください。
外部リンクは別タブで開くべき？
HTMLでの書き方がわかったところで、次に迷うのが「他のサイトへのリンクは、すべて別タブで開くように設定すればいいの？」という運用の疑問です。
ここでは、別タブにするメリットをはじめ、実務で使える「別タブで開くべきケース」と「同じタブで開く（別タブにしない）べきケース」の具体的な使い分けの判断基準を詳しく解説します。
外部リンクを別タブで開くメリット
リンクを別タブで開く最大のメリットは、「読者が、元のページ（あなたのサイト）の文章を読み進めている途中でも、スムーズに情報を確認できる」という点にあります。
例えば、あなたがおすすめの家電を紹介するホームページを作っているとします。文章の途中で「詳しいスペックは[メーカー公式サイト]をご確認ください」とリンクを貼った場合、読者の動きは次のようになります。
1.リンクをクリックして、メーカーサイトでスペックを確認する。
2.確認し終わったら、また元のページに戻ってきて、続きの文章を読みたい。
もしここが「通常のリンク」だと、ページが完全に切り替わってしまうため、読者はブラウザの「戻る（←）」ボタンを押さなければ戻ってこられません。スマートフォンの場合は、戻る操作の途中で迷子になってしまうこともあります。
別タブにしておけば、確認したあとにタブを閉じるだけで一瞬で元の文章に戻れるため、非常に親切です。
外部リンクを必ず別タブにする必要はない
「他のサイトへのリンク＝すべて別タブ（target=”_blank”）」という決まりはありません。
すべてを別タブにしてしまうと、クリックするたびにスマートフォンのブラウザのタブが何個も増えてしまい、かえって読者が操作しにくくなってしまうこともあります。
「通常のリンク」と「別タブのリンク」は、読者にとってどちらが便利かを考えて使い分けるのが基本です。
別タブで開くのが向いているケース
自分でホームページを組み立てる際は、以下のケースに当てはまる場合に別タブ（target=”_blank”）を設定するのがおすすめです。
・解説文の中に登場する、根拠や情報元となった「参考サイト」や「ニュース」
・文章の途中で案内する「メーカーやサービスの公式サイト」
・詳しく見せたい「外部の資料やPDFファイル」
判断の基準は、「ユーザーが元のページを画面に残したまま、リンク先を確認したほうが便利かどうか」です。
読者が戻ってきて続きを読みそうなら別タブにする、といった視点で選んでみましょう。
別タブで開かない（同じタブで開く）方が向いているケース
逆に、外部リンクであっても「別タブを使わずに、通常のリンクとして同じ画面で切り替えた方が親切なケース」もあります。
具体的には、以下のような場面です。
・ページ移動の目的が完全に終わるとき：
例えば、手続きや買い物の画面で「外部の決済サイトへ進む」というボタンの場合、読者は元のページに戻ってくる必要がありません。そのまま同じ画面でスムーズに切り替わった方が自然です。
・他のサイトの「トップページ」をシンプルに紹介するとき：
記事の途中の補足ではなく、「おすすめのWebサイト集」のようにリンク先へ行くこと自体が目的のコーナーでは、別タブにすると読者のスマホにタブが大量に増えてしまい、嫌がられる原因になります。
・スマホでの見やすさを最優先したいとき：
スマートフォンの画面はパソコンよりも狭いため、タブが新しく開いたことに読者が気づかず、「戻るボタンが効かなくなった！」と勘違いしてしまうトラブルが起きやすいです。
判断に迷ったら、「読者がリンク先を見たあと、またすぐに元の文章に戻ってきたいかどうか」を考えてください。
戻ってくる必要がない、あるいは移動先をじっくり見てほしいときは、別タブにせず通常のリンクにするのが親切です。
