SEO対策にもなる！リンクの付け方

さて、今日はリンクタグの学習です。

私が仕事としてやっているアフィリエイトでも、リンクはとても重要！
見てほしいページを載せたり、出典を載せる時にも便利です。

リンク

ファイルへのリンク

・<a href=”ファイルのパス”>○○○</a>

ファイルへのリンクを設定します。
a要素は単独では使わず、href属性やname属性とセットで記述します。

href属性にはリンク先のファイルのパスを指定します。
同一のWEBサイト内のファイルは、一般的に相対パスで指定します。
（※相対パスについてはこちら）
若しくは、URLを指定することが多いです。

○○○の部分にはリンクにしたいテキストやイメージファイルを記述します。

例）「プロフィール」の文字列にプロフィールページをリンクする

・HTMLの記述

・<a href=”https://xn--u9jxf3b7cxfa5mz373aq8hwia4lp649a.com/profile/”>プロフィール</a>

・ブラウザの表示

・プロフィール

メールアドレスへのリンク

・<a href=”mailto:メールアドレス”>○○○</a>

メールアドレスへのリンクを設定します。
「mailto:」の後に、あて先となるメールアドレスを指定します。
メールアドレスのリンクはクリックすることでメールソフトが起動し、
指定したメールアドレス宛の新規メール作成画面が表示されます。

○○○の部分にはリンクにしたいテキストやイメージファイルを記述します。

例）info@dearly-design.com 宛のメールアドレスリンクを作成する

・HTMLの記述

<a href=”mailto:info@dearly-design.com”>お問い合わせはこちら</a>

・ブラウザの表示

お問い合わせはこちら

マーカー

・<a name=”マーカー名”></a>

ページ上にマーカー（目印となる名前）を設定します。

・<a href=”#マーカー名”></a>

同一ページにあるマーカーへのリンクを設定します。

例）

・HTMLの記述

・<a href=”#design”>WEBデザイナーについて</a>
・<a href=”#html”>HTML</a>
・<a href=”#css”>CSS</a>

<a name=”design”>WEBデザイナー</a>
～～～～…
<a name=”html”>HTMLの記述</a>
～～～～…
<a name=”css”>CSSの記述</a>
～～～～…

・ブラウザの表示

下の記事本文タイトルにname属性で名前を付けると、

その名前を付けた部分に飛ぶリンクが作成できるということです。

「△上に戻る」というリンクがページの最下部にあり、
クリックするとページの一番上に戻るというものをよく見かけますよね。
あれも、このマーカーを利用しています。

ページ上部に例えば<a name=”top”></a>を設置し、
ページ最下部に<a href=”#design”>△上に戻る</a>を記述することで、
ページ上部に戻るリンクを作成できます。

異なるページへのマーカーリンク

・<a href=”ファイルのパス#マーカー名”></a>

異なるページにあるマーカーへのリンクを設定します。
リンク先には<a name=”マーカー名”></a>でマーカーを設定する必要があります。

例）「第一印象ががらりと変わる、イメージファイルの使い方！」のページにある
「パスの指定方法」にマーカーを付けこのページからリンクする。

・HTMLの記述

【第一印象ががらりと変わる、イメージファイルの使い方！ページ】

<h3>パスの指定方法<a name=”soutai”></a></h3>

※”パスの指定方法”をa要素で囲んでしまうとリンク表示になってしまうため、
テキストなし（表示なし）でname属性のa要素を設定しています。

【このページ】

<a href=”https://xn--u9jxf3b7cxfa5mz373aq8hwia4lp649a.com/?p=106#jump”>ファイルへのリンクへジャンプ</a>

・ブラウザの表示

ファイルへのリンクへジャンプ

リンクはとても便利です。
URLをホームページ上に記載しても、そこにアクセスしてくれる人はほぼ皆無だと思います。
ポチっとクリック、またはタップするだけでいいので、
アクセスしやすい環境を作るためにもとても重要です。

また、ページが長くなってしまったばあにはマークリンクが非常に有効的です。
ほしい情報にすぐ飛べることで、見ている人の満足度も上がります！

うまく活用して、見やすい、読みやすいページを作りたいですね！

【個人的なお話】

先日、長女の小学校入学祝いに「人体解剖図」をプレゼントしました。

通っている婦人科の待合室に同じものが置いてあって、
驚くほど興味を持ったんですよね。
私も解剖図大好きで、私の子だなーと嬉しくなりました(笑)

娘は「看護師さんになる！」と次は薬の本を要求しています。
娘の興味をどんどん広げていってあげたいけど、薬の本はまだはやいかもなー(笑)