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. 外部スタイルシートの呼び出し

（１）表示スタイルシート

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

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

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

（２）印刷デバイススタイルシート

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

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

（３）置き換え可能なスタイルシート

一部の 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 PotatoのWPDesigner 7 WordPress テーマを試用版としてダウンロードできます (またはDEMO を確認してください)。シンプルな JS と複数の置き換え可能なスタイルを使用して、ユーザーが Web ページの色を変更できるようにします。さらに高度なものには、日中は明るい色、夜間は暗い色を表示するなど、JS を使用して時間とともにスタイルを変更することもできます。

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

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

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

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

 < 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 アイコンのように、スタイルに応じて角が丸いアイコンを自動的にグラデーションにします。

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

3. WordPressのリンク要素

（１）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'); ?>" />

（２）リモート公開用リンク要素

テーマに <?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 属性をご存知でしたら、ぜひ共有してください。