SEO

隱藏內容對 SEO 的影響 - 2018

有關 2018 年隱藏內容對 Google SEO 的影響與 index 的收錄效果。
因為網頁前端技術盛行及畫面設計UI/UX需求,隱藏內容、隱藏文字(hidden text)己經是頁面上不可避免的一部份。這樣的文字內容對 Google SEO 的影響會是如何呢?
諸如, 利用 css overflow, display none、或是 js 動態方式顯示、隱藏的內文。這些內容都能被 Google 正常爬取收錄嗎?
本篇除了一些教學分享,我也做了些簡單的小實驗。

 

文章目錄:

隱藏內容對 Google 的影響

這篇文章前,應該再補一篇 ReactJS, Vue.js (前端動態內容) 對 SEO 的影響,可是我一直拖稿 😓
不過先做總結,javascript 產生的動態內容,Google 目前是可以正常爬取的哦!

使用 Google Search Console 能看到爬蟲的處理結果,js 能被正常處理,只能文字訊息出現在畫面上,皆能被 google 正常收錄!
以 http://mamilove.com.tw/mall/food 為例
Google 模擬器擷取並轉譯畫面,能將 js 處理後的頁面完美呈現出來,己經不需要再擔心 js 動態內容與 seo 問題了

 

那麼隱藏型的內容呢? 這裡指的不是將文字藏於背景色裡那種爛手段。
而是因為版型、版面需求隱藏的內容,如 橫向捲軸看更多連結(load more)或是 輪播 banner
因為美觀或功能上的需求,不直接顯示內文在畫面,這樣的內容也能被 google 收錄嗎?

下面,我除了做些說明,也會做些小實驗,在這篇文章上線後過一陣子回來驗收 google 收錄結果
想要達到的目標是:隱藏內容是否能被正常收錄。Google SERP 排名就不討論了

 

以 https://mamilove.com.tw/mall/toy 為例,在電商網站常見的橫向捲動商品列表。
mobile 畫面,常見的橫向捲動商品列表
在捲軸更右側不直接顯示的內容也能被收錄嗎?

textarea 標籤內的文字內容

開始,我們先討論個簡單的 textarea tag。
有時候我們會使用他來包裝商品資訊或是重要內容或多或少我們也會希望 SEO 不要太差,至少能被收錄。

下面是一個 textarea 區塊,內容包含了一般訊息. 分別為畫面直接可見內容與畫面不可見內容(需要捲動)

 

呈現效果~
textarea 與 seo 的關係,試著實驗捲軸外的內容,是否能被正常收錄
 
等待 2018-08-05 結果...
Google 對 textarea 標籤內的文字的收錄情況

垂直捲軸內容與 SEO

利用 div 呈現垂直捲軸,通常被拿來當做選單列表或是文章列表,例如...

🌚如何破解鎖右鍵的網站, 利用開發人員工具(開發者模式)! - 當初寫這篇文章主要是希望教會文字操作人員學會一點簡單、基本的 chrome dev tools
不過很多時候在處理 seo 內容、檢驗的時候也很實用(笑)
😑 什麼是API? - 這算是第一篇文章,很多地方還需要改進,當然內容其實也是為了 SEO 而寫的。好的文章內容才有好的 SEO 結果! 當然說明不盡完整,但是主要目的除了 SEO 也想讓非工程人員更暸解 API 是什麼。
🔥 實例網站解說什麼是 Landing Page ? - 本站出乎意料火紅的一篇文章,由 野湯姆 提供,我由簡報轉為文章。內容簡單易懂!
💩 軟體工程師的職業道德!Code 的靈魂! - 有感而發的一篇文章,不太喜歡說這些東西,只是真的有太多工程師,不把責任感當一回事而讓我一肚子火。封面出自 `大東京電玩箱`

 

呈現效果,這個畫面應該不適用 mobile 畫面 😵
div 與 css 簡單製作的垂直捲軸容器,其實在 wordpress 裡製作這樣的東西不太方便,而且有點麻煩(苦笑)。不過弄個網站出來做測試也不簡單,希望這樣簡單的方式能拿到想要的效果。另外這裡的文字主要是測試 alt 內包含較多的文字訊息時,google 是否能正常抓取其內容。在這篇文章每個圖片都有插入適單的 alt 內容,利用這個垂直捲軸示意圖置入較多的文字訊息。
 
等待 2018-08-05 結果...
Google 對垂直捲軸內容的收錄情況

水平捲軸內容與 SEO

水平捲軸是目前電商網站最常使用的方式。
可以在每個小區塊中(card),包裝較多的商品內容,不曉得這樣的做法 SEO 效果如何? Google 是否能正常收錄?

🤖 [PHP] 實做 AES 資料加密(含範例) - 雖然不如 RSA 的好處,但是也有需要用到的時候
🤐 [PHP] 範例實做 RSA, 公鑰、私鑰非對稱加密、解密演算法 - 串接 iOS,Android - 近期應該再補充一篇文章內容,補足未提到的部份。
🤭 老王賣瓜,自賣自誇!你應該行銷你自己! - 有不少工程師認為,行銷自己是為了出峰頭,其實不然。多數時候,行銷自己這個能力,是為了讓別人家知道你會這個或是讓別人說明功能,而不單單只是那麼表面的目的(笑). 畫面出自天然萌少女明日香
📺 Youtube 影片的 SEO,展開影片建立逐字稿 - 行動裝的流行讓多媒體(影片、圖片)更為流行,當然寫這篇文章是為了讓大家暸解影片 SEO 的重要性。不過內容應該再更新了,可以補充的內容不少...

