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

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

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

CSS 偽元素

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

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

前半句采用HTML語言:

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

后半句采用CSS語言：

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變得越來越先進，并且引入了其他功能，例如只使用CSS進行數(shù)學(xué)計算或計算元素的能力，開發(fā)人員和設(shè)計人員采用這些功能的可能性變得更高。

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

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

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

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

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

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

測試

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

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

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

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

為了進行測試，Colin 還通過谷歌站長工具Search Console 中的 Fetch 工具和 Mobile Friendly測試工具運行了該頁面。

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

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

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

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

總結(jié):

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

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

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

（舉報）