【イラスト付き】ハイパーリンクとは？ページ同士の繋がりを明示しよう

ブルーちゃん教えてー

ハイパーリンクってなんだっけー？

ハイパーリンクとは、参照先・引用元などの場所を示す手法のことだよ

一番よく見るハイパーリンクは「SEOならMsta！」のようなテキストリンクだね！

他にも、画像などのファイルへのリンクなど、ハイパーリンクの種類は様々だよ

今1番ハイパーリンクが使われているWeb上の記述方法を説明するね

Web上のハイパーリンクは、HTMLのaタグ（アンカータグ）で記述するんだよ

上記のように、<a>で初めて、</a>で閉じて、href属性にURLを指定するんだ

この例の「SEOならMsta！」の部分はリンクで表示される文字列だよ

これをアンカーテキストって言うんだ

あと、URLは絶対パスも相対パスも指定することができるよ

Web上のハイパーリンクには4つ種類があるよ

それぞれの特徴を解説するね

内部リンクは同じWebサイト内のページ同士を結び付けるハイパーリンクだよ

自分のページ内で関連があるページを参照させたいときによく使うよね

外部リンクは別のWebサイトへ遷移させるハイパーリンクだよ

引用元の紹介や相互リンクや参考になるサイトなどを参照させたいときに使うリンクだね

ユーザーは自分のサイト以外に飛ぶことになるから配置する際にはわかりやすく明示することも重要だよ

直リンクは画像ファイルのURLなどを直接埋め込むハイパーリンクだよ

意図せず相手のサーバーに負荷をかけてしまうことがあるから注意してね

基本的に直リンクはマナー違反な行為だとされているよ

ディープリンクはサイトの深い階層にあるページを外部から直接参照するハイパーリンクだよ

これも直リンクと呼ばれることもあるね

相手サイトの意図しない挙動になることがあるから、これもマナー違反とされているよ

ハイパーリンクはWebページ以外でも使うことがあるよ

例えばMicrosoftのExcelやWordだね

文書からWebサイトに飛べるようURLを貼ることもあるし、文書内の指定の位置に飛ばせるハイパーリンクもあるよ

遷移先の位置を指定できるから、いちいち参照先を探す必要がなくて便利だよね

ハイパーリンクをWeb上で使うためのaタグで使える属性を紹介するね

href属性は参照先へ遷移させたいときには必須の属性だよ

指定するURLは絶対パスでも相対パスでもいいし、メールアドレスなどURIを指定することもできるんだ

target属性はリンクを開くときの挙動を指定できるよ

「_blank」の場合はリンク先を別画面で開く、「_self」の場合はリンク元と同じフレームにリンクするなどブラウザの挙動を制御できるんだね

特に外部リンクを張る際は戻ってこれるように別画面で開かせることが多いよ

charset属性はリンク先の文字コードを指定することができるよ

UTF-8やShift_JISなど明示的に文字コードを指定してリンク先に遷移させたいときは指定しようね

html5では廃止されてるから注意が必要だよ

type属性はリンク先のファイルの種類を指定することができるよ

明示的に「text/html」など指定することで、参照先がHTMLファイルであることを認識させられるんだ

特に画像や動画の場合は「PNG」か「JPEG」か「MP4」かなどを指定しておいたほうが表示トラブルが防げるよね

rel属性は、リンク元とリンク先の関連性を示すよ

特にnofollowを指定すると、意図しないリンク先やあまり好意的でない内容のリンク先へ自分のサイトの評価を渡さなくてすむからSEO対策の面でも重要なんだ

サイトコンセプトと合わせて丁寧に設定しておきたい属性だね

最後にハイパーリンクについてまとめてみるよ

またいつでもどうぞー