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/
其實大部份的實驗這個網站都己經做了，不過我想配合一些情境和需求再做一些實驗。
Performance Review 也稱績效考核或年度自我評量 引用至 WIki 譯自英文-績效考核、績效評估，有時縮寫為“ PA”，是一個定期，系統的過程，通過此過程可以記錄和評估員工的工作績效。這是在員工接受工作培訓並安頓下來之後進行的。績效評估是職業發展的一部分，包括對組織內部員工績效的定期審核。績效評估通常由員工的直屬主管進行。wiki: https://en.wikipedia.org/wiki/Performance_appraisal Performance Review 關係到薪資、升遷和薪水習習相關! 你怎麼能不重視呢~ 一般公司的 Review 大概是，主管搜集…
Laravel Eloquent whereIn() 每個人都用過，但你曉得但 whereIn() 量大時，可能會造成查詢緩慢問題之一嗎? 他不一定是資料 index 索引的問題，可能是更底層問題喔這邊提供一個 Laravel 資料庫查詢效能優化的手式 Laravel 查詢緩慢的情境 常有的需求是使用指定的 id…
錯誤追蹤、回報非常重要，看到的錯誤才知道怎麼修。現今 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 的關係會將所有相關環境都轉移到…
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 絕對是沒問題!
用 `固定網址` 或是 `網址參數` 都看過，都是可行的
比較重要是，一個網頁內容和一個不變網址比較重要
簡單來說~
一家商店的地址不要換來換去對客人來說是最重要的!!