HTML の rel 属性の分析

HTML の rel 属性の分析

クラスメートがWeiboにこの記事を再投稿して収集していることに気づいたので、この何気なく翻訳された記事をもう一度見直しました。その後、w3cschools.com.cnにすでに対応する中国語翻訳があることがわかったので、ここでこの記事を改善し続け、より価値のあるものにしたいと思います。この文書を翻訳するアイデアは、最初に記事 http://vanessa.b3log.org/research-a-rel-value から生まれました。rel 属性には珍しい意味値がたくさんあることがわかりました。元の記事では、これらの属性値の使用シナリオをリストすることに重点を置いていました。rel 属性をこのように理解することは非常に必要だと感じました。

rel 属性を持つリンク:

<a rel="external" href="http://www.xxoo.com/">ooxx</a>

ブラウザのサポート

rel 属性はすべての主要なブラウザでサポートされています。

注:瀏覽器渲染時會忽略此屬性,然而搜索引擎可以從它獲得更多的信息(a標簽僅在href屬性存在時有效)。

定義と使用

rel 属性は、現在のドキュメントとリンクされたドキュメント間の関係を指定します。

文法

<a rel="value">

HTML 4.01 と HTML 5 の違い

削除された値: 付録、章、目次、著作権、用語集、索引、セクション、開始、サブセクション。

新しい値: archives、author、bookmark、external、first、索引、最後、ライセンス、nofollow、noreferrer、検索、サイドバー、タグ、上。

プロパティ値
価値説明するシナリオ | 例HTML4.01 HTML5
付録文書の付録ページへのリンク
代替代替ソースへのリンク(例:印刷ページ、翻訳、ミラー)ウェブサイトのAtomとフィードをheadタグで設定する
ショートカットアイコンショートカットアイコンタイトルバー、アドレスバー、お気に入りバーに小さいアイコンを指定します
アーカイブドキュメントセットまたは履歴データへのリンク<link rel='archives' href='http://www.ooxx.com/2012/07' />
著者文書の著者へのリンクヘッドタグで文書の著者を宣言する
正統な権威、モデル

現在のウェブサイト上の重複または類似のウェブページのうち、どのページがウェブマスターがクロールして含めたいページであるかを検索エンジンに知らせます。

<link rel="canonical" href="http://xxoo.com/" />
  • canonical 属性値は通常、 rel 属性に表示されます。
  • 参考URL: http://www.xxoo.com/xhtml/rel_canonical/
  • 機能的な観点から見ると、canonical は 301 永続リダイレクトの補助機能として理解できます。
  • Canonical は相対リンクでも絶対リンクでも使用できますが、絶対リンクが推奨されます。
  • Google は正規ページを次のように定義しています: 正規ページとは、非常に類似したコンテンツを持つ一連のページの中で優先されるバージョンです。
  • 標準: 「モデル」の中国語の意味
スタイルシート文書の外部スタイルシート<link rel="stylesheet" href="base.css">
サイトのホームページへのリンク<link href="http://www.ooxx.com" rel="home" />
初めコレクションの最初のドキュメントへのリンク<link rel="first" href="index.html">
始める現在のドキュメントの最初のページへのリンク<link rel="start" href="about:blank">
コレクション内の次のドキュメントへのリンク<link rel="next" href="about:blank">
前へコレクション内の前の文書へのリンク<link rel="chapter" href="about:blank">
最後コレクション内の最後のドキュメントへのリンク<link rel="last" href="index.html">
ドキュメントへのリンクを提供します。このドキュメントは、現在のドキュメントのコンテキストを提供します。
検索ドキュメント検索ツールへのリンク
サイドバーブラウザのサイドバーに表示されるドキュメントへのリンク
コンテンツ現在のドキュメントの目次へのリンク通常、メインドキュメントコンテンツのサイドバーに配置され、現在のページのトピック間を移動するのに便利です。
索引現在のドキュメントのインデックスへのリンク
用語集現在のドキュメント用語集へのリンク
著作権現在のドキュメントの著作権またはプライバシー ページへのリンクウェブサイトの下部にある著作権
現在のドキュメントのセクションへのリンク
セクションドキュメントリストのセクションへのリンク
サブセクション現在のドキュメント リストのサブセクションへのリンク。 (セクションには複数のサブセクションを含めることができます。)
コレクション内の最上位ドキュメントへのリンク
目次コレクションのディレクトリへのリンク
上記のソース文書へのリンク
子供ソース文書へのリンクは下記
ヘルプヘルプドキュメントへのリンク<link rel="help" href="http://www.xxoo.net/help.html" />
ブックマークブックマーク用の永続的なURLリストタイトル
外部の外部文書へのリンク記事内で引用されている外部リンク
ノーフォロー有料リンクなど、許可されていない文書へのリンク
Googleは「nofollow」を使用して、検索スパイダーがリンクをたどらないように指定します。
サイト上の関連記事、サイト上のランダム記事、コメント返信、コメント、リストと記事ページの参照および著者リンク、サイドバーのコメントアドレス、ホームページナビゲーションの「ホーム」リンク、最もコメントされた記事、最もアクセスされた記事
参照なしユーザーがこのハイパーリンクをたどったときに、ブラウザがHTTPリファラーヘッダーを送信しないように指定します。
ライセンス文書の著作権情報へのリンク
タグ現在のドキュメントタグ(キーワード)サイドバーのタグクラウド、記事のタグ、リストのタグ、タグページのタグ
友人スポンサーフレンドリーリンク、テーマは下部にあります

