實(shí)例解析豐富網(wǎng)頁(yè)摘要的三大標(biāo)記格式

時(shí)間：2022-05-29 00:48:01 | 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

時(shí)間：2022-05-29 00:48:01 來(lái)源：網(wǎng)絡(luò)營(yíng)銷

豐富網(wǎng)頁(yè)摘要英文名稱為Rich Snippets，通俗的來(lái)講就是在每條搜索結(jié)果下方顯示作者信息、照片信息、評(píng)論者、投票等等，這些信息都是豐富文本摘要，旨在讓用戶大體上先了解網(wǎng)頁(yè)上的內(nèi)容，以及與用戶的搜索查詢有何關(guān)聯(lián)。豐富網(wǎng)頁(yè)摘要可以幫助搜索用戶更為迅速地確定某一網(wǎng)站是否包含他們感興趣的信息。

Google之前已為購(gòu)物、食譜、評(píng)論、視頻、音樂(lè)以及活動(dòng)推出了豐富網(wǎng)頁(yè)摘要。而對(duì)于博客來(lái)說(shuō)，主要有兩個(gè)豐富網(wǎng)頁(yè)摘要功能，一個(gè)是目錄分類摘要功能，另一個(gè)就是作者摘要功能。

目錄分類摘要功能，可以讓用戶在Google搜索界面直觀的看到文章的具體分類信息，了解到網(wǎng)站的結(jié)構(gòu)，引導(dǎo)用戶進(jìn)一步查閱更多內(nèi)容。如下圖所示：

如果我們要想實(shí)現(xiàn)以上的豐富網(wǎng)頁(yè)摘要功能，就需要我們先掌握豐富網(wǎng)頁(yè)摘要的標(biāo)記格式。據(jù)億企邦收集的官方公布的信息展示，目前，豐富網(wǎng)頁(yè)摘要主要通過(guò)微數(shù)據(jù)（官方推薦）、微格式、REFa三種格式對(duì)網(wǎng)頁(yè)內(nèi)容類型進(jìn)行標(biāo)記來(lái)實(shí)現(xiàn)。

一、微數(shù)據(jù)

HTML5微數(shù)據(jù)規(guī)范是標(biāo)記內(nèi)容的一種方式，用于描述特定的信息類型，例如評(píng)論、人物信息或活動(dòng)。每種信息都描述特定類型的項(xiàng)，例如人物、活動(dòng)或評(píng)論。例如，活動(dòng)可以包含venue、starting time、name 和category屬性。

微數(shù)據(jù)使用HTML標(biāo)簽中的簡(jiǎn)單屬性為微數(shù)據(jù)項(xiàng)和屬性指定簡(jiǎn)要的描述性名稱。

以下示例是一個(gè)簡(jiǎn)短的HTML文本塊，顯示的是億企邦的基本聯(lián)系信息。

<div>
　　 我的名字是億企邦，我的博客是億企邦。我的主頁(yè)是：
　　 <a href="http://www.mahaixiang.cn">www.mahaixiang.cn</a>
　　 我住在楊浦區(qū)（上海市），我工作是SEO，目前在SEO公司上班。
　　</div>

以下是用微數(shù)據(jù)標(biāo)記的同一個(gè)HTML內(nèi)容。

<div itemscope itemtype="http://data-vocabulary.org/Person">
　　 我的名字是 <span itemprop="name">億企邦</span>
　　 我的博客是<span itemprop="nickname">億企邦</span>。
　　 我的主頁(yè)是：
　　 <a href="http://www.mahaixiang.cn" itemprop="url">www.mahaixiang.cn</a>
　　 我住在楊浦區(qū)（上海市）。我是<span itemprop="title">SEO</span>
　　 目前在<span itemprop="affiliation">SEO公司</span>上班。
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

（1）、在第一行中，itemscope表示中的內(nèi)容是個(gè)項(xiàng)。itemtype="http://data-vocabulary.org/Person 表示該項(xiàng)是人物。

（2）、人物項(xiàng)的每個(gè)屬性均使用itemprop屬性進(jìn)行標(biāo)識(shí)。例如，itemprop="name" 描述人物的姓名。

1、嵌套實(shí)體

