171 月

HTML設計規範[6] 考量結構順序與佈局，提升網站SEO優化

• 採用無侵入性的設計概念以整合腳本語言

  所謂無侵入性的腳本設計，也就是本文最開始所提到的，把結構、樣式、行為分離的一種設計技巧，利用結構來設計樣式，利用結構來加入行為。如果要在某區塊加入一個JS效果，可以先在該區塊先設定好id或class或其他可運用的結構或屬性，這個技巧經常慣用的術語叫hook，就是代表一個樣式或行為的鉤子或觸發點。而不再用onclick、onblur…等這些語法直接加在結構上
  錯誤範例

  
  demo標題
  內容內容內容內容內容連結
  
  

  正確範例

  
  
  demo標題
  內容內容內容內容內容連結
  
  

• 重要的內容放前面

  網頁在呈現的時候，預設會依照HTML的資訊流，從上到下，從左而右的方向依序呈現，而利用CSS可以輕易地不管HTML結構順序而更動這個資訊流。所以HTML原始碼的資訊流應該要把重要的內容放在前面，即使是sidebar要放在左邊，還是要把最主要的內容放在前面，再利用CSS去改變內容呈現的順序，這樣做可以讓重要的內容盡早被解析，也更將有利於SEO。

• 保持漸進增強、平穩退化的設計準則

  所謂漸進增強是指當加上一些效果或功能時，不會對支援性較差的瀏覽器產生影響，相對的平穩退化便是指當拿掉該效果或功能後，版面也不能跑掉，在功能上也可以自動平穩降級的設計準則。這樣的設計概念是為了，如果使用者無法使用JS，也能讓版面維持正確的版型。要達到這樣的準則會建議先把版面調整好，並想好需不需要加上什麼hook來連動JS的效果，都做好之後再來加上JS，這時候再調整JS所需的CSS，或是對原本的CSS做微調，即使可能無法完全做到加上效果前後的版面都一樣(有些東西可能是JS加上去的)，但也要盡量確保版型不會跑掉。

• 考量及掌握搜尋引擎最佳化、可使用性、可訪問性、無障礙的運用

  搜尋引擎最佳化 (SEO)、可使用性 (Usability)、可訪問性 (Accessibility)，這些都是我們在做CSS Layout的目標。例如：當視覺給的版應當是文字呈現的標題，但卻是用一張圖表示時，這時候就可以用CSS的技巧 (Image Replacement) 來把文字標題替換成圖片。或者像是表單設計加上label來讓使用者更方便…等等方式。

• 標籤結構測試、跨瀏覽器相容測試

  當你做到以上幾點之後，還有一項很重要的工作等著你去確認，就是運用開發工具來確認你HTML的結構是否正確，這可以運用Firefox的附加元件，或是連到W3C的網站作檢查，除此之外，還需要檢查網頁在各個瀏覽器下版面是否正常，最起碼要檢查IE (IE6、IE7、IE8)、Firefox (Firefox2、Firefox3)，更完美的話可以再檢查Google Chrome、Safari、Opera。

 

Posted by admin  Posted on 17 1 月 

HTML, SEO

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。