由于本人水平有限,難免存在一些錯誤,看官們如果覺得有不妥或者需要補充的地方,請留言指出,謝謝!

参照する

http://www.w3schools.com/TAGS/att_a_rel.asp

http://vanessa.b3log.org/research-a-rel-value

http://www.w3school.com.cn/htmldom/prop_anchor_rel.asp

rel-authorタグについて言及する必要がある

HTML rel canonical属性値

リンクタグのrel属性の意味

rel="canonical" について (Google ウェブマスター ツール)

<<:  MySQL 接続とコレクションの簡単な分析

>>:  Nginx メモリプールのソースコード分析

推薦する

クエリでのMySQLのユニークキーの使用と関連する問題

1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...

VSCode と SSH を使用したリモート開発

0. リモート開発が必要な理由組み込み Linux を開発する場合、便宜上、通常は Windows ...

熟練デザイナーの7つの原則(2):色の使い方

<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...

ミニプログラム開発ツールのソースコードからの基本実装の分析

目次ミニプログラム開発者ツールのソースコードを表示する方法ミニプログラムアーキテクチャ設計1. ミニ...

Vueはユーザーログイン切り替えを実装します

この記事では、ユーザーのログイン切り替えを実現するためのVueの具体的なコードを例として紹介します。...

複数のサーバーにNginxリバースプロキシを実装する方法

Nginx は複数のサーバーをリバース プロキシします。つまり、nginx に異なるリクエストを送信...

Linux CentOS 6.5 ifconfig が IP を照会できない問題の解決方法

最近、何人かの友人から、仮想マシンに CentOS をインストールした後、ifconfig コマンド...

Reactは二次連結(左右連結)を実現する

この記事では、二次リンクを実現するためのReactの具体的なコードを参考までに共有します。具体的な内...

Linuxディレクトリ構造の詳細な紹介

Linuxを学び始めるときは、まずLinuxの標準ディレクトリ構造を理解する必要があります。 / r...

CSSはコンテンツの高さが足りない場合にフッターを自動的に下部に固定します

UI カットのプロセスでは、ページはヘッダー、コンテンツ、フッターの 3 つの部分で構成されることが...

Apache をインストールした後、サービスを開始できません (サービスを開始するとエラー コード 1 が表示されます)

目次1. エラーメッセージ2. エラーの原因3. 解決策1. エラーメッセージ1. インストール後、...

Vueは動的ルーティングの詳細を実装します

目次1. フロントエンド制御1. router.js ファイル内 (router.js にそれぞれ静...

Docker ベースの GitLab 環境をデプロイする方法と手順

注意:仮想マシンのメモリは2G以上が推奨され、 Alibaba Cloudのアクセラレーションイメー...

MySqlのインストールとアンインストールに関する詳細なチュートリアル

この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...

CSS3は子供のころの紙飛行機を実現する

今日は折り紙飛行機(飛べる飛行機)を作ります基本的にすべてCSSで実装されており、JSはごく一部に過...