

高岡智則
年齢: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 を使うケースは少なく、内部リンク同士は通常のリンクとして扱われます。外部リンクや信頼性の低いリンクには nofollow や sponsored などを検討します。
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属性のおすすめ参考サイト
- rel属性とは - IT用語辞典 e-Words
- rel="noopenerの役割とは?rel属性やnoreferrerとの違いも解説
- HTMLのlinkタグとは?基本的な書き方とrel属性まとめ - サルワカ
- rel属性とは - IT用語辞典 e-Words
- HTMLのlink要素とは?rel属性を中心に徹底解説 - DMM WEBCAMP



















