站長(zhǎng)之家（ChinaZ.com）:傳統(tǒng)上，當(dāng)谷歌（或其他搜索引擎）尋找基于文本的內(nèi)容來(lái)索引時(shí)，他們希望能直接在所提供網(wǎng)頁(yè)的HTML中找到這些內(nèi)容。

隨著越來(lái)越多的網(wǎng)站開(kāi)始使用JavaScript來(lái)服務(wù)局部?jī)?nèi)容，并逐漸應(yīng)用到整個(gè)網(wǎng)站，這種情況有所改變。

谷歌被迫投入資源，試圖盡可能有效地呈現(xiàn)和索引基于JavaScript的內(nèi)容。

CSS 偽元素

那么純粹使用CSS的文本內(nèi)容是怎樣的呢?（站長(zhǎng)之家注:CSS偽元素是用來(lái)添加一些選擇器的特殊效果，例如可用于:設(shè)置元素的首字母、首行的樣式、在元素的內(nèi)容之前或之后插入內(nèi)容等情景。）

比如使用CSS偽元素（如::before和::after）結(jié)合CSS content屬性向頁(yè)面添加內(nèi)容。下面是一個(gè)簡(jiǎn)單的例子，在一段文字分別采用了HTML和CSS樣式。

前半句采用HTML語(yǔ)言:

<p>99bottlesofbeeronthewall，99bottlesofbeer.</p>

后半句采用CSS語(yǔ)言：

p::after{content:'Takeonedownandpassitaround，98bottlesofbeeronthewall.'}

最終展示效果為:

99bottles of beer on the wall，99bottles of beer. Take one down and pass it around，98bottles of beer on the wall.

隨著CSS變得越來(lái)越先進(jìn)，并且引入了其他功能，例如只使用CSS進(jìn)行數(shù)學(xué)計(jì)算或計(jì)算元素的能力，開(kāi)發(fā)人員和設(shè)計(jì)人員采用這些功能的可能性變得更高。

文本中使用CSS是最佳做法嗎?

但是谷歌能夠呈現(xiàn)和索引這些內(nèi)容嗎?在CSS中找到的文本會(huì)出現(xiàn)并在谷歌中搜索到嗎?在文本中使用CSS是最佳做法嗎?

需要注意的是，在大多數(shù)情況下，使用CSS偽元素和'content'屬性（而不是HTML）來(lái)顯示網(wǎng)站上的大量文本內(nèi)容絕對(duì)不是最佳做法，原因有很多，包括:

• 用戶不能選中文本，這意味著它不能被突出顯示或復(fù)制/粘貼

• 文本將被屏幕閱讀器忽略，使內(nèi)容難以訪問(wèn)，并違反可訪問(wèn)性準(zhǔn)則。

一般來(lái)說(shuō)，CSS偽元素一般只應(yīng)用于裝飾元素，這些元素對(duì)頁(yè)面上的內(nèi)容的使用是不必要的。

測(cè)試

為了能明確知道CSS偽元素在谷歌呈現(xiàn)和索引效果，國(guó)外程序員（Colin McDermott）執(zhí)行一個(gè)測(cè)試。

Colin 通過(guò)創(chuàng)建了一個(gè)包含零標(biāo)準(zhǔn) HTML 內(nèi)容的頁(yè)面，并使用CSS 偽元素添加了文本內(nèi)容——包含標(biāo)題、段落、div和鏈接標(biāo)簽的部分。

如果你想了解完整代碼和結(jié)果頁(yè)面，可以點(diǎn)擊這里查看。

谷歌呈現(xiàn)的效果

為了進(jìn)行測(cè)試，Colin 還通過(guò)谷歌站長(zhǎng)工具Search Console 中的 Fetch 工具和 Mobile Friendly測(cè)試工具運(yùn)行了該頁(yè)面。

兩者都表明 谷歌能夠完全呈現(xiàn)頁(yè)面上普通用戶看到的 CSS 內(nèi)容。

CSS偽元素索引結(jié)果

最終，盡管完全缺乏內(nèi)容，該頁(yè)面還是在谷歌上建立了索引。

然而，查看谷歌結(jié)果列表，并從頁(yè)面中搜索文本字符串后，很明顯沒(méi)有實(shí)際的內(nèi)容被索引。

總結(jié):

因此，我們可以從這個(gè)測(cè)試中確認(rèn):雖然谷歌可以呈現(xiàn)CSS偽元素效果，但基于CSS的內(nèi)容目前不會(huì)被谷歌索引。

也就是，如果你在的網(wǎng)站上使用CSS偽元素和CSS“content”屬性上包含文本內(nèi)容，谷歌目前不可能對(duì)這部分文本內(nèi)容進(jìn)行索引。

站長(zhǎng)之家注:Colin McDermott完整的測(cè)試過(guò)程可點(diǎn)擊這里查看他分享的原文內(nèi)容。

（舉報(bào)）