因為網頁前端技術盛行及畫面設計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 呈現垂直捲軸，通常被拿來當做選單列表或是文章列表，例如…
不過很多時候在處理 seo 內容、檢驗的時候也很實用(笑)
呈現效果，這個畫面應該不適用 mobile 畫面 😵
等待 2018-08-05 結果…
Google 對垂直捲軸內容的收錄情況
水平捲軸內容與 SEO
水平捲軸是目前電商網站最常使用的方式。
可以在每個小區塊中(card)，包裝較多的商品內容，不曉得這樣的做法 SEO 效果如何? Google 是否能正常收錄?
呈現效果~
等待 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 請求
()
內容只在點擊後送出 ajax 請求
(
)
設定 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)
呈現效果，點擊後展開隱藏內容
等待 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 又會怎麼處理?
等待 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/
其實大部份的實驗這個網站都己經做了，不過我想配合一些情境和需求再做一些實驗。
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 使用
以上是我的推論.. 缺乏資料佐證 😛
就我觀察，用 Canonical 絕對是沒問題!
用 `固定網址` 或是 `網址參數` 都看過，都是可行的
比較重要是，一個網頁內容和一個不變網址比較重要
簡單來說~
一家商店的地址不要換來換去對客人來說是最重要的!!