SEO優(yōu)化您必須了解的鏈接“rel”屬性

常，您會(huì)看到特定鏈接具有關(guān)聯(lián)的rel屬性。rel="nofollow"是最常見的用法，您告訴百度和其他搜索引擎不要“關(guān)注”特定鏈接，并且不得通過該鏈接傳遞權(quán)重。

但是，您還應(yīng)該了解其他一些rel屬性，尤其是當(dāng)您作為SEO工作或想了解有關(guān)鏈接的不同rel屬性的更多信息時(shí)。

在列出所有rel屬性之前，讓我們首先嘗試了解什么是rel屬性以及它的實(shí)際含義。

什么是Rel屬性？

rel屬性的一般語法是：<a rel="nofollow" href="https://www.domain.com">這是一個(gè)鏈接</a>。

rel屬性定義了鏈接資源和當(dāng)前文檔之間的關(guān)系。因此，在上面的示例中，rel屬性定義了包含鏈接的頁面和鏈接到的頁面之間的關(guān)系。在這種情況下，該關(guān)系為nofollow。

在特定鏈接中，關(guān)系可能不同。它不必始終為nofollow。在某些鏈接中，可能根本沒有定義任何關(guān)系。您不必總是指定關(guān)系，并且每個(gè)鏈接都必須包含rel屬性，這不是強(qiáng)制性的。rel屬性是可選的，而不是強(qiáng)制性的。

總之，rel屬性定義了源文檔和目標(biāo)文檔之間的關(guān)系。rel屬性可以是其他HTML元素的一部分，而不僅僅是鏈接。因此，rel屬性不僅限于鏈接，還可以應(yīng)用于其他HTML元素（例如<form>或<nav>），在這些HTML元素中，必須將“關(guān)系”信息傳遞給搜索機(jī)器人，爬蟲和蜘蛛，以便他們了解正在發(fā)生的事情以及不同文檔之間的相互關(guān)系。

您應(yīng)該知道的最常見的Rel屬性

下面，我定義了一些您應(yīng)該知道的最重要和最常見的rel屬性，并且我還解釋了每個(gè)屬性的含義。

Rel="Nofollow"

這意味著將不通過給定的鏈接對(duì)目標(biāo)文檔進(jìn)行爬網(wǎng)，并且您不希望從現(xiàn)有文檔中傳遞權(quán)重。這也是告訴Google和其他搜索引擎的一種方式：我不認(rèn)可此鏈接，但是我在文檔中使用它作為參考。它不是為了背書或引用，只是供他人參考。

用在哪里？–超鏈接。

Rel="Canonical"

表示目標(biāo)文檔是頁面的主副本。rel規(guī)范元素中給出的任何值，即主副本，都可以等于源文檔，也可以與源文檔不同。這用于防止重復(fù)內(nèi)容問題。

用在哪里？–在給定頁面的頭部。

Rel="ugc"

UGC代表用戶生成的內(nèi)容。在內(nèi)容不是由頁面作者創(chuàng)建而是由其他閱讀文檔的用戶創(chuàng)建的情況下使用此rel屬性。這可能意味著博客和論壇的評(píng)論部分，或其他用戶使用該網(wǎng)站創(chuàng)建的單個(gè)內(nèi)容。由用戶生成但不是該文檔作者制作的任何內(nèi)容都可以標(biāo)記為UGC。

用在哪里？–在內(nèi)容是用戶生成的內(nèi)容而非作者生成的超鏈接中使用。

為什么這很重要？–重要的是指出用戶生成的指向百度和其他搜索引擎的鏈接和內(nèi)容，因?yàn)橛袝r(shí)網(wǎng)站所有者不能完全控制網(wǎng)站上顯示的內(nèi)容，因?yàn)槠渲幸徊糠謨?nèi)容可以由用戶生成（例如論壇，目錄網(wǎng)站）以及其他任何人都可以注冊(cè)和創(chuàng)建內(nèi)容的公共平臺(tái)。）因此，當(dāng)百度和其他搜索引擎從本質(zhì)上理解頁面的哪個(gè)部分是用戶生成的內(nèi)容以及本質(zhì)上是編輯的哪個(gè)部分時(shí)，他們可以更好地了解正在發(fā)生的事情，從而幫助他們?cè)谒阉鹘Y(jié)果中對(duì)頁面進(jìn)行排名。它還可以幫助網(wǎng)站所有者避免任何形式的算法懲罰，因?yàn)榘俣群推渌阉饕嬷涝搩?nèi)容是用戶自然生成的（因此，如果該內(nèi)容看上去是垃圾內(nèi)容并違反百度網(wǎng)站質(zhì)量準(zhǔn)則，則有時(shí)它們可能具有較高的容忍度）。

Rel="sponsored"

如果有人付錢給您手動(dòng)鏈接到他們，或者您的頁面上有付費(fèi)廣告，則應(yīng)始終將其標(biāo)記為“贊助”。

用在哪里？–超鏈接。

