解釋隱藏內容對 SEO 的影響 – 2018

驗證 Google 是否確實收錄

如何驗證 google 的收錄結果呢?
我利用 google 的 site 指令
這個方法，除了可以檢查網址是否已經被 google 收錄，也可以確認文字內容是否有出現在指定連結內。

查詢內容:
site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

(可以看出 “隱藏內容對 SEO 的影響 – 2018” 已經確實被 Google 搜尋收錄了!)

詳細方式，可以參考之前的文章： 怎麼知道 SEO (關鍵字) 成效如何?

(回到索引)

textarea 標籤內的文字內容

首先說明~ google 如何處理 textarea 內的文字內容
簡單的取出 textarea 內的部份文字： “早期文字訊息較多時，我們會利用 textarea 來包裝大量的文字訊息。像是使用者規範，法律訊息等…(不過這個方式，現今己經比較少見…)

預期：上一篇文章，在 textarea 置入片段文字 (目標內容)

查詢內容:
早期文字訊息較多時，我們會利用 textarea 來包裝大量的文字訊息。像是使用者規範，法律訊息等...(不過這個方式，現今己經比較少見...) site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：上半部為 textarea 的內容, 確實被 google 做為 seo 所用。下半部則是圖片 img alt 的效果。

(再次強調圖片 img alt 對 seo 的效果非常重要!!)

💡 小結：
👍textarea 的內容對 Google SEO 是有效的
👍👍圖片 img alt 在 SEO 上則是十分之非常有效!!
(回到索引)

垂直捲軸內容與 SEO

直接呈現於畫面的部份絕對能被 Google 收錄，但是畫面、捲軸外的內容呢?

預期：前篇文章，製造一個垂直捲軸容器 (目標內容)

查詢內容:
本站出乎意料火紅的一篇文章 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：已經確實被 Google 收錄

💡 小結：
👍 利用 div 建立的垂直捲軸容器，他的內容是能正常被 google 收錄的

(回到索引)

水平捲軸內容與 SEO

垂直捲軸內容對 SEO 是沒問題的，水平捲軸也是嗎?

預期：在前一篇文章，建立了一個水平(橫向)捲軸 (目標內容)

(我挑選中後段的部份，確認是否有被 google 抓取)

查詢內容:
寫這篇文章是為了讓大家暸解影片 SEO 的重要性 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：測試內容確實有被 Google 收錄

💡 小結：
👍 利用 div 和 overflow 都能正常被 google 收錄、處理的!

(回到索引)

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

這個部份，應該是大家最在意的一部份。
除了 css 的 display none、利用 js 與 ajax 顯示的內容在現今的前端技術更是基本中的基本。

預期：單純用 css display none 隱藏的內容

查詢內容:
被任何方式隱藏的內容 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：雖然有出現查詢結果，但很奇怪的事 完整的查詢內文卻沒有出現 🤔
(這部份還有待調查…)

預期：利用jquery ready 後立即發出 request 並將內容放到隱藏區塊內

查詢內容：
SEO最好能在網站發佈前 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：雖然有查詢結果有顯示其內容，但這個實驗有幾個變因：
1 – 網頁載入馬上發 request。
2 – 隱藏內容透過 label 點擊顯示。
無法分辨因為哪個因素令 google 收錄這個隱藏內容…

預期：當使用者點擊後，才發出 ajax request 並展開隱藏區域

查詢內容：
development-environment site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：這實驗也有點變因，我選擇的內容不是非常洽當….
但… 這種被動式的內容，似乎無法被正常收錄，這真是太可怕了!!

💡 小結：
👎 就上面實驗結論來說，Google 雖然能解析 javascript 內容，但對於 “被動” 的內容(需要被使用者點擊、觸發的類型) 好像沒有辦法處理。
個人建議： 重要的內容，請在畫面載入時就顯示在頁面上(簡單來說~ 避免使用 ajax 載入重要內容)