上例顯示了億企邦的聯(lián)系信息，但是不包含他的地址。下面的例子顯示了相同的HTML內(nèi)容，但其中包含address屬性。

<div itemscope itemtype="http://data-vocabulary.org/Person">
　　 我的名字是 <span itemprop="name">億企邦</span>
　　 我的博客是<span itemprop="nickname">億企邦</span>。
　　 我的主頁(yè)是：
　　 <a href="http://www.mahaixiang.cn" itemprop="url">www.mahaixiang.cn</a>。
　　 我住在
　　 <span itemprop="address" itemscope
　　 itemtype="http://data-vocabulary.org/Address">
　　 <span itemprop="locality">楊浦區(qū)</span>
　　 <span itemprop="region">（上海市）</span>
　　 </span>
　　 我是<span itemprop="title">SEO</span>
　　 目前在<span itemprop="affiliation">SEO公司</span>上班。
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

address屬性自身便是一個(gè)項(xiàng)目，包含它自己的屬性集。它將itemscope屬性放在聲明address屬性的項(xiàng)中，并使用itemtype屬性指定所描述的項(xiàng)的類型，例如：<span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">。

2、日期和時(shí)間信息

若要明確指定日期和時(shí)間，請(qǐng)使用time元素及datetime屬性。在此例中，startDate屬性表示活動(dòng)的開始日期。datetime屬性中的值使用ISO日期格式指定。這樣，您就可以為搜索引擎提供ISO格式的詳細(xì)日期、時(shí)間和時(shí)區(qū)（“2009-10-15T19:00-08:00”），其中時(shí)區(qū)是可選信息；同時(shí)，可以通過(guò)用戶易于理解的方式在網(wǎng)頁(yè)上顯示日期（“2009 年 10 月 15 日晚上 7 點(diǎn)”）。如下所示：

<time itemprop="startDate" datetime="2009-10-15T19:00-08:00">2009 年10月15日晚上7點(diǎn)</time>

3、隱藏的內(nèi)容

一般情況下，Google不會(huì)顯示隱藏的內(nèi)容。也就是說(shuō)，不向用戶顯示某些內(nèi)容，而是使用隱藏文本為搜索引擎和網(wǎng)絡(luò)應(yīng)用單獨(dú)標(biāo)記信息。您應(yīng)該標(biāo)記用戶訪問(wèn)您的網(wǎng)頁(yè)時(shí)實(shí)際看到的文本。

本規(guī)則有幾個(gè)例外情況。在某些情況下，向搜索引擎提供更詳細(xì)的信息有很多好處，即使您不希望訪問(wèn)您網(wǎng)頁(yè)的人看到這些信息。例如，如果餐館的評(píng)分為 8.5 分，用戶（而不是搜索引擎）會(huì)認(rèn)為評(píng)分范圍為 1 到 10 分。在此例中，您可以使用meta元素表示此信息，如下所示：

<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
　　 評(píng)分：<span itemprop="value">8.5</span>
　　 <meta itemprop="best" content="10" />
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

meta標(biāo)記用于指定不在網(wǎng)頁(yè)上顯示的其他信息，在此例中，是指最高得分實(shí)際上是10分。該屬性值使用content 屬性進(jìn)行指定。

同樣，以ISO持續(xù)時(shí)間格式提供活動(dòng)持續(xù)時(shí)間也可以確保此信息正確顯示在搜索結(jié)果中，如下所示：

持續(xù)時(shí)間：
　　<span>1.5 小時(shí)<meta itemprop="duration" content="PT1H30M" />
　　</span>

下面億企邦就對(duì)此示例進(jìn)行了詳細(xì)說(shuō)明：

（1）、使用meta標(biāo)記可以指定屬性的值（在此例中是持續(xù)時(shí)間）。這樣，您就可以使用content屬性的值（“PT1H30M”）以 ISO 8601 持續(xù)時(shí)間格式指定此持續(xù)時(shí)間，同時(shí)仍以用戶易于理解的方式在網(wǎng)頁(yè)上顯示持續(xù)時(shí)間（“1.5 小時(shí)”）。

（2）、Google搜索引擎會(huì)查看meta元素的父元素，以識(shí)別meta標(biāo)記中以其他方式表示的信息。因此，在此例中，請(qǐng)務(wù)必確保meta標(biāo)記的直接父節(jié)點(diǎn)位于文字“1.5 小時(shí)”的外圍。

