SEO
更新日: 2023/12/20
ハイパーリンクとは?ページ同士の繋がりを明示しよう
ブルーちゃん教えてー
イエローちゃん今日はなぁに?
ハイパーリンクってなんだっけー?
あーハイパーリンクがわからなくなったのかぁ
じゃぁ今日はハイパーリンクについて説明するね
ハイパーリンクとは
ハイパーリンクとは、参照先・引用元などの場所を示す手法のことだよ
一番よく見るハイパーリンクは「SEOならMsta!」のようなテキストリンクだね!
他にも、画像などのファイルへのリンクなど、ハイパーリンクの種類は様々だよ
Webページのハイパーリンクはどうやって記述するの?
今1番ハイパーリンクが使われているWeb上の記述方法を説明するね
Web上のハイパーリンクは、HTMLのaタグ(アンカータグ)で記述するんだよ
<a href="https://msta.co.jp/">SEOならMsta!</a>
上記のように、<a>で初めて、</a>で閉じて、href属性にURLを指定するんだ
この例の「SEOならMsta!」の部分はリンクで表示される文字列だよ
これをアンカーテキストって言うんだ
あと、URLは絶対パスも相対パスも指定することができるよ
ハイパーリンクの種類はなにがあるの?
Web上のハイパーリンクには4つ種類があるよ
それぞれの特徴を解説するね
ハイパーリンクの種類1.内部リンク
内部リンクは同じWebサイト内のページ同士を結び付けるハイパーリンクだよ
自分のページ内で関連があるページを参照させたいときによく使うよね
ハイパーリンクの種類2.外部リンク
外部リンクは別のWebサイトへ遷移させるハイパーリンクだよ
引用元の紹介や相互リンクや参考になるサイトなどを参照させたいときに使うリンクだね
ユーザーは自分のサイト以外に飛ぶことになるから配置する際にはわかりやすく明示することも重要だよ
ハイパーリンクの種類3.直リンク
直リンクは画像ファイルのURLなどを直接埋め込むハイパーリンクだよ
意図せず相手のサーバーに負荷をかけてしまうことがあるから注意してね
基本的に直リンクはマナー違反な行為だとされているよ
ハイパーリンクの種類4.ディープリンク
ディープリンクはサイトの深い階層にあるページを外部から直接参照するハイパーリンクだよ
これも直リンクと呼ばれることもあるね
相手サイトの意図しない挙動になることがあるから、これもマナー違反とされているよ
Webページ以外のハイパーリンクはどんなものがあるの?
ハイパーリンクはWebページ以外でも使うことがあるよ
例えばMicrosoftのExcelやWordだね
文書からWebサイトに飛べるようURLを貼ることもあるし、文書内の指定の位置に飛ばせるハイパーリンクもあるよ
遷移先の位置を指定できるから、いちいち参照先を探す必要がなくて便利だよね
aタグで使える属性を5つご紹介!
ハイパーリンクをWeb上で使うためのaタグで使える属性を紹介するね
aタグで使える属性1.href
href属性は参照先へ遷移させたいときには必須の属性だよ
指定するURLは絶対パスでも相対パスでもいいし、メールアドレスなどURIを指定することもできるんだ
aタグで使える属性2.target
target属性はリンクを開くときの挙動を指定できるよ
「_blank」の場合はリンク先を別画面で開く、「_self」の場合はリンク元と同じフレームにリンクするなどブラウザの挙動を制御できるんだね
特に外部リンクを張る際は戻ってこれるように別画面で開かせることが多いよ
aタグで使える属性3.charset
charset属性はリンク先の文字コードを指定することができるよ
UTF-8やShift_JISなど明示的に文字コードを指定してリンク先に遷移させたいときは指定しようね
html5では廃止されてるから注意が必要だよ
aタグで使える属性4.type
type属性はリンク先のファイルの種類を指定することができるよ
明示的に「text/html」など指定することで、参照先がHTMLファイルであることを認識させられるんだ
特に画像や動画の場合は「PNG」か「JPEG」か「MP4」かなどを指定しておいたほうが表示トラブルが防げるよね
aタグで使える属性5.rel
rel属性は、リンク元とリンク先の関連性を示すよ
特にnofollowを指定すると、意図しないリンク先やあまり好意的でない内容のリンク先へ自分のサイトの評価を渡さなくてすむからSEO対策の面でも重要なんだ
サイトコンセプトと合わせて丁寧に設定しておきたい属性だね
最後にハイパーリンクについてまとめてみるよ
まとめ
◆ハイパーリンクとは文書の中に埋め込まれた他のファイルや参照先の場所を示す情報のこと
◆Web上のハイパーリンクはHTMLのaタグで記述する
◆WebサイトのURL以外も指定できる
◆aタグには様々な属性があり、遷移時の挙動を制御できる
ハイパーリンクについてイメージが深まったよー!
ブルーちゃんありがとう
またいつでもどうぞー
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
ゲシュタルトとは?心理学の歴史や基本法則について徹底解説!
SEO
マーケティングファネルとは?4つの段階についてわかりやすく解説!
SEO
サジェスト対策はどうやる?詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は?目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは?良い業者の選び方も解説
SEO
関連キーワードとは?SEO初心者でもわかる基礎知識と活用法!
SEO
Looker Studioとは?機能や使い方をわかりやすく解説!
SEO
MEOとSEOの違いとは?どちらに注力するべきかの判断基準も解説
SEO
KPIとは?ビジネス成功のための指標と活用法を徹底解説!
SEO
定量と定性の違いとは?データ分析での効果的な使い方を解説!
SEO
校了とは?校正との違いや注意点をわかりやすく解説!
SEO
コンテンツとは?意味や具体例について初心者でもわかりやすく解説!
SEO
Googleトレンドとは?できることや使い方について詳しく解説!
SEO
コンテンツSEOとは?メリット・やり方などわかりやすく解説!
SEO
SSL化でSEO強化!Google推奨の理由と導入方法を解説!
SEO
サポートページとは?特徴と構成要素、未来展望を徹底解説!
SEO
キャッシュバスターってどんなツール?おすすめプラグインも紹介!
SEO
リダイレクトループとは?原因、特定、解決方法をそれぞれ徹底解説!
SEO
ハブページとは?3つの目的と効果的な作成・運用のコツを徹底解説!
SEO
最新の記事一覧
ゲシュタルトとは?心理学の歴史や基本法則について徹底解説!
SEO
マーケティングファネルとは?4つの段階についてわかりやすく解説!
SEO
サジェスト対策はどうやる?詳しい方法やサジェストの仕組みも解説
SEO
SEOとキーワード数の関係は?目安の数やキーワードの適切な入れ方も
SEO
SEO対策を外注するメリット・デメリットは?良い業者の選び方も解説
SEO
関連キーワードとは?SEO初心者でもわかる基礎知識と活用法!
SEO
Looker Studioとは?機能や使い方をわかりやすく解説!
SEO
MEOとSEOの違いとは?どちらに注力するべきかの判断基準も解説
SEO
KPIとは?ビジネス成功のための指標と活用法を徹底解説!
SEO
定量と定性の違いとは?データ分析での効果的な使い方を解説!
SEO
校了とは?校正との違いや注意点をわかりやすく解説!
SEO
コンテンツとは?意味や具体例について初心者でもわかりやすく解説!
SEO
Googleトレンドとは?できることや使い方について詳しく解説!
SEO
コンテンツSEOとは?メリット・やり方などわかりやすく解説!
SEO
SSL化でSEO強化!Google推奨の理由と導入方法を解説!
SEO
サポートページとは?特徴と構成要素、未来展望を徹底解説!
SEO
キャッシュバスターってどんなツール?おすすめプラグインも紹介!
SEO
リダイレクトループとは?原因、特定、解決方法をそれぞれ徹底解説!
SEO
ハブページとは?3つの目的と効果的な作成・運用のコツを徹底解説!
SEO