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小時內與您取得聯系。

整合營銷服務商