二、微格式

1、使用微格式標(biāo)記數(shù)據(jù)

微格式是網(wǎng)頁(yè)上使用的簡(jiǎn)單規(guī)范（稱為實(shí)體），用于描述特定的信息類型，例如評(píng)論、活動(dòng)、商品、商家或人物。每個(gè)實(shí)體都有自己相應(yīng)的屬性。例如，人物具有姓名、地址、職位、公司和電子郵件地址等屬性。

通常情況下，微格式使用HTML標(biāo)記（常為 <span> 或 <div>）中的 class 屬性為實(shí)體及其屬性分配簡(jiǎn)要的描述性名稱。以下示例是一個(gè)簡(jiǎn)短的HTML文本塊，顯示的是億企邦的基本聯(lián)系信息。

<div>
　　 <img src="www.mahaixiang.cn/seo.jpg" />
　　 <strong>億企邦</strong>
　　 SEO研究院的資深SEO
　　 江蘇省南京市上海路 200 號(hào)
　　 郵編：210000
　　</div>

以下是用 hCard（人物）微格式標(biāo)記的同一 HTML 內(nèi)容。

<div class="vcard">
　　 <img class="photo" src="www.mahaixiang.cn/seo.jpg" />
　　 <strong class="fn">億企邦</strong>
　　 <span class="title">資深SEO</span> at <span class="org">SEO研究院</span>
　　 <span class="adr">
　　 <span class="street-address">江蘇省南京市</span>
　　 <span class="locality">上海路 200 號(hào)</span>, <span class="region"></span>
　　 郵編：<span class="postal-code">210000</span>
　　 </span>
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

（1）、在第一行中，class="vcard" 表示 <div> 中所含的HTML內(nèi)容描述的是人物（用于描述人物的微格式稱為hCard，而在HTML中則稱為vcard。這不是拼寫錯(cuò)誤）。

（2）、該示例說(shuō)明了人物項(xiàng)的屬性，例如照片、姓名、職位、組織和地址。要給vcard所說(shuō)明的人物的屬性添加標(biāo)記，就需要為包含這些屬性內(nèi)容（如 <span>、<img> 或 <title>）的每個(gè)元素分配一個(gè)指明其屬性的class屬性。例如，fn說(shuō)明人物的名字；title說(shuō)明職位。（各種信息類型的“幫助”文章中均包含可以識(shí)別的屬性的完整列表。）

（3）、屬性中可以包含其他屬性。在以上示例中，屬性adr說(shuō)明人物的地址，其中包含子屬性street-address、locality、region和postal-code。

2、嵌套微格式

一種微格式中包含另一種微格式的情況是比較常見的，例如，評(píng)論中包含評(píng)論者的聯(lián)系信息。以下的評(píng)論示例中包含億企邦的工作職位和雇主。

<div>
　　 <strong>億企邦評(píng)論</strong>
　　 評(píng)論者：億企邦（資深編輯，新體驗(yàn)雜志社）
　　 評(píng)分：5 分（滿分為 5 分）
　　 SEO做的很棒！
　　</div>

以下是帶有hReview（評(píng)論）和hCard（人物）微格式標(biāo)記的同一HTML內(nèi)容。為了表示評(píng)論者的相關(guān)信息，我們將hCard（人物）微格式嵌套在hReview（評(píng)論）微格式中。

<div class="hreview">
　　 <span class="item">
　　 <strong class="item"><span class="fn">億企邦</span> 評(píng)論</strong>
　　 </span>
　　 <span class="reviewer vcard">
　　 評(píng)論者：<span class="fn">億企邦</span>, <span class="title">資深SEO</span>
　　 <span class="org">SEO研究院</span>
　　 </span>
　　 評(píng)分：<span class="rating">5</span> 分（總分為 5 分）。
　　 <span class="description">SEO做的很棒！
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

（1）、評(píng)論通過(guò)hReview微格式說(shuō)明，寫為class="hreview"。由于這是評(píng)論，因此整個(gè)HTML文本塊包含在帶有class="hreview"屬性的div中。