為什么這很重要？ –重要的是要向百度和其他搜索引擎表明您明確告訴他們這是一個(gè)贊助鏈接，而不是自然的認(rèn)可。明確說明后，搜索引擎將了解發(fā)生了什么事情，并且您沒有做任何黑帽SEO或接受任何費(fèi)用以換取鏈接。但是，如果您沒有明確提及這一點(diǎn)，并且搜索引擎發(fā)現(xiàn)您一直在銷售鏈接，那么您將遇到很大的麻煩，因?yàn)樗阉饕鏁?huì)手動(dòng)標(biāo)記您的網(wǎng)站，您的網(wǎng)站將失去自然排名。

SS（cascading style sheet）層疊樣式表語言，用來專門修飾HTML的。有三種方式將CSS嵌入html中。

第一種：

內(nèi)聯(lián)定義。任何一個(gè)html標(biāo)簽都可以指定style屬性，在標(biāo)簽的style屬性上直接定義樣式名和值，語法如下：

<標(biāo)簽 style=“樣式名：樣式值；

樣式名：樣式值；

樣式名：樣式值；”>

</標(biāo)簽>

樣式名可以為字體，文本，背景，定位，尺寸，布局，表格，列表，邊框

第二種：

在head標(biāo)簽中使用style標(biāo)簽，定義內(nèi)部樣式塊對(duì)象。語法如下：

選擇器 {

樣式名：樣式值；

….

}

</style>

常用的三種選擇器為：標(biāo)簽選擇器（直接寫），id選擇器（id名字前面加上#）和class選擇器（任何一個(gè)標(biāo)簽都有class屬性，class值相同的，可以看作是同一類標(biāo)簽，class名字前面加上一個(gè)點(diǎn).）。

第三種：

利用link標(biāo)簽，鏈入外部樣式表文件。語法如下：

優(yōu)先級(jí)：id選擇器>類選擇器>標(biāo)簽選擇器

CSS常見的樣式:

隱藏：display:none;

文本裝飾：text-decoration:underline;

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

設(shè)置鼠標(biāo)懸停效果：span:hover;

內(nèi)外補(bǔ)丁：margin-top:10px padding-left:20px;

懸浮樣式：float:left;

光標(biāo)樣式：position:absolute; cursor:pointer；

來看下常用的標(biāo)簽列表，后文會(huì)一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標(biāo)簽

使用 HTML5 doctype，不區(qū)分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標(biāo)準(zhǔn)的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區(qū)代碼，通常是為了強(qiáng)調(diào)不同地區(qū)漢語使用差異，例如：

<strong lang="zh-cmn-Hans-CN">菠蘿</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其實(shí)是同一種水果。只是大陸和臺(tái)灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為<strong lang="zh-cmn-Hans-SG">黃梨</strong>。

</p>

優(yōu)先使用 IE 最新版本和 Chrome

SEO 優(yōu)化

頁面描述

每個(gè)網(wǎng)頁都應(yīng)有一個(gè)不超過 150 個(gè)字符且能準(zhǔn)確反映網(wǎng)頁內(nèi)容的描述標(biāo)簽。文檔

頁面關(guān)鍵詞

定義頁面標(biāo)題

定義網(wǎng)頁作者

定義網(wǎng)頁搜索引擎索引方式，robotterms是一組使用英文逗號(hào)「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標(biāo)簽

為移動(dòng)設(shè)備添加 viewport

content 參數(shù)：

width viewport 寬度(數(shù)值/device-width)
height viewport 高度(數(shù)值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經(jīng)刪除），可以在頁面加載時(shí)最小化上下狀態(tài)欄。這是一個(gè)布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設(shè)備

添加到主屏后的標(biāo)題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設(shè)置狀態(tài)欄的背景顏色

content 參數(shù)：

default 默認(rèn)值。
black 狀態(tài)欄背景是黑色。
black-translucent 狀態(tài)欄背景是黑色半透明。

如果設(shè)置為 default 或 black ,網(wǎng)頁內(nèi)容從狀態(tài)欄底部開始。

如果設(shè)置為 black-translucent ,網(wǎng)頁內(nèi)容充滿整個(gè)屏幕，頂部會(huì)被狀態(tài)欄遮擋。

禁止數(shù)字識(shí)自動(dòng)別為電話號(hào)碼

iOS 圖標(biāo)

rel 參數(shù)：

apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖。

iPhone 和 iTouch，默認(rèn) 57x57 像素，必須有

iPad，72x72 像素，可以沒有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

Retina iPad，144x144 像素，可以沒有，但推薦有

iOS 啟動(dòng)畫面

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

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

iPad 的啟動(dòng)畫面是不包括狀態(tài)欄區(qū)域的。

iPad 豎屏 768 x 1004（標(biāo)準(zhǔn)分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標(biāo)準(zhǔn)分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動(dòng)畫面是包含狀態(tài)欄區(qū)域的。

iPhone/iPod Touch 豎屏 320x480 (標(biāo)準(zhǔn)分辨率)

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 標(biāo)簽，用來控制選項(xiàng)卡顏色。

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

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標(biāo)

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動(dòng)提示翻譯

在線咨詢

上一篇：HTML5簡介
下一篇：如何實(shí)現(xiàn)注入html的中文不顯示亂碼？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商