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 為例

 

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

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

 

以 https://mamilove.com.tw/mall/toy 為例,在電商網站常見的橫向捲動商品列表。

在捲軸更右側不直接顯示的內容也能被收錄嗎?

textarea 標籤內的文字內容

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

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

 

呈現效果~

 
等待 2018-08-05 結果…
Google 對 textarea 標籤內的文字的收錄情況

垂直捲軸內容與 SEO

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

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

 

呈現效果,這個畫面應該不適用 mobile 畫面 😵

 
等待 2018-08-05 結果…
Google 對垂直捲軸內容的收錄情況

水平捲軸內容與 SEO

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

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

呈現效果~

 
等待 2018-08-05 結果…
Google 對水平(橫向)捲軸內容的情況

 

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

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 + 大量訊息

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

 

 

以之前的舊文來看 img alt 的效果~

在 google 以 robots-txt-search-console-googlebot-fetch 搜尋,能看到 img alt 有確實被處理,而且不單單在 google image search 而是 全部 類型的 Google Search~ 🤗

由此可知,img alt 對 SEO 的效果十分顯著!!

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

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

使用 css text-indent 將文字推出容器,這樣的做法對 SEO 的效果又會是如何呢?
使用 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/
其實大部份的實驗這個網站都己經做了,不過我想配合一些情境和需求再做一些實驗。

可樂

View Comments

  • I usually hang out in a Facebook group for content writers. A group memberjust posted about INK

  • Hi 可樂

    我最近在整理「動態內容」的資料,據了解它可能是 2020年網站規劃的一個趨勢。
    所謂動態內容指,網頁上可能會呈現會員註冊的暱稱、反應過去的瀏覽習慣、搜尋記錄
    甚至是在 Google搜尋關鍵字後,將這個關鍵字與網頁相關字進行替換 (如同 GAD 裡的關鍵字插入)
    目的是提供該客戶最適合的內容(或推薦商品)

    國內目前比較多人在談動態網址對seo的影響,但鮮少有資料在說明動態內容
    不知您對此是否有研究 ?

    • 說有研究可能太自大~
      我就我自身實作經驗和結果分享一下
      回應你的問題,也許你可以參考、研究一下 dev.to 的做法

  • 我想補充我的看法

    上述動態內容可能涉及的作法分為:固定網址動態內容、網址參數動態內容
    無論那種作法,都會有內容相似性的問題,所以 SEO 的處理會提供一個主要網頁做為 Canonical 使用

    以上是我的推論.. 缺乏資料佐證 :P

    • 就我觀察,用 Canonical 絕對是沒問題!
      用 `固定網址` 或是 `網址參數` 都看過,都是可行的

      比較重要是,一個網頁內容和一個不變網址比較重要

      簡單來說~
      一家商店的地址不要換來換去對客人來說是最重要的!!

Recent Posts

plain PHP 搭配 Slack 進行錯誤追蹤、回報(Error Tracking、Error Handling)

錯誤追蹤、回報非常重要,看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…

4 years ago

Drone CI/CD 配合 Github 使用 Rsync 進行 Deploy

jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務,各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦,完全 docker 容器化的運行方式讓整個 CI…

4 years ago

Nginx brotli 設定

網頁壓縮技術中 gzip 很好用,deflate 己經過時,但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。看起來利大於弊有什麼不用他的理由嗎?簡單從優、缺點來看 brotli!到底 brotli 布羅特利是什麼、如何設定呢。 目前大多的 web server…

4 years ago

本機使用 Docker 容器內 PHP (wrapper/expose PHP)

為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊,因為 dockerize 的關係會將所有相關環境都轉移到…

4 years ago

為什麼你需要密碼管理工具

為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼,工作與生活己經和密碼密不可分! 除了足夠全安的密碼,密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及,APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…

4 years ago

簡單使用 Mysql Partition 優化查詢

mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜,除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理,理論上效率都會變好,本文就水平分割的…

4 years ago