（2）、要標(biāo)識(shí)評(píng)論者，可以使用span class="reviewer"。但是，在本例中我們想使用vcard（人物）微格式來(lái)提供評(píng)論者的其他信息。為此您需要將reviewer和vcard放在同一行中，并用空格分隔，例如：<span class="reviewer vcard">。vcard屬性fn、title和org說(shuō)明Bob的名字、職位和工作單位。

3、隱藏的內(nèi)容

一般情況下，Google不會(huì)顯示隱藏的內(nèi)容。也就是說(shuō)，不向用戶顯示某些內(nèi)容，而是使用隱藏文本為搜索引擎和網(wǎng)絡(luò)應(yīng)用程序單獨(dú)標(biāo)記信息，您應(yīng)該標(biāo)記用戶訪問(wèn)您的網(wǎng)頁(yè)時(shí)實(shí)際看到的文本。

但是在某些情形下，向搜索引擎提供更為詳細(xì)的信息是很有用的，即使您不希望訪問(wèn)您網(wǎng)頁(yè)的人看到該信息。例如，提供場(chǎng)地的經(jīng)緯度可幫助Google正確地將其在地圖上顯示出來(lái)，而采用ISO日期格式提供活動(dòng)的日期則有助于將它正確地顯示在搜索結(jié)果中。在這種情況下，您可以使用微格式值類樣式。不妨考慮下面這個(gè)示例：

<span class="dtstart">
　　 <span class="value-title" title="2009-10-15T19:00-08:00" />
　　10 月 15 日晚上 7 點(diǎn)
　　</span>

將<span class="value-title" title="2009-10-15T19:00-08:00" />添加到帶有class="dtstart"標(biāo)記的文本塊中，豐富網(wǎng)頁(yè)摘要的解析器就會(huì)根據(jù)title屬性中的值來(lái)查找活動(dòng)的開始日期。在不影響用戶的日期顯示方式的情況下，可以用ISO日期格式表示title屬性中的日期。

三、關(guān)于RDFa

RDFa全稱（RDF attribute），設(shè)計(jì)提供了一套屬性，可以用于在XML(及其方言，也包括HTML)中攜帶元數(shù)據(jù)，對(duì)于在（X）HTML中添加RDFa的作者而言，不一定需要理解RDF或者本體。

RDFa作為一種用于（X）HTML文檔的語(yǔ)義標(biāo)注技術(shù)，目前已經(jīng)成為W3C的推薦技術(shù)標(biāo)準(zhǔn)。

1、使用RDFa標(biāo)記內(nèi)容

RDFa是標(biāo)記內(nèi)容的一種方式，用于描述特定的信息類型，如餐館評(píng)論、活動(dòng)、人物或商品詳情。這些信息類型被稱為實(shí)體或項(xiàng)。每個(gè)實(shí)體都有多個(gè)屬性。例如，人物具有姓名、地址、職位、公司和電子郵件地址等屬性。

一般情況下，RDFa使用XHTML標(biāo)記（常為 <span> 或 <div>）中的簡(jiǎn)單屬性為實(shí)體和屬性分配簡(jiǎn)要的描述性名稱。以下示例是一個(gè)簡(jiǎn)短的HTML文本塊，顯示的是億企邦的基本聯(lián)系信息。

<div>
　　我的名字是億企邦，我的博客是億企邦。我的主頁(yè)是：
　　<a href="http://www.mahaixiang.cn">www.mahaixiang.cn</a>。
　　我住在楊浦區(qū)（上海市）。我是SEO，目前在SEO公司上班。
　　</div>

以下是帶有RDFa標(biāo)記的同一HTML內(nèi)容。

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
　　 我的名字是 <span property="v:name">億企邦</span>，
　　 我的博客是<span property="v:nickname">億企邦</span>。
　　 我的主頁(yè)是：
　　 <a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。
　　 我住在楊浦區(qū)（上海市）。我是<span property="v:title">SEO</span>，
　　 目前在<span property="v:affiliation">SEO公司</span>上班。
　　</div>

下面億企邦就對(duì)此示例進(jìn)行詳細(xì)說(shuō)明：