能正常被收錄的大概為…
– 網頁一載入即透過 JS 顯示
– 網頁一載入即透過 JS 取得
– 有明顯使用者觸發點(a tag, button tab, label tag)

但上述方式，都還需要注意。最保險的方式還是多利用 Google Search Console 模擬器 做檢查

(網頁在 googlebot 模擬器下的呈現結果)

(回到索引)

圖片 img alt 內含大量文字訊息時的 SEO 效果

從上的各個實驗結果看來，alt 的效果非常好。
但我們總是很貪心的想把 “更多” 的訊息、內容放進 alt 裡，效果又是如何呢?

預期內容： 試著把大量的訊息放進 alt，看看這些文字能不能正常被 google 收錄

查詢內容：
div 與 css 簡單製作的垂直捲軸容器 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：alt 裡有大量的訊息時，看起來似乎有正常被收錄(嗎?)

實際卻不是這樣…!!!
當~我想查詢更多的詳細資料時… 竟然是找不到的!

查詢內容：
div 與 css 簡單製作的垂直捲軸容器，其實在 wordpress 裡製作這樣的東西不太方便，而且有點麻煩(苦笑) site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：當圖片 img alt 的內容過多時，竟然會找不到其內容
在 2018-08-05 時，我在驗證效果時… 有些誤會

查詢內容：
利用這個垂直捲軸示意圖置入較多的文字訊息 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：訊息尾端的文字，也找不到

💡 小結：
因此我發現圖片 img alt 雖然能被收錄，但，請一定要注意內容長度。
最好能在置入前縮短其內容長度。
Google 也提供了一篇 “圖片建議” Google Image Publishing Guidelines (但並沒有提到文字長度限制)

(回到索引)

有關 img alt 最大長度的補充說明

在 2018-08-05 的時候，我在驗證 alt 最大長度時有誤會，誤以為 alt 內容過多時，google 會收錄不正常、會忽略。
其實是 google 對 alt 的最大長度有所限製，超過的內容，將不於以收錄，也就是超出的內容完全不會出現在 google SERP。

查詢內容：查詢約莫 46 字，並將關鍵字用 雙引號 包起來，確實指定要找一模一樣的文字內容
"div 與 css 簡單製作的垂直捲軸容器，其實在 wordpress 裡製作這樣的東西不太" site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：雖然出現提示，但確實有在頁面內找到對應文字

查詢內容：收錄不到的情況下，我在欲查詢關鍵字多加一字…
"div 與 css 簡單製作的垂直捲軸容器，其實在 wordpress 裡製作這樣的東西不太方" site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果： 可以看出， google SERP 是沒有查詢結果的

💡 小結：
👍 就實驗得知 Google 對圖片 img alt 的最大長度為： “中英文交錯的情況下約為 46 字左右”

(回到索引)

text-indent 對 SEO 的影響

利用 css text-indent 將文字內容推出容器，保持版面美觀的方式。個人認為這己經是灰帽 SEO 的手段了。

預期：建立一個容器，並把容器內的文字推出去(text-indent)

查詢內容：
使用 css text-indent 將文字推出容器，這樣的做法對 SEO 的效果又會是如何呢? site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：看起來 text-indent 的 seo 效果不錯

預期： css position absolute 的 div 容器內容

查詢內容：
頁面上一點點文字，檯面下一大包訊息 site:https://cola.workxplay.net/google-seo-and-hidden-text-and-hidden-content-at-2018/

實驗結果：css position absolute 的內容在，SEO 效果也不錯

💡 小結：
🤔 text-indent 效果非常好，實際上 pchome 24h 的 Logo 也使用這個方式。不過我個人不那麼推薦使用

(回到索引)

總結

• 👍👍 愈重要的內容(關鍵字)應該在文章(頁面)的愈前面露出
• 👍👍 圖片絕對要加上有意義、有效的 alt 內容
• 非必要避免(減少)使用隱藏內容，即使 Google 能解讀，其它家搜尋引擎也不一定能處理
• 目前看來 text-indent 效果良好，但不保證何時會被處罰! 😎