Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

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

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

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

    ?View Code HTML4STRICT

    <div id=”demo”>
    <h3>demo標題</h3>
    <p>內容內容內容內容內容<a href=”#” onclick=”alert(‘連結’);”>連結</a></p>
    </div>

    正確範例

    ?View Code HTML4STRICT

    <script type="text/javascript">
    <!-- <![CDATA[
    $(function() {
        $('#demo p a').click(function() {
            alert(‘連結’);
        });
    });
    // ]]> -->
    </script>
    <div id=”demo”>
    <h3>demo標題</h3>
    <p>內容內容內容內容內容<a href=”#”>連結</a></p>
    </div>
  • 重要的內容放前面

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

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

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

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

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

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

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

 

Leave a Reply

*