（1）、該示例的開頭為使用xmlns的命名空間聲明，表示指定詞匯表（實(shí)體及其組件列表）所在的命名空間。您可以隨時(shí)使用xmlns:v="http://rdf.data-vocabulary.org/#" 命名空間聲明對(duì)包含人物、評(píng)論、商品或地點(diǎn)數(shù)據(jù)的網(wǎng)頁(yè)進(jìn)行標(biāo)記。請(qǐng)務(wù)必使用結(jié)尾斜線和#號(hào)(xmlns:v="http://rdf.data-vocabulary.org/#")。

（2）、同樣，第一行中的typeof="v:Person"表示所標(biāo)記的內(nèi)容代表的是人物。typeof屬性名稱帶有前綴 v: (typeof="v:Person")

（3）、該人物的各個(gè)屬性（例如其姓名或昵稱）均用property進(jìn)行標(biāo)記。屬性名稱帶有前綴v: (<span property="v:nickname">)。

（4）、要顯示網(wǎng)址，請(qǐng)使用rel代替property，例如：<a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。請(qǐng)務(wù)必帶上前綴v。"rel" 用于描述兩個(gè)實(shí)體之間的關(guān)系，本例中指的是人物實(shí)體和網(wǎng)頁(yè)實(shí)體之間的關(guān)系。

2、嵌套項(xiàng)

以上示例顯示的是億企邦的聯(lián)系信息。其中包含了他的地址，但是沒(méi)有指明他與該地址之間的關(guān)系。

在一種信息類型中包含另一種信息類型是很常見的。在本例中，我們想將Bob的地址信息(typeof="v:Address")加入到typeof="v:Person"實(shí)體中。因此，我們?cè)诖耸褂胷el表示Bob（實(shí)體 v:Person）與其地址（實(shí)體 v:Address）之間的關(guān)系。然后，我們使用 <span typeof="v:Address"></span> 包含實(shí)際的地址實(shí)體。如下所示：

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Person">
　　 我的名字是 <span property="v:name">億企邦</span>，
　　 我的博客是 <span property="v:nickname">億企邦</span>。
　　 我的主頁(yè)是：
　　 <a href="http://www.mahaixiang.cn" rel="v:url">www.mahaixiang.cn</a>。
　　 我住在
　　 <span rel="v:address">
　　 <span typeof="v:Address">
　　 <span property="v:locality">楊浦區(qū)</span>，
　　 <span property="v:region">（上海市）</span>
　　 </span>
　　 </span>
　　 我是<span property="v:title">SEO</span>
　　 目前在<span property="v:affiliation">SEO公司</span>上班。
　　</div>

3、隱藏的內(nèi)容

一般情況下，Google不會(huì)顯示隱藏的內(nèi)容。也就是說(shuō)，不向用戶顯示某些內(nèi)容，而是使用隱藏文本為搜索引擎和網(wǎng)絡(luò)應(yīng)用程序單獨(dú)標(biāo)記信息。您應(yīng)該標(biāo)記用戶訪問(wèn)您的網(wǎng)頁(yè)時(shí)實(shí)際看到的文本。

但是在某些情形下，向搜索引擎提供更為詳細(xì)的信息是很有用的，即使您不希望訪問(wèn)您網(wǎng)頁(yè)的人看到該信息。例如，提供場(chǎng)地的經(jīng)緯度可幫助Google正確地將其在地圖上顯示出來(lái)，而采用ISO日期格式提供活動(dòng)的日期則有助于將它正確地顯示在搜索結(jié)果中。

在此例中，您可以使用content屬性表示豐富網(wǎng)頁(yè)摘要的解析器應(yīng)該使用這個(gè)屬性值來(lái)查找活動(dòng)的開始日期。如下所示：

<span property="v:dtstart" content="2009-10-15T19:00-08:00">2009年10月15日晚上7點(diǎn)</span>

億企邦點(diǎn)評(píng)：

雖然說(shuō)Google是推薦使用微數(shù)據(jù)，不過(guò)也接受以上的兩種格式。所以您無(wú)需事先了解這些格式，只要了解 HTML基礎(chǔ)知識(shí)即可?，F(xiàn)在現(xiàn)在需要的就是參考以上結(jié)構(gòu)化數(shù)據(jù)標(biāo)記幫助文檔了解如何將微數(shù)據(jù)添加到自己的網(wǎng)站。