HTMLリンクタグのrel属性

HTMLリンクタグのrel属性

<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの関係を定義します。リンク要素は、属性のみを含む空の要素です。この要素はヘッド セクションにのみ出現しますが、出現回数は任意です。 HTML では、<link> タグに終了タグはありません。 XHTML では、<link> タグを適切に閉じる必要があります。

HTML の標準的な共通属性に加えて、link 要素には、charset、href、hreflang、media、rel、rev、target、title、type などの多くのオプション属性が含まれます。これらの属性のうち、target は Transitional および Frameset DTD でのみ使用できますが、その他の属性は Strict、Transitional、および Frameset DTD で使用できます。

これらの属性の中で、rel 属性が中心となります。この記事では、123WORDPRESS.COM が、私たちが知っているいくつかの rel 属性と、WordPress のいくつかのリンク要素の処理を紹介します。これは、初心者の友人が学習するのに適しています。

1. 外部スタイルシートの呼び出し

(1)表示スタイルシート

リンク タグは、次のような外部スタイル シートを呼び出すために最もよく使用されます。

 < link rel = "stylesheet" href = "http://paranimage.com/wp-content/themes/v5/style.css" type = "text/css" media = "screen" / >

ここで、 hrefは対象ドキュメントの URL、 typeは対象 URL の MIME タイプ、 media はドキュメントが表示されるデバイスを指定します。

(2)印刷デバイススタイルシート

次のwebdesignerwallスタイルシート呼び出しは、印刷デバイスに表示されるドキュメントの CSS スタイルを指定します。

 < link rel = "stylesheet" href = "http://www.webdesignerwall.com/wp-content/themes/wdw/print.css" type = "text/css" media = "print" / >

(3)置き換え可能なスタイルシート

一部の Web ページでは、次のようなスタイルシート呼び出しも表示されることがあります。

 < link rel = "alertnate stylesheet" href = "http://paranimage.com/wp-content/themes/v5/red.css" type = "text/css" media = "screen" / >

このコードは、最初のリンク要素と組み合わせて使用​​される代替スタイルシートを定義します。最初の要素は優先スタイルシートを定義し、この要素はユーザーが代替スタイルシートを選択できるようにします。ただし、この置換操作にはブラウザのサポートが必要ですが、IE などの多くのブラウザはこれをサポートしていません。

そのため、置換スタイルを使用する Web ページでは、通常、スタイルシートの切り替えに JS が使用され、ユーザーはインターフェース スタイルを自由に切り替えられるようになります。誰もがこれを見たことがあるはずです。一部の Web サイトでは、Web ページに複数の配色を定義しています。 WordPress ユーザーが興味を持っている場合は、 Small PotatoWPDesigner 7 WordPress テーマを試用版としてダウンロードできます (またはDEMO を確認してください)。シンプルな JS と複数の置き換え可能なスタイルを使用して、ユーザーが Web ページの色を変更できるようにします。さらに高度なものには、日中は明るい色、夜間は暗い色を表示するなど、JS を使用して時間とともにスタイルを変更することもできます。

: 優先スタイルシートに media="all" を指定し、印刷スタイルシートを追加すると、Web 標準にさらに準拠するようになります (ただし、通常の Web サイトの場合、ページを印刷したい人はほとんどいません)。 Palan Imageは印刷スタイルを定義していません。後で時間を見つけて定義します。 :)

: 代替スタイルを使用するかどうかは裁量の問題です。配色のみを変更し、全体のトーンが変わらない場合は、許容されます。しかし、WordPress ユーザーなど、まったく異なるスタイルの複数のテーマを有効にし、プラグインを使用してユーザーが自由に変更できるようにする人もいます。これはクールに思えるかもしれませんが、やらない方がいいと思います。 SEO に影響するかどうかに関わらず、ウェブサイトに対する固定イメージが人々には欠けてしまいます。

2. ウェブサイトのお気に入りアイコンを定義する

favicon/bookmarks iconの詳しい紹介については、Baidu Encyclopedia ( 12 ) を参照してください。次のコードを使用して呼び出すことができます。

 < link rel = "shortcut icon" href = "http://paranimage.com/wp-content/themes/v5/images/favicon.ico" type = "images/x-icon" / > < link rel = "icon" href = "http://paranimage.com/wp-content/themes/v5/images/favicon.png" type = "images/png" / >

この呼び出しについてはまだ少し混乱していますが、私の実験の結果は次のとおりです。

  • IE は ico 形式の favicon のみをサポートします。
  • rel 属性には、IE で表示するショートカットを含める必要があります。
  • 透明な ico を作成するときにいつも問題が発生します。常に背景が黒になります。IE で黒以外の背景にしても、Chrome では再び黒になります。
  • したがって、透明な ico と透明な png を作成します。最初の部分は IE ブラウザーが呼び出すためのもので、2 番目の部分は他のブラウザーが呼び出すためのものです。

: このリンク要素を使用せずに、favicon.ico ファイルを直接作成し、Web サイトのルート ディレクトリに配置することもできます。

Shun Ding Share: ウェブサイトに Apple Touch アイコンを追加する

