HTMLのリンクは、ページを作成するときに必須と言ってもよいほど使用する場面が多いです。
リンクはページ同士を繋ぐ役割があり、ページ同士を繋ぐ外部リンク、ページ内同士を繋ぐ内部リンクがあります。
これらを正しく使うことでSEO効果(アクセスアップ)があるとも言われているくらい大事なタグになっています。
そんなリンクタグには、使い方がいくつかあります。
この記事の要点
・別タブ、別ウィンドウで開くリンクの作り方
・ページ内リンクの作り方
・ページの最初へ戻るリンクの作り方
HTMLのリンクとは？
リンクには「外部リンクと内部リンク」の2種類があります。
・自分のサイトと外部サイト同士を繋ぐ。
・自分のサイト同士(ページ・メニュー・見出しなど)を繋ぐ。
たとえば、下のリンクは内部リンクです。(このサイトの別ページへ飛びます)
プログラミング未経験者が独学で学ぶ【準備編】(※別タブで開きます)
下のリンクは外部リンクです。(プログラミング学習サイトへ飛びます)
ドットインストール(※別タブで開きます)
内部リンクと外部リンクを正しく使えば、SEO効果が期待できます。
・関連のある内部リンクを貼れば、ユーザーがサイトに滞在している時間を伸ばすことができる
・参考となるサイトへの外部リンクを貼れば、ユーザーに良いコンテンツを提供したことによってGoogleからの評価も上がる
HTMLリンクの貼り方
aタグとは？
aタグは「anchor(アンカー)の略」で、他のページへリンクを貼りたいときに使います。
リンクを作成するには「テキストか画像のURL」が必要で、どちらもaタグで囲むことでリンクになります。
また、aタグで囲うテキストのことを「アンカーテキスト」と呼びます。
href属性とは？
href属性は、「hypertext reference(ハイパーテキスト リファレンス)の略」です。
aタグとセットで使い、リンク先のURLを指定します。
【書き方】
<a href=”リンク先のURL“>アンカーテキスト</a>
【画像にリンクを貼る】
画像にリンクを貼りたい場合、「imgタグにsrc属性」を使って画像のURLを指定します。
<a href=”リンク先のURL“><img src=”画像のURL“></a>
リンクを「別タブ・別ウィンドウ」で開く
リンクを作成するときに、何も指定をしないと今見ているページが切り替わり、リンク先のページを表示します。
別のタブで開きたい場合は、target属性に「_blank」という値を追加すれば別タブで開くことができます。
【書き方】
<a href=”リンク先のURL” target=”_blank”>テキスト文字</a>
PCになりますが、別ウィンドウで開きたい場合「Shiftキー」を押しながらリンクを選択すると、新規ウィンドウで開くことができます。
ページ内リンクの作り方
【動作確認のための目次】
・
・
・
・
・
・
・
・
「見出し・もくじ」などにリンクをつける
「見出し・もくじ」などへリンクを作りたい場合、href属性に「#(パウンド記号) 」と「好きな識別子名」を付けます。
リンク先には「id 属性」を使い、さきほどの「識別子」を付けます。
【書き方】
<a href=”#好きな識別子の名前“>見出し１へのリンク</a>
<h2 id=”好きな識別子の名前“>見出し1</h2>
※この見出し内にある目次をクリックすると、リンクの動きを見ることができます。
ページの先頭へ戻るリンク
ページを下に読み進めているときに、ページの先頭へ戻って読み直したいなどということがあるかも知れません。
その場合、href属性に「#」か「#top」どちらかを書くとページの先頭へ戻るリンクを作ることができます。
【書き方】
<p><a href=”# か #top”>ここをクリックで先頭へ戻ります</a></p>
・ページ内リンクに飛んだときは、URLの最後に識別子がつきます。
これらの内部リンクは、「ul・li」などの「リストタグ」と組み合わせて使うこともできます。
リンクを正しく使ってSEO対策をしよう！【まとめ】
HTMLのリンクを正しく使うとSEO対策(アクセスアップ)にもなるので、ページを作成していく上でとても必須なタグのひとつになります。
リンクタグを使えば出来ること
- 「テキスト・画像」にリンクを入れることができる
- 「別タブ・別ウィンドウ」で開くリンクを作ることができる
- 「ページ内のもくじ・見出し」へのリンクを作ることができる
- 「ページの最初へ戻る」リンクを作ることができる
リンクタグを使う想定と、その効果
・関連のあるページに内部リンクを貼ると、サイトへ訪れたユーザーが関連したページへ飛ぶので、滞在時間を伸ばすことができてSEO対策になる。
・参考となるページへの外部リンクを貼ると、自サイトを訪れたユーザーが参考ページへ飛ぶので、ユーザーに良いコンテンツを提供したとしてGoogleからの評価が上がってSEO対策になる。
