HTMLのリンクの設定方法について!未経験のおっさんが0からWEBサイト作成に奮闘中

ホームページを作成する上でリンクの設定は頻繁に使用します。例えば、閲覧中の記事の内容に対して関連記事にリンクさせ等、上手く使用することで閲覧者にとって有意義な情報を与えることができます。

今回はリンクの設定・記述方法についての備忘録を兼ねた内容です。

リンクを記述するには<a>タグを使う

リンクを設定するには、リンクにしたい部分を<a href=””></a>で挟んで記述します。

<a href="https://manabu.kigaru.link/">WEBサイトの作成やプログラミングに挑戦</a>

基本の形は<a href=”表示させたいページのURL”>アンカーテキスト</a>となります。このアンカーテキストはSEOにも関連してくる非常に重要な項目であり、必ず飛び先のページの内容が分かる言葉を記述します。

画像にリンクを設定する方法

画像にリンクを設定する場合は、前回の「画像の挿入について」で説明した<img>タグと<a>タグを組み合わせて記述します。

<a href="表示させたいページのURL"><img src="画像のパスまたはURL" alt="代替えテキスト"></a>

では次からは、<a>タグを使用する際のリンク先のページの表示方法やページ内の任意の場所にジャンプする設定について確認します。

同じウィンドウで開く

WEBサイトの作成やプログラミングに挑戦

上記のリンクをクリックすると同一のウィンドウで当サイトのトップページが表示されます。記述方法は上記でも説明したように<a>タグを使用します。

<a href="表示させたいページのURL">アンカーテキスト</a>

別のウィンドウで開く

リンク先のページを別のウィンドウで表示させたい場合は、「target=”_blank”」を使用します。「target=”_blank”」を設定することで、今見ているページはそのままでリンク先のページを別のウィンドウで表示させることができます。

<a href="表示させたいページのURL" target="_blank">アンカーテキスト</a>

「target=”_blank”」を使用する場合、セキュリティ上の脆弱性の問題で「rel=”noopenner”」を加えることが推奨されています。また、ブラウザによっては「rel=”noopenner”」に対応していない場合もあるため、「noreferrer」も一緒に記述します。

<a href="表示させたいページのURL" target="_blank" rel="noopenner noreferrer">アンカーテキスト</a>

noopennerとnoreferrerの間は半角スペースを空けて記述します。

同じページ内の特定の箇所に移動

HTMLでは移動元・移動先の要素に「id」を指定することで、ページ内の特定の場所に移動させることができます。例えば下記のリンクをクリックするとこのページの一番最初の見出し「リンクを記述するには<a>タグを使う」に移動します。

一番最初の見出しに移動

移動元のhref属性に「#」と任意のid名を記述します。なおid名はそのページ内で重複しないものにしなければいけません。移動元の記述方法は下記の通りです。

<a href="#one">リンクを記述するには<a>タグを使うに移動</a>

移動先(ジャンプさせる場所)には、要素に移動元と同じid名を指定します。移動元の記述方法は下記の通りです。

<h2 id="one">リンクを記述するには<a>タグを使う</h2>

上記のように記述することで移動元と移動先が繋がります。この特定の箇所への移動は同じページ内だけでなく別のページの特定の箇所に移動させることもできます。下記のリンクをクリックするとこのサイトの自己紹介ページの見出し「なぜ副業を行うのか」に移動します。

なぜ副業を行うのかへ移動
<a href="shoukai#two">リンクを記述するには<a>タグを使うに移動</a>

<a>タグに移動先のURL+id名を記述します。なお移動先のURLは絶対URLで記載しても問題ありません。

移動先の記述はページ内での移動の時と同じくid名を記述します。

<h2 id="jump">なぜ副業を行うのか</h2>

同じページ内での移動の時と同じく移動元と同じid名を記述します。こうすることでページが異なっても特定の箇所に移動させることができます。

内部リンクと外部リンクについて

リンクは大きく分けて内部リンク外部リンクに分かれます。内部リンクは自分が作成したページをリンク先に設定する場合、外部リンクは自分のサイトではなく別のサイトをリンク先に設定する場合を意味します。

内部リンクはURLを相対パスで省略して記述することができますが、外部リンクは外部サイトのURLを全て記述しなければいけません。相対パスが今ひとつわからない場合は、絶対URLで記述しても問題ありません。

自分のサイトから外部のサイトをリンクすることを発リンク、外部サイトから自分のサイトにリンクを設定することを被リンクと言います。

rel=”nofollow”とは

上記で説明した被リンクが多ければ検索結果で上位に表示される場合もありますが、意図的な被リンク(購入したリンクなど)はペナルティが与えれる可能性が非常に高くなっています。また、サイトで広告を掲載する場合は外部リンクを無効化することが望ましいとされています。
その場合に使用するのが「rel=”nofollow”」です。

<a href="表示させるページのURL" rel="nofollow">アンカーテキスト</a>

検索エンジン側がはっきりとした定義はありませんが、信頼性の無いサイトへのリンクや広告などのリンクには「rel=”nofollow”」を設定しておいた方が無難です。内部リンクを設定する場合には必要ありません。

リンクの装飾について

リンクの基本形は文字の下に下線がつきますが、CSSという言語を利用することで、この下線を消したり破線にしたり等、装飾することができるようになります。現在は順をおって記事を作成していますので、後にCSSを説明する時に記述いたします。

コメント

タイトルとURLをコピーしました