Link中rel属性全解及在SEO中的作用
作者: zms! 日期: 2014.04.01 本文发布于2189天前 分类: 白帽SEO 相关：html rel seo
rel只是标签的一个属性，定义了当前文档与 Web 集合中其他文档的关系。link 元素是一个空元素，它仅包含属性。且只能存在于 head 部分，不过它可出现任何次数。在 html 中， 标签没有结束标签。在 XHTML 中， 标签必须被正确的关闭。
除了HTML的标准通用属性之外，link元素还包括很多可选属性，如: charset, href, hreflang, media, rel, rev, target, title和type。这些属性中，target只允许在 Transitional和Frameset两种DTD中使用，其它都可在Strict, Transitional和Frameset三种DTD中使用。
这些属性中，rel属性是核心。还是来看看我搜集到的rel属性和在wordpress内对link元标签的处理：
外部样式表的调用属性
1) 显示器样式表
link标签最多的使用就是用来调用外部样式表，例如下面这样:
<link rel="stylesheet" href="http://www.weitor.com/wp-content/themes/style.CSS" type="text/css" media="screen" />
其中href是目标文档的URL， type则规定了目标URL的MIME 类型，而media规定了文档将显示在什么设备上。
2)打印设备样式表
下面这个webdesignerwall的 样式表调用就规定了文档显示在打印设备上时的CSS样式 :<link rel="stylesheet" href="http://www.weitor.com/wp-content/themes/wdw/print.css" type="text/css" media="print" />
3)可替换样式表
你可能还会在一些网页中看到诸如下面的样式表调用代码:
<link rel="alertnate stylesheet" href="http://www.weitor.com/wp-content/themes/red.css" type="text/css" media="screen" />
这段代码定义了一个可替换的样式表，它和第一个link元素同时使用，第一个定义了首选样式，而这个则让用户可选择替换的样式。但这个替换操作需要 浏览器支持，但很多浏览器比如IE都是不支持的。
所以使用到替换样式的网页，一般都用一些样式表切换的JS，让用户可以自由切换界面样式。这个应该大家都见过，一些网站会给网页定义多种配色。 稍高阶的一些，还可以利用 JS弄成随时间变化样式的，比如白天的时候显示成明色，晚上的时候显示成暗色。
4) 定义网站收藏夹图标
<link rel="shortcut icon" href="http://www.weitor.com/wp-content/themes/images/favicon.ico" type="images/x-icon"/>
<link rel="icon" href="http://www.weitor.com/wp-content/themes/images/favicon.png" type="images/png"/>
关于这个调用我自己也还有些迷糊，我实验的结果是:
IE只支持ico格式的favicon;
rel属性必须包含shortcut, 才会在IE下显示;
我在制作透明格式的ico时总出问题，总会出现黑底，就算弄了IE下非黑底了，在Chrome下又变成黑底。
于是，制作一个透明的ico和一个透明的png, 第一段供IE浏览器调用，第二段供其它浏览器调用;
注释: 你也可以不使用这个link元素，而直接制作一个favicon.ico文件，并放到网站根目录。
顺定分享: 为你的网站添加Apple Touch图标
iphone或iPod Touch设备允许用户添加网站的链接到主屏上，使用下面的代码可以为你的网站指定一个Apple Touch图标:
<link rel="apple-touch-icon" href="http://www.weitor.com/wp-content/themes/images/apple-touch-icon.png" />
对于国内的用户来说，使用iPhone的人还不多，即使很多，会把你网站放到主屏？那恐怕不是我们这些一般的小网站能够做到的。
WordPress中的link元素
1) RSS地址和Pingback地址
下面是WordPress默认主题对RSS2地址，Atom地址和Pingback地址的定义。具体原理俺觉得很深奥很复杂，PingBack是中常用的用来通知网志系统文章被引用情况的一种手段。"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'); ?>" />
当其他人连结至Web作者的网页时，Web作者获取通知的方法。这个方法使得Web作者可以追踪什么人连结至他的文章。有一些网志软体，如WordPress，具有当一篇文章出版的时候，自动pingback这篇文章中所有的连结的功能。
造字：ping-back：ping的回溯。
Ping网路上用来测试其他电脑是否存在的工具，取名字是声纳系统的声音。 牛奶咖啡网www.coffnet.com
Alice写了一篇文章Ａ
Bob看了以後写了一篇文章B评论A，文章B中有一个LinkA 指向A。（一般来说，B有连结至A，A并不知情）。
如何让A自动知道有人连结到他？可以靠Bob寄信给Alice，或是B所在的伺服器ServerB的程式，自动剖析B上面的连结LinkA，自动通知LinkA所指的Ａ所在的伺服器ServerA 本文来自http://www.coffnet.com咖啡文学网
ServerA 自动在A的後面的引用清单加上B2) 用于远程发布的link元素
如果你的主题中有<?php wp_head(); ?>这个函数，下面这两个link元素就会出现:
<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" />
这两个元素主要供远程发布使用，比如你使用Windows Live Write等桌面博客编辑器来发布文章。如果你并不需要这个功能，那完全可以把这两个元素删除，删除的方法是，打开你WordPress主题的 functions.php, 在最底部的<?php } ?> 或者 ?> 标签之前，插入下面的代码:
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
注释: 你可能在想，既然是<?php wp_head(); ?>函数生成了这两个东西，把它删除不就可以了。是的，如果你预计你其它任何插件都不会需要到这个函数，那就删吧。
防止内容重复的canonical属性谷歌、雅虎和live search在今年2月左右宣布支持Link的一个新属性Canonical，主要作用 是为网页指定权威链，以解决重复内容问题。
小总结：
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
讨论区
你可能也喜欢
Link中rel属性全解及在SEO中的作用 2014.04.01,47 pv
meta name 属性全解及在SEO中的作用 2014.04.01,10 pv
谷歌网站管理员博客：五个常见的SEO错误 2012.07.01,35 pv
浅谈如何一步步的把关键词排名给做上去 2012.07.01,11 pv
Google排名优化圣经 2012.07.01,3 pv
