SEO优化您必须了解的链接“rel”属性

常，您会看到特定链接具有关联的rel属性。rel="nofollow"是最常见的用法，您告诉百度和其他搜索引擎不要“关注”特定链接，并且不得通过该链接传递权重。

但是，您还应该了解其他一些rel属性，尤其是当您作为SEO工作或想了解有关链接的不同rel属性的更多信息时。

在列出所有rel属性之前，让我们首先尝试了解什么是rel属性以及它的实际含义。

什么是Rel属性？

rel属性的一般语法是：<a rel="nofollow" href="https://www.domain.com">这是一个链接</a>。

rel属性定义了链接资源和当前文档之间的关系。因此，在上面的示例中，rel属性定义了包含链接的页面和链接到的页面之间的关系。在这种情况下，该关系为nofollow。

在特定链接中，关系可能不同。它不必始终为nofollow。在某些链接中，可能根本没有定义任何关系。您不必总是指定关系，并且每个链接都必须包含rel属性，这不是强制性的。rel属性是可选的，而不是强制性的。

总之，rel属性定义了源文档和目标文档之间的关系。rel属性可以是其他HTML元素的一部分，而不仅仅是链接。因此，rel属性不仅限于链接，还可以应用于其他HTML元素（例如<form>或<nav>），在这些HTML元素中，必须将“关系”信息传递给搜索机器人，爬虫和蜘蛛，以便他们了解正在发生的事情以及不同文档之间的相互关系。

您应该知道的最常见的Rel属性

下面，我定义了一些您应该知道的最重要和最常见的rel属性，并且我还解释了每个属性的含义。

Rel="Nofollow"

这意味着将不通过给定的链接对目标文档进行爬网，并且您不希望从现有文档中传递权重。这也是告诉Google和其他搜索引擎的一种方式：我不认可此链接，但是我在文档中使用它作为参考。它不是为了背书或引用，只是供他人参考。

用在哪里？–超链接。

Rel="Canonical"

表示目标文档是页面的主副本。rel规范元素中给出的任何值，即主副本，都可以等于源文档，也可以与源文档不同。这用于防止重复内容问题。

用在哪里？–在给定页面的头部。

Rel="ugc"

UGC代表用户生成的内容。在内容不是由页面作者创建而是由其他阅读文档的用户创建的情况下使用此rel属性。这可能意味着博客和论坛的评论部分，或其他用户使用该网站创建的单个内容。由用户生成但不是该文档作者制作的任何内容都可以标记为UGC。

用在哪里？–在内容是用户生成的内容而非作者生成的超链接中使用。

为什么这很重要？–重要的是指出用户生成的指向百度和其他搜索引擎的链接和内容，因为有时网站所有者不能完全控制网站上显示的内容，因为其中一部分内容可以由用户生成（例如论坛，目录网站）以及其他任何人都可以注册和创建内容的公共平台。）因此，当百度和其他搜索引擎从本质上理解页面的哪个部分是用户生成的内容以及本质上是编辑的哪个部分时，他们可以更好地了解正在发生的事情，从而帮助他们在搜索结果中对页面进行排名。它还可以帮助网站所有者避免任何形式的算法惩罚，因为百度和其他搜索引擎知道该内容是用户自然生成的（因此，如果该内容看上去是垃圾内容并违反百度网站质量准则，则有时它们可能具有较高的容忍度）。

Rel="sponsored"

如果有人付钱给您手动链接到他们，或者您的页面上有付费广告，则应始终将其标记为“赞助”。

用在哪里？–超链接。

为什么这很重要？ –重要的是要向百度和其他搜索引擎表明您明确告诉他们这是一个赞助链接，而不是自然的认可。明确说明后，搜索引擎将了解发生了什么事情，并且您没有做任何黑帽SEO或接受任何费用以换取链接。但是，如果您没有明确提及这一点，并且搜索引擎发现您一直在销售链接，那么您将遇到很大的麻烦，因为搜索引擎会手动标记您的网站，您的网站将失去自然排名。

SS（cascading style sheet）层叠样式表语言，用来专门修饰HTML的。有三种方式将CSS嵌入html中。

第一种：

内联定义。任何一个html标签都可以指定style属性，在标签的style属性上直接定义样式名和值，语法如下：

<标签 style=“样式名：样式值；

样式名：样式值；

样式名：样式值；”>

</标签>

样式名可以为字体，文本，背景，定位，尺寸，布局，表格，列表，边框

第二种：

在head标签中使用style标签，定义内部样式块对象。语法如下：

选择器 {

样式名：样式值；

….

}

</style>

常用的三种选择器为：标签选择器（直接写），id选择器（id名字前面加上#）和class选择器（任何一个标签都有class属性，class值相同的，可以看作是同一类标签，class名字前面加上一个点.）。

第三种：

利用link标签，链入外部样式表文件。语法如下：

优先级：id选择器>类选择器>标签选择器

CSS常见的样式:

隐藏：display:none;

文本装饰：text-decoration:underline;

列表样式：list-style-type:none;

设置鼠标悬停效果：span:hover;

内外补丁：margin-top:10px padding-left:20px;

悬浮样式：float:left;

光标样式：position:absolute; cursor:pointer；

来看下常用的标签列表，后文会一一介绍：

<!DOCTYPE html>

<head>

</head>

基本标签

使用 HTML5 doctype，不区分大小写。

<!DOCTYPE html>

声明文档使用的字符编码

更加标准的 lang 属性写法 http://zhi.hu/XyIa

简体中文
<html lang="zh-cmn-Hans">
繁体中文
<html lang="zh-cmn-Hant">

很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

<strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。

</p>

优先使用 IE 最新版本和 Chrome

SEO 优化

页面描述

每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。文档

页面关键词

定义页面标题

定义网页作者

定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。文档

可选标签

为移动设备添加 viewport

content 参数：

width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 设备

添加到主屏后的标题（iOS 6 新增）

是否启用 WebApp 全屏模式

设置状态栏的背景颜色

content 参数：

default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。

如果设置为 default 或 black ,网页内容从状态栏底部开始。

如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。

禁止数字识自动别为电话号码

iOS 图标

rel 参数：

apple-touch-icon 图片自动处理成圆角和高光等效果。

apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。

iPhone 和 iTouch，默认 57x57 像素，必须有

iPad，72x72 像素，可以没有，但推荐有

Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有

Retina iPad，144x144 像素，可以没有，但推荐有

iOS 启动画面

官方文档：https://developer.apple.com/library/ios/qa/qa1686/_index.html

参考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的启动画面是不包括状态栏区域的。

iPad 竖屏 768 x 1004（标准分辨率）

iPad 竖屏 1536x2008（Retina）

iPad 横屏 1024x748（标准分辨率）

iPad 横屏 2048x1496（Retina）

iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

iPhone/iPod Touch 竖屏 320x480 (标准分辨率)

iPhone/iPod Touch 竖屏 640x960 (Retina)

iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)

添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）文档

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 标签，用来控制选项卡颜色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁贴颜色

Windows 8 磁贴图标

其他

添加 RSS 订阅

添加 favicon icon

禁止 Chrome 浏览器中自动提示翻译

在线咨询

上一篇：HTML5简介
下一篇：如何实现注入html的中文不显示乱码？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商