![ハイパーリンクとは?ページ同士の繋がりを明示しようのアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5ac42095de404ab78032beb86fb122db/Group%20394.png?w=1200&fm=webp)
SEO
更新日: 2023/12/20
ハイパーリンクとは?ページ同士の繋がりを明示しよう
![character_balloon](/media/character/yellow_normal_left.png)
ブルーちゃん教えてー
イエローちゃん今日はなぁに?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/yellow_normal_left.png)
ハイパーリンクってなんだっけー?
あーハイパーリンクがわからなくなったのかぁ
![character_balloon](/media/character/blue_normal_right.png)
じゃぁ今日はハイパーリンクについて説明するね
![character_balloon](/media/character/blue_normal_right.png)
ハイパーリンクとは
![character_balloon](/media/character/blue_normal_left.png)
ハイパーリンクとは、参照先・引用元などの場所を示す手法のことだよ
![character_balloon](/media/character/blue_normal_left.png)
一番よく見るハイパーリンクは「SEOならMsta!」のようなテキストリンクだね!
![character_balloon](/media/character/blue_normal_left.png)
他にも、画像などのファイルへのリンクなど、ハイパーリンクの種類は様々だよ
Webページのハイパーリンクはどうやって記述するの?
![character_balloon](/media/character/blue_normal_left.png)
今1番ハイパーリンクが使われているWeb上の記述方法を説明するね
![character_balloon](/media/character/blue_normal_left.png)
Web上のハイパーリンクは、HTMLのaタグ(アンカータグ)で記述するんだよ
<a href="https://msta.co.jp/">SEOならMsta!</a>
![character_balloon](/media/character/blue_normal_left.png)
上記のように、<a>で初めて、</a>で閉じて、href属性にURLを指定するんだ
![character_balloon](/media/character/blue_normal_left.png)
この例の「SEOならMsta!」の部分はリンクで表示される文字列だよ
![character_balloon](/media/character/blue_normal_left.png)
これをアンカーテキストって言うんだ
![character_balloon](/media/character/blue_normal_left.png)
あと、URLは絶対パスも相対パスも指定することができるよ
ハイパーリンクの種類はなにがあるの?
![character_balloon](/media/character/blue_normal_left.png)
Web上のハイパーリンクには4つ種類があるよ
![character_balloon](/media/character/blue_normal_left.png)
それぞれの特徴を解説するね
ハイパーリンクの種類1.内部リンク
![character_balloon](/media/character/blue_normal_left.png)
内部リンクは同じWebサイト内のページ同士を結び付けるハイパーリンクだよ
![character_balloon](/media/character/blue_normal_left.png)
自分のページ内で関連があるページを参照させたいときによく使うよね
ハイパーリンクの種類2.外部リンク
![character_balloon](/media/character/blue_normal_left.png)
外部リンクは別のWebサイトへ遷移させるハイパーリンクだよ
![character_balloon](/media/character/blue_normal_left.png)
引用元の紹介や相互リンクや参考になるサイトなどを参照させたいときに使うリンクだね
![character_balloon](/media/character/blue_normal_left.png)
ユーザーは自分のサイト以外に飛ぶことになるから配置する際にはわかりやすく明示することも重要だよ
ハイパーリンクの種類3.直リンク
![character_balloon](/media/character/blue_normal_left.png)
直リンクは画像ファイルのURLなどを直接埋め込むハイパーリンクだよ
![character_balloon](/media/character/blue_normal_left.png)
意図せず相手のサーバーに負荷をかけてしまうことがあるから注意してね
![character_balloon](/media/character/blue_normal_left.png)
基本的に直リンクはマナー違反な行為だとされているよ
ハイパーリンクの種類4.ディープリンク
![character_balloon](/media/character/blue_normal_left.png)
ディープリンクはサイトの深い階層にあるページを外部から直接参照するハイパーリンクだよ
![character_balloon](/media/character/blue_normal_left.png)
これも直リンクと呼ばれることもあるね
![character_balloon](/media/character/blue_normal_left.png)
相手サイトの意図しない挙動になることがあるから、これもマナー違反とされているよ
Webページ以外のハイパーリンクはどんなものがあるの?
![character_balloon](/media/character/blue_normal_left.png)
ハイパーリンクはWebページ以外でも使うことがあるよ
![character_balloon](/media/character/blue_normal_left.png)
例えばMicrosoftのExcelやWordだね
![character_balloon](/media/character/blue_normal_left.png)
文書からWebサイトに飛べるようURLを貼ることもあるし、文書内の指定の位置に飛ばせるハイパーリンクもあるよ
![character_balloon](/media/character/blue_normal_left.png)
遷移先の位置を指定できるから、いちいち参照先を探す必要がなくて便利だよね
aタグで使える属性を5つご紹介!
![character_balloon](/media/character/blue_normal_left.png)
ハイパーリンクをWeb上で使うためのaタグで使える属性を紹介するね
aタグで使える属性1.href
![character_balloon](/media/character/blue_normal_left.png)
href属性は参照先へ遷移させたいときには必須の属性だよ
![character_balloon](/media/character/blue_normal_left.png)
指定するURLは絶対パスでも相対パスでもいいし、メールアドレスなどURIを指定することもできるんだ
aタグで使える属性2.target
![character_balloon](/media/character/blue_normal_left.png)
target属性はリンクを開くときの挙動を指定できるよ
![character_balloon](/media/character/blue_normal_left.png)
「_blank」の場合はリンク先を別画面で開く、「_self」の場合はリンク元と同じフレームにリンクするなどブラウザの挙動を制御できるんだね
![character_balloon](/media/character/blue_normal_left.png)
特に外部リンクを張る際は戻ってこれるように別画面で開かせることが多いよ
aタグで使える属性3.charset
![character_balloon](/media/character/blue_normal_left.png)
charset属性はリンク先の文字コードを指定することができるよ
![character_balloon](/media/character/blue_normal_left.png)
UTF-8やShift_JISなど明示的に文字コードを指定してリンク先に遷移させたいときは指定しようね
![character_balloon](/media/character/blue_normal_left.png)
html5では廃止されてるから注意が必要だよ
aタグで使える属性4.type
![character_balloon](/media/character/blue_normal_left.png)
type属性はリンク先のファイルの種類を指定することができるよ
![character_balloon](/media/character/blue_normal_left.png)
明示的に「text/html」など指定することで、参照先がHTMLファイルであることを認識させられるんだ
![character_balloon](/media/character/blue_normal_left.png)
特に画像や動画の場合は「PNG」か「JPEG」か「MP4」かなどを指定しておいたほうが表示トラブルが防げるよね
aタグで使える属性5.rel
![character_balloon](/media/character/blue_normal_left.png)
rel属性は、リンク元とリンク先の関連性を示すよ
![character_balloon](/media/character/blue_normal_left.png)
特にnofollowを指定すると、意図しないリンク先やあまり好意的でない内容のリンク先へ自分のサイトの評価を渡さなくてすむからSEO対策の面でも重要なんだ
![character_balloon](/media/character/blue_normal_left.png)
サイトコンセプトと合わせて丁寧に設定しておきたい属性だね
![character_balloon](/media/character/blue_normal_left.png)
最後にハイパーリンクについてまとめてみるよ
まとめ
◆ハイパーリンクとは文書の中に埋め込まれた他のファイルや参照先の場所を示す情報のこと
◆Web上のハイパーリンクはHTMLのaタグで記述する
◆WebサイトのURL以外も指定できる
◆aタグには様々な属性があり、遷移時の挙動を制御できる
ハイパーリンクについてイメージが深まったよー!
![character_balloon](/media/character/yellow_normal_right.png)
ブルーちゃんありがとう
![character_balloon](/media/character/yellow_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
またいつでもどうぞー
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。