SEO

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

我在 "隱藏內容對 SEO 的影響 - 2018" 這篇文章,針對隱藏式內容做了一些簡單的實驗,本篇將針對前篇文章說明、解釋隱藏內容對 SEO 的效果究竟是如何?
css display、javascript 或是 scroll 捲軸的各種隱藏式內容,到底 google 是否能正常抓取、收錄呢?

 

驗證 Google 是否確實收錄

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

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

利用 site 檢查網址搜尋的收錄狀態
(可以看出 "隱藏內容對 SEO 的影響 - 2018" 已經確實被 Google 搜尋收錄了!)

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

(回到索引)

textarea 標籤內的文字內容

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

預期:上一篇文章,在 textarea 置入片段文字 (目標內容)
textarea seo 的目標收錄位置

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

 

實驗結果:上半部為 textarea 的內容, 確實被 google 做為 seo 所用。下半部則是圖片 img alt 的效果。
textares 內容在 seo 的表現, 另外 img alt 的效果也十分顯著
(再次強調圖片 img alt 對 seo 的效果非常重要!!)

 

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

垂直捲軸內容與 SEO

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

預期:前篇文章,製造一個垂直捲軸容器 (目標內容)
垂直捲軸效下方的內容,是否能正常被 google 收錄

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

實驗結果:已經確實被 Google 收錄
垂直捲動區域的內容在 google seo 的效果

 

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

(回到索引)

水平捲軸內容與 SEO

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

預期:在前一篇文章,建立了一個水平(橫向)捲軸 (目標內容)
水平(橫向)捲軸預計被抓取的內容
(我挑選中後段的部份,確認是否有被 google 抓取)

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

實驗結果:測試內容確實有被 Google 收錄
水平(橫向)捲軸內容被 google 確實收錄

 

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

(回到索引)

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

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

預期:單純用 css display none 隱藏的內容
單純使用 css 設定 display none

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

實驗結果:雖然有出現查詢結果,但很奇怪的事 完整的查詢內文卻沒有出現 🤔
(這部份還有待調查...)
純 css display none 內容在 google serp

 

預期:利用jquery ready 後立即發出 request 並將內容放到隱藏區塊內
網頁載入後立即透過 ajax 取得內容

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

實驗結果:雖然有查詢結果有顯示其內容,但這個實驗有幾個變因:
1 - 網頁載入馬上發 request。
2 - 隱藏內容透過 label 點擊顯示。
無法分辨因為哪個因素令 google 收錄這個隱藏內容...
google search 收錄頁面載入後馬上利用 ajax 取得內容

 

預期:當使用者點擊後,才發出 ajax request 並展開隱藏區域
使用者點擊後,才發出 ajax 取得內容並展開隱藏內容

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

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

 

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

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

但上述方式,都還需要注意。最保險的方式還是多利用 Google Search Console 模擬器 做檢查
利用 googlebot-fetch 模擬器查看頁面呈現的樣子
(網頁在 googlebot 模擬器下的呈現結果)

(回到索引)

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

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

預期內容: 試著把大量的訊息放進 alt,看看這些文字能不能正常被 google 收錄
試驗,在 alt 裡置入大量的訊息

 

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

實驗結果:alt 裡有大量的訊息時,看起來似乎有正常被收錄(嗎?)
alt 內容較多時的結果...?

 

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

 

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

實驗結果:當圖片 img alt 的內容過多時,竟然會找不到其內容
在 2018-08-05 時,我在驗證效果時... 有些誤會
img alt 內容過多時,google 不收錄!!

 

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

實驗結果:訊息尾端的文字,也找不到
alt 內含大量訊息,似乎有些問題

&nbsp:

💡 小結:
因此我發現圖片 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 是沒有查詢結果的
img alt 超出 google 可收錄長度

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

(回到索引)

text-indent 對 SEO 的影響

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

預期:建立一個容器,並把容器內的文字推出去(text-indent)
text-indent 與 seo

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

實驗結果:看起來 text-indent 的 seo 效果不錯
css text-indent 在 seo 上的效果還不錯

 

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

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

實驗結果:css position absolute 的內容在,SEO 效果也不錯
css position absolute 在 google seo 的效果

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

(回到索引)

總結

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

發表迴響