rel属性・とは?初心者にも分かるリンクの基礎とSEOへの影響共起語・同意語・対義語も併せて解説!

  • このエントリーをはてなブックマークに追加
rel属性・とは?初心者にも分かるリンクの基礎とSEOへの影響共起語・同意語・対義語も併せて解説!
この記事を書いた人

高岡智則

年齢:33歳 性別:男性 職業:Webディレクター(兼ライティング・SNS運用担当) 居住地:東京都杉並区・永福町の1LDKマンション 出身地:神奈川県川崎市 身長:176cm 体系:細身〜普通(最近ちょっとお腹が気になる) 血液型:A型 誕生日:1992年11月20日 最終学歴:明治大学・情報コミュニケーション学部卒 通勤:京王井の頭線で渋谷まで(通勤20分) 家族構成:一人暮らし、実家には両親と2歳下の妹 恋愛事情:独身。彼女は2年いない(本人は「忙しいだけ」と言い張る)


rel属性・とは?

このセクションでは「rel属性・とは?」の意味と使い方をやさしく解説します。rel属性は、リンクを作るときに タグに付ける特別な情報です。この属性があることで、リンク先との関係性やSEO・セキュリティ・ユーザー体験に影響します。初心者の人にも分かるように具体的な例と使い方を紹介します。

1) rel属性の目的

主な目的は次の3つです。1. 関係性を伝える 2. セキュリティやプライバシーを守る 3. 検索エンジンの扱いを指示する。これらを組み合わせることで、リンクの意味を明確に伝えられます。

1-1) 関係性を伝える

リンク先がどんなものかを伝えるために rel の値を使います。たとえば <a href='https://example.com' rel='nofollow'>例のページ</a> のように、検索エンジンに対して「このリンクを参照してほしくない」ことを伝えることができます。これにより、コメント欄や信頼性が不確かなリンクの影響を抑えることができます。

1-2) セキュリティとプライバシー

特に target='_blank' で新しいタブやウィンドウを開く場合、 rel 属性を組み合わせると安全性が高まります。例えば <a href='https://example.com' target='_blank' rel='noopener noreferrer'>新しいページを開くリンク</a> というように設定します。noopener は新しいページが元のページを操作できないようにし、noreferrer は参照情報を送らないようにします。これによりユーザーのセキュリティが強化されます。

2) よく使われる rel の値

以下は初心者にも覚えやすい代表的な値です。適切な場面で使い分けることが大切です

nofollow検索エンジンに対してリンクを参照してもらわないよう指示します。コメント欄や信頼性の低いリンクに使われることが多いです。
noopener新しいタブで開くときに元のページが新しいページを操作できないようにします。セキュリティ対策として推奨されます。
noreferrerリンクをクリックしても参照元の URL 情報を送らないようにします。プライバシー保護の目的で使われます。
ugcユーザーが投稿したコンテンツからのリンクであることを示します。信頼性が分からないときに使われます。
sponsored広告や有料のリンクであることを示します。広告表示の際に使用されます。

これらの値は組み合わせて使うことが多いです。たとえば <a href='https://example.com' rel='noopener noreferrer nofollow'>解説ページ</a> のように、複数の機能を同時に指定します。

3) 実際の使い方のポイント

ポイントは3つです。1) 用途に応じて適切な値を選ぶ 2) セキュリティとプライバシーを意識する 3) 自分のサイトの方針に合わせて使い分ける。

3-1) 内部リンクと外部リンクの扱い

内部リンクには nofollow を使うケースは少なく、内部リンク同士は通常のリンクとして扱われます。外部リンクや信頼性の低いリンクには nofollowsponsored などを検討します。

3-2) canonical 指定との混同を避ける

rel 属性は head の link 要素で使う canonical とは別物です。canonical を指定する場合は <link rel='canonical' href='https://example.com/page' /> のように head に記述します。リンクタグと head タグの rel は混同しないように注意しましょう。

4) 実務のコツとよくある誤解

