seo and hidden text, hidden content
文章目錄:
這篇文章前，應該再補一篇 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 tag。
有時候我們會使用他來包裝商品資訊或是重要內容或多或少我們也會希望 SEO 不要太差，至少能被收錄。
下面是一個 textarea 區塊，內容包含了一般訊息. 分別為畫面直接可見內容與畫面不可見內容(需要捲動)
呈現效果~
等待 2018-08-05 結果…
Google 對 textarea 標籤內的文字的收錄情況
利用 div 呈現垂直捲軸，通常被拿來當做選單列表或是文章列表，例如…
呈現效果，這個畫面應該不適用 mobile 畫面 😵
等待 2018-08-05 結果…
Google 對垂直捲軸內容的收錄情況
水平捲軸是目前電商網站最常使用的方式。
可以在每個小區塊中(card)，包裝較多的商品內容，不曉得這樣的做法 SEO 效果如何? Google 是否能正常收錄?
呈現效果~
等待 2018-08-05 結果…
Google 對水平(橫向)捲軸內容的情況
ps: 水平捲軸 seo 的實際情況，捲軸右側的內容是有被 Google 處理的
以 https://mamilove.com.tw/market/category/event/newborntoys-curation 為例..
除了 css 可以這麼處理之外，大家也常常使用 js 去隱藏文字內容。多數是附註內容，或是商品規格、圖片說明這類的文字內容…
(wordpress 裡要呈現這樣的內容，真有點麻煩。😓)
內容一開始就寫在 html 裡
()
內容頁面一載入就送出 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 的效果、影響就會被扣分。
他們認為如果是對使用者重要的內容，就應該直接被顯示出來，而不是隱藏他。
重要的內容，應該在畫面第一個位置呈現出來。
圖片 img tag 的 alt 屬性，對 seo 效果其實是有目共睹的。
不過還是做些小實驗~
以這篇文章所使用的圖片為例~
等待 2018-08-05 結果…
圖片 img alt 內容較大時 Google 的處理情況
在 google 以 robots-txt-search-console-googlebot-fetch 搜尋，能看到 img alt 有確實被處理，而且不單單在 google image search 而是 全部 類型的 Google Search~ 🤗
由此可知，img alt 對 SEO 的效果十分顯著!!
這裡使用 css 的 text-indent 將部份文字推出畫面外，這樣的隱藏內容 SEO 效果會如何呢?
另外，下面的圖片和文字訊息(文蓋圖)，使用 css position 完成, 文字和 alt Google 又會怎麼處理?
等待 2018-08-05 結果…
text-indent 在 Google 的呈現效果
圖片 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/
其實大部份的實驗這個網站都己經做了，不過我想配合一些情境和需求再做一些實驗。
錯誤追蹤、回報非常重要，看到的錯誤才知道怎麼修。現今 PHP 流行的 Laravel 有很好的 Error Tracking, Error Handling。但 plain PHP 怎麼辦呢? 在 production 為了安全考量會設定…
jenkins、circleci、travis 或 Gitlab CI 皆為目前暫知名的 CI/CD 服務，各自缺點也不言而喻...過於肥大、收費略高(?)、速度不夠快執問題...此時使用 go language 開發的 Drone 就出現啦，完全 docker 容器化的運行方式讓整個 CI…
網頁壓縮技術中 gzip 很好用，deflate 己經過時，但你聽過 brotli 嗎? 有著比 gzip 更好、更快的壓縮效率。看起來利大於弊有什麼不用他的理由嗎?簡單從優、缺點來看 brotli!到底 brotli 布羅特利是什麼、如何設定呢。 目前大多的 web server…
為什麼要讓本機使用 Docker 內 PHP? 情境... docker 容器內用的是 PHP 7.4 但你的開發本機還在跑 PHP 5.6 或是更舊，因為 dockerize 的關係會將所有相關環境都轉移到…
為什麼你需要密碼管理工具現代人一天下來需要輸入多少組密碼，工作與生活己經和密碼密不可分! 除了足夠全安的密碼，密碼記錄、儲存的方式又足夠安全嗎?密碼管理工具可以帶來什麼幫助呢? 為什麼你需要密碼管理工具 資安問題!!大多人說著沒做壞事不怕被偷資料、監聽。嚴重曝露出現代人的基本科技素養的低落和無知 🤯 密碼的使用無所不在!! 行動裝置的普及，APP 、手機遊戲、銀行帳戶所有和生活相關的東西都需要密碼!!facebook, line 只要打開 APP 也會輸入密碼只是他是自動輸入、一般情況不可視 (auth token) 一般人最常發生的密碼資安問題…
mysql 資料表分區 mysql table partition 從架構上調整 mysql 的查詢效率。mysql DB 的優化可以簡單也能複雜，除了調整設定值。也可以透過水平分割(Horizontal Partitioning)、垂直分割(Vertical Partitioning) 分庫或分表將資料分散儲存減少資料搜尋、group by 時的效能消耗。拆開批次處理，理論上效率都會變好，本文就水平分割的…
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 絕對是沒問題!
用 `固定網址` 或是 `網址參數` 都看過，都是可行的
比較重要是，一個網頁內容和一個不變網址比較重要
簡單來說~
一家商店的地址不要換來換去對客人來說是最重要的!!