iPhone または iPod Touch デバイスでは、ユーザーはホーム画面に Web サイトへのリンクを追加できます。次のコードを使用して、Web サイトに Apple Touch アイコンを割り当てます。

 < link rel = "apple-touch-icon" href = "http://paranimage.com/wp-content/themes/v5/images/apple-touch-icon.png" / >

アイコンのサイズは PNG 形式で 57 x 57 です。そうでない場合は、自動的に拡大縮小されます。また、私の記憶が正しければ、iPhone スタイルの美しい丸い角である必要はありません。iPhone は、last.fm のApple Touch アイコンのように、スタイルに応じて角が丸いアイコンを自動的にグラデーションにします。

apple touch icon <link>標簽的rel屬性全解析

国内ユーザーの場合、iPhoneを使っている人は多くありません。たとえ多くても、あなたのサイトをホーム画面に置いてくれるでしょうか?残念ながら、それは私たちの小さなウェブサイトではできないことです。しかし、楽しみのために、自分の Web サイト用に 1 つ作成し、リンク要素を追加しました。

3. WordPressのリンク要素

(1)RSSアドレスとPingbackアドレス

以下は、デフォルトの WordPress テーマにおける RSS2 アドレス、Atom アドレス、Pingback アドレスの定義です。具体的な原則は非常に奥が深く複雑だと思うので、勉強するつもりはありません。とにかく、あなたのブログにはそれが必要なので、Atom はそれがなくても大丈夫のようですね?

 <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?> Atom Feed" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

(2)リモート公開用リンク要素

テーマに <?php wp_head(); ?> 関数がある場合は、次の 2 つのリンク要素が表示されます。

 < link rel = "EditURI" type = "application/rsd+xml" title = "RSD" href = "http://localhost/wordpress/xmlrpc.php?rsd" / > < link rel = "wlwmanifest" type = "application/wlwmanifest+xml" href = "http://localhost/wordpress/wp-includes/wlwmanifest.xml" / >

これら 2 つの要素は主にリモート公開に使用されます。たとえば、Windows Live Write などのデスクトップ ブログ エディターを使用して記事を公開します。この機能が必要ない場合は、これら 2 つの要素を削除できます。削除するには、WordPress テーマの functions.php を開き、<?php } ?> または ?> タグの前の下部に次のコードを挿入します。

 remove_action('wp_head', 'rsd_link'); remove_action('wp_head', 'wlwmanifest_link');

: これら 2 つを生成するのは <?php wp_head(); ?> 関数なので、これを削除すればいいのではないかと思われるかもしれません。はい、他のプラグインでこの機能が必要になることが予想されない場合は、削除してください。

4. 重複コンテンツを防ぐための正規属性

Google、Yahoo、Live Searchは今年2月頃、重複コンテンツの問題を解決するためにウェブページの権威チェーンを指定するために主に使用されるCanonicalと呼ばれる新しいLink属性をサポートすると発表しました。

この属性の詳細な説明については、Google 中国語ウェブマスターの「URL 形式の指定」をご覧ください。

WordPress ユーザーがヘッド セクションにこの属性を追加するために推奨される 2 つのプラグインは、 SEO No DuplicateまたはCanonical URL’s です。好きな方をお使いください。

完全な分析だと言いましたが、実際にはよく使われるものについてのみ話しました。ほとんどの人にとってはこれで十分です。他の重要な、よく使われる rel 属性をご存知でしたら、ぜひ共有してください。

<<:  MySQL 8.0 の新機能 - チェック制約の紹介

>>:  大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

推薦する

Vue 実践における実用的な小さな魔法のまとめ

初回の読み込みを高速化できるルートの遅延読み込みをどうして忘れられるでしょうか?ルーティングの遅延読...

WeChatアプレットのスクロールビューは、プルアップ時にデータの読み込みを重複させるソリューションを実装しています。

WeChat アプレットのスクロール ビューでは、プルアップして読み込むときにバグが多く発生します...

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

MySQL 外部キー設定方法の例

1. 外部キーの設定方法1. MySQL では、2 つのテーブルを関連付けるために、外部キー (FO...

Dockerコンテナレイヤーの概念の詳細な説明

目次01 コンテナの一貫性02 レイヤーの概念03 レイヤードデザインの利点今日はコンテナ レイヤー...

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...

Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

MySQLスケーラブル設計の基本原則

目次序文1. スケーラビリティとは何ですか?スケールアウトの利点:スケールアウトのデメリット:スケー...

JS 9 Promise 面接の質問

目次1. 複数の .catch 2. 複数の .catch 3. .then と .catch の連...

CSS3マスクレイヤーのくり抜き効果を実現するさまざまな方法

この記事では、マスク レイヤーの中空化を実現する 4 つの方法を紹介します。みんなと共有し、自分用の...

Linux ダイナミックライブラリの生成と使用ガイドの詳細な説明

Linux での動的ライブラリ ファイルのファイル名は libxxx.so のようになります。ここで...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

Win Server 2019 サーバーの IIS 構成と Web サイトの簡単な公開

1.まずサーバーにリモート接続する2. サーバーマネージャーを開く 3役割と機能の追加 4サーバープ...

iframe を使用して Web ページに他の Web ページを埋め込む方法

iframe の使い方:コードをコピーコードは次のとおりです。 <DIV align=cent...