実務では、SEOの効果を過剰に期待しすぎないことが大切です。rel 属性は検索エンジンの挙動の一部を指示するツールであり、サイトの信頼性やコンテンツの質が最も重要です。リンクの付け方が適切かどうかを基準に判断しましょう。なお、自分のサイトの方針と読者の体験を第一に考えることが、結果的にSEOにも良い影響を与えます。

5) まとめ

rel属性はリンクの意味を伝える小さな道具ですが、使い方次第でセキュリティやSEOへ大きな影響を与えます。関係性を伝える値セキュリティやプライバシーを守る値信頼性を管理する値を適切に組み合わせて、ユーザーにとって安全で分かりやすいリンクを作りましょう。


rel属性の同意語

リンク関係属性
HTMLのaタグやlinkタグなどで使われ、現在の文書とリンク先の関係性を示す属性。rel属性の値によって、検索エンジンの取り扱い方やブラウザの挙動を指示できる。
関係属性
rel属性の総称的な呼び方。現在の文書とリンク先の“関係”を表す属性という意味で用いられることが多い。
関係性属性
relが示す“関係性”を表す言い換え表現。リンクの役割を説明する文脈で使われることがある。
リレーション属性
rel属性の直訳寄りの表現。技術文書や教材で同義語として使われることがある。
リンク関係性属性
リンク先との関係性(例: nofollow、canonical など)を示す属性としての役割を指す別称。

rel属性の対義語・反対語

無関係
現在のページとリンク先・リソースとの関係性が全くない状態。rel属性で特定の関係を示さない場合の対極的概念。
関係なし
特定の関係性を明示していない状態。rel属性で関係性を示すことの反対となる意味合い。
関連性なし
リンク先が現在のページと内容的・文脈的に関連性を持たない状態。relで結びつきを示さないことの対義語的イメージ。
断絶
リンクや関係が途切れている、つながりがなくなっている状態。relの関係付けがない状況の対義語
独立
他のページと独立した位置づけ。関係性を持たないことの別表現。
相互関係なし
双方の間に関係性が存在しない状態。相互的な関係を否定する意味合い。
内部リンク
同一サイト内のページ同士をつなぐリンク。外部リンクと対になる概念としての反対イメージ。
外部リンク
サイトへのリンク。内部リンクの対義的イメージとして使われることがある概念。
フォロー
リンクエクイティ(検索エンジンの評価)を伝播させる状態。nofollow の対義語として用いられることが多い。
ノーフォロー
検索エンジンにリンク評価を伝えない状態。rel="nofollow" の具体的な表現。
リファラを送る
Referer ヘッダを送信する状態。noreferrer の対義語として用いられる概念。
リファラを送らない
Referer ヘッダを送信しない状態。noreferrer の対義語としての対概念。
正規URL指定
canonical の対義語として、正規URLを明示的に指定する状態。
非正規URL
canonical が指定されず、非正規URLとして扱われる状態。

rel属性の共起語