呈現效果~
水平捲軸內容的 seo 效果實驗
 
等待 2018-08-05 結果...
Google 對水平(橫向)捲軸內容的情況

 

ps: 水平捲軸 seo 的實際情況,捲軸右側的內容是有被 Google 處理的
以 https://mamilove.com.tw/market/category/event/newborntoys-curation 為例..
水平捲軸 seo 的實際情況

hidden text 隱藏型內容對 SEO 的影響

除了 css 可以這麼處理之外,大家也常常使用 js 去隱藏文字內容。多數是附註內容,或是商品規格、圖片說明這類的文字內容...
(wordpress 裡要呈現這樣的內容,真有點麻煩。😓)



一般來說版面上處處是黃金,每個版面都很重要,我們會把較多的文字訊息次要內容先隱藏起來。再引導有興趣的使用者使用 `點擊展開` 、`看更多` 按鈕,打開更多文字訊息。這樣的隱藏內容有很大的機率不被 google 收錄、影響 SEO。隱藏內容不會直接呈現在畫上,Google Bot 也無法得知點擊什麼位置可以看到更重要的內容...

 

內容一開始就寫在 html 裡
()

被任何方式隱藏的內容,是否能被抓取?
因為這裡的內文沒有直接呈現在畫面上,就 Google 目前的處理方式有很大的機會不被收錄。
這個小實驗的目地想檢視隱藏文字的 SEO 的影響。
雖然原始碼裡有, 因為是寫 wordpress 上還有個情況無法測試.. 隱藏文字且透過 js ajax 取得。

 

內容頁面一載入就送出 ajax 請求
()

這裡是利用 jQuery AJAX 取回的文字內容...

 

內容只在點擊後送出 ajax 請求
(

👆點我看更多 Click Read More - JS ajax - 使用 div tag

)

也時候大家也常用 div tag 做為隱藏內容的展開觸發點,不確定這樣的 div 會不會被 google 遺忘...

 


設定 a tag 並給於參數,讓他有識別連結;內容只在點擊後送出 ajax 請求
(https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/?test-hidden-text-ajax=true#hidden-content-url)
(👆點我看更多 Click Read More - 有識別連結 - JS ajax - 使用 a tag)

利用 url 參數,讓這個內容有唯一識別連結 "test-hidden-text-ajax",只要使用這個連結進入就預設取得隱藏內容。

 

呈現效果,點擊後展開隱藏內容
透過按鈕隱藏、顯示的內容

 
等待 2018-08-05 結果...
display none 與 JS Ajax 類型隱藏內容對 SEO 的影響

 

Google Bot(爬蟲)的開發者說,隱藏內容還是能被收錄,但是對 SEO 的效果、影響就會被扣分。
他們認為如果是對使用者重要的內容,就應該直接被顯示出來,而不是隱藏他。
重要的內容,應該在畫面第一個位置呈現出來。

其它 - SEO 與 img alt 類型的隱藏內容

圖片 img tag 的 alt 屬性,對 seo 效果其實是有目共睹的。
不過還是做些小實驗~
以這篇文章所使用的圖片為例~

 

alt + 一般訊息量
alt 裡,包含一般訊息量

 

alt + 大量訊息
alt 裡,包含大量的文字訊息

 
等待 2018-08-05 結果...
圖片 img alt 內容較大時 Google 的處理情況

 

 

以之前的舊文來看 img alt 的效果~
為圖片加上 alt 訊息

在 google 以 robots-txt-search-console-googlebot-fetch 搜尋,能看到 img alt 有確實被處理,而且不單單在 google image search 而是 全部 類型的 Google Search~ 🤗
在 google 以 alt 內容搜尋
由此可知,img alt 對 SEO 的效果十分顯著!!

利用 css text-indent 對 SEO 的影響?

這裡使用 css 的 text-indent 將部份文字推出畫面外,這樣的隱藏內容 SEO 效果會如何呢?
另外,下面的圖片和文字訊息(文蓋圖),使用 css position 完成, 文字和 alt Google 又會怎麼處理?

使用 css text-indent 將文字推出容器,這樣的做法對 SEO 的效果又會是如何呢?
seo and hidden text 這張圖片使用 css position absolute 使之指定位置。

使用 css position absolute 將文字覆蓋於圖片上方,製做出文蓋圖片的效果. 圖片出自 jessewashere.com 我想表達出,頁面上一點點文字,檯面下一大包訊息

 
等待 2018-08-05 結果...
text-indent 在 Google 的呈現效果

 

總結 - 隱藏型內容對 SEO 的影響

圖片 img tag 一定要加 alt:
這個對 SEO 非常重要,也常常被遺漏。如果你的版型有許多圖片,且上、下文沒有文字說明圖片的目地、內容。
那麼為你的圖片加上 alt 就更重要了!!

hidden text 隱藏內容:
上面各個實驗結果, 待下週見曉 (8/5)
請您移至解答篇!!
解釋隱藏內容對 SEO 的影響 - 2018

 

 

 

 

參考來源:
ref. Long Term Hidden Text Experiment - https://www.rebootonline.com/blog/hidden-text-experiment/
其實大部份的實驗這個網站都己經做了,不過我想配合一些情境和需求再做一些實驗。

發表迴響