canonical
検索エンジンにこのURLが正規のURLであると伝えるための rel='canonical' の設定。重複コンテンツを避ける目的で使われます。
alternate
別の版のページを示すリンク。言語版や地域版、別媒体のページを案内する際に使われます。
hreflang
言語と地域を指定する属性。rel='alternate'と組み合わせて、検索エンジンに適切な言語版を表示させるために使われます。
prev
前のページへのリンク。連続したページ分割( pagination )のナビゲーションに使われます。
next
次のページへのリンク。連続したページ分割( pagination )のナビゲーションに使われます。
sitemap
サイトマップのURLを示します。検索エンジンにサイト構造を伝え、インデックス作成を支援します。
nofollow
このリンクを検索エンジンが評価(リンクジュース)に反映させないよう指示します。広告やUGC(ユーザー生成コンテンツ)向けに使われやすいです。
noopener
新しいタブで開くリンクに対して、元のページからの参照を遮断するセキュリティ対策です。
noreferrer
リンク先にリファラ情報を送らないようにします。プライバシー保護の目的で使われます。
sponsored
スポンサー付きのリンクであることを示す新しい rel 値。商用リンクに使われます。
ugc
ユーザー生成コンテンツのリンクであることを示す新しい rel 値。コメント欄などでのリンクに使われます。
external
外部リンクであることを示します。内部リンクと区別しやすくします。
internal
公式な rel 値としては一般的ではありませんが、内部リンクを区別する目的で使われることがあります。
author
著者ページへのリンクを示します。著者情報を伝える目的で使われます。
publisher
発行元のページへのリンクを示します。古い仕様で使われることがありますが、現在は使われる機会が減っています。
license
ライセンス情報が記されたページへのリンクを示します。
tag
タグアーカイブページへのリンクを示します。タグ別の一覧ページへ誘導する際に使われます。
pingback
Pingback のURLを示します。ブログ間の通知機能として使われます。
shortlink
短縮URL版のリンクを示します。主にWordPressなどで使われます。
icon
ファビコン(サイトのアイコン)へのリンクを示します。
apple-touch-icon
iOS端末のホーム画面アイコンへのリンクを示します。
manifest
Webアプリのマニフェストファイルへのリンクを示します。
preconnect
外部サーバーとの初期接続を前もって確立して、読み込みを速くするための指示です。
dns-prefetch
DNS解決を先に済ませ、ページの読み込みを速くするための指示です。
preload
重要なリソースを先に読み込むよう指示します。as属性と組み合わせて使います。
prefetch
将来必要になる可能性のあるリソースを事前取得しておく指示です。
prerender
ページを事前にレンダリングして表示を速くする試みです(ブラウザの対応状況に依存します)。
contents
ページの目次や目次的なナビゲーションを示すリンクを指します。
index
サイト内のインデックスや目次的な位置づけを示します。
start
シリーズの開始点や最初のページを示すリンクです。
help
ヘルプページやサポートページへのリンクを示します。
chapter
長文の中の章へのリンクを示します。
section
文書内の特定セクションへのリンクを示します。
attachment
添付ファイルへのリンクを示します。
bookmark
ブックマーク用のリンクを示します。

rel属性の関連用語

rel属性
HTMLのリンク関係を表す属性。aタグやlinkタグなどで使い、現在の文書とリンク先の関係性を指定します。複数のrel値をスペース区切りで並べることができます。
aタグ
アンカー要素。リンク先を指定するための要素で、rel属性を使って関係性を伝えることができます。
linkタグ
主にhead内で使う要素。relと組み合わせて、外部リソースの参照先や指示を示します(例: canonical、stylesheet、icon、alternate など)。
href
リンク先のURLを表す属性。relと組み合わせて、どのリソースとどんな関係かを示します。
canonical
現在のページの正規のURLを検索エンジンに伝えるための rel 値。重複ページを整理する目的で使います。
alternate
別の版や言語版、フィードなどの代替ページを指し示す rel 値。hreflangと組み合わせることが多いです。
hreflang
alternateとともに使われ、ページの言語・地域ごとの版を識別するための属性。言語/地域コードを指定します。
author
著者ページへのリンクを示す rel 値。
publisher
サイトの公開者ページへのリンクを示します。
license
コンテンツのライセンス情報ページへのリンクを示します。
next
次のページへ続くリンクを示す。ページ分割のナビゲーションに使います。
prev
前のページへ戻るリンクを示します。
stylesheet
外部CSSファイルへのリンクを示す rel 値。
icon
サイトのアイコン(ファビコン)ファイルへのリンクを示します。
apple-touch-icon
iPhoneやiPadなどのホーム画面アイコンとして使われる画像へのリンクを示します。
pingback
ブログ間の通知先を示すリンク。WordPressなどで使われます。
shortlink
短縮URLへのリンクを示します。主にブログ記事の短縮リンクとして用いられます。
dns-prefetch
DNS解決を先に行う指示。別ドメインのDNSを早めに解決します。
preconnect
指定したドメインへの接続を事前に確立して通信を速くする指示。
prerender
将来閲覧する予定のページを事前にレンダリングする指示。注意が必要な高度な最適化。
preload
重要度の高いリソースを読み込みを前倒しする指示。遅延を減らすのに使います。
prefetch
将来表示する可能性が高いリソースを事前に取得させる指示。将来の遷移に備えます。
nofollow
検索エンジンに対してリンクを辿かないよう指示します(古いSEOの実務で使われることがあります)。
sponsored
このリンクが広告・スポンサーによるものであることを示す rel 値。新しいガイドラインで推奨されます。
ugc
ユーザー生成コンテンツによるリンクであることを示す rel 値。コメントやフォーラムのリンクなどに用いられます。
noopener
target="_blank"と組み合わせたときの安全対策。新しい窓口が元ページを参照できないようにします。
noreferrer
リンク先にリファラ情報を送らないように指示します。
external
外部リンクであることを示す補足的な値として使われることがあります。
manifest
Webアプリのマニフェストファイルへのリンクを示します。オフライン機能やアプリアイコン定義などに使います。

rel属性のおすすめ参考サイト


インターネット・コンピュータの人気記事

awstatsとは?初心者でもわかる使い方と基本解説共起語・同意語・対義語も併せて解説!
14197viws
bing・とは?初心者のための基本ガイド:検索エンジンの仕組みと使い方共起語・同意語・対義語も併せて解説!
2072viws
着信転送とは?初心者向けガイドで分かる使い方と設定のコツ共起語・同意語・対義語も併せて解説!
1032viws
リマインドメールとは?初心者にもわかる基本ガイドと使い方のコツ共起語・同意語・対義語も併せて解説!
722viws
充電アダプターとは何かを徹底解説|初心者でも分かる基本と選び方のコツ共起語・同意語・対義語も併せて解説!
663viws
com端子・とは?初心者にも分かる基礎ガイド|シリアルポートの使い方と歴史を解説共起語・同意語・対義語も併せて解説!
647viws
pinロックとは?初心者が知っておくべき基本と使い方ガイド共起語・同意語・対義語も併せて解説!
563viws
16進数カラーコード・とは?初心者でもつまずかない基礎と使い方ガイド共起語・同意語・対義語も併せて解説!
498viws
asp・とは?初心者向けに徹底解説する基本と使い方ガイド共起語・同意語・対義語も併せて解説!
490viws
7zファイル・とは?初心者でもわかる使い方と特徴を解説共起語・同意語・対義語も併せて解説!
473viws
ローカルポート・とは?初心者にも分かる基本と使い方ガイド共起語・同意語・対義語も併せて解説!
458viws
差し込み印刷・とは?初心者でもすぐわかる使い方と仕組みガイド共起語・同意語・対義語も併せて解説!
434viws
全角文字とは?初心者向け解説|全角と半角の違いをやさしく学ぶ共起語・同意語・対義語も併せて解説!
413viws
none とは?初心者にもやさしく解説する意味と使い方ガイド共起語・同意語・対義語も併せて解説!
370viws
ワンタイムコード・とは?初心者でも分かる基本と使い方ガイド共起語・同意語・対義語も併せて解説!
363viws
select句・とは?初心者でも分かるSQLの基本と使い方共起語・同意語・対義語も併せて解説!
361viws
csvダウンロードとは?初心者が今すぐ使える基本ガイド共起語・同意語・対義語も併せて解説!
343viws
ダイレクトチャットとは?初心者向けガイドで使い方と注意点を徹底解説共起語・同意語・対義語も併せて解説!
325viws
解像度スケールとは?初心者でも分かる解像度スケールの基礎と使い方共起語・同意語・対義語も併せて解説!
278viws
sha256とは?初心者が知るべき暗号ハッシュの基礎と使い道共起語・同意語・対義語も併せて解説!
275viws

新着記事

インターネット・コンピュータの関連記事