語意網 - HTML5文件的段落和綱要 (Semantic Web - Sections and Outlines of an HTML5 Document)

最近有個朋友做了網站優化，才調整HTML5 Outline就讓該網站被Index的頁面快速增加。一個好懂的網頁能讓搜尋引擎有效爬完讀懂，而且優化成本相對不大。如果要開始做SEO，從頁面HTML結構開始做起，是較簡單、CP值又高的好選擇。

搜尋引擎在解析HTML時，主要是由標籤語義、段落結構與Heading Tags來了解重點所在。標籤語義這比較簡單，就是什麼情境用什麼標籤。例如：是表格就用<table>，是清單就用<ul>(無序)或<ol>(有序)，是表單就用<form>等。以下主要說明搜尋引擎怎麼從HTML結構與Heading Tags來看懂頁面重點。

HTML4如何表達文件段落？

過去在HTML4的世界裡面，如果想要將文件(Document)分出段落結構，只能使用<div>和Heading Tags(<h1>~<h6>)來表達。例如：

<div class="section" id="section-first">
    <h1>遠計的作到產好上上聯程要構</h1>
    <div>
        國試用賽好人想。以特營濟業真只！候驚的……起也友道在從其學：相麼無人品。智放氣金理來新上來我，推數學、亮是加形其於生子，獨縣有：下家義洋得，文銀的天環事議。何全感足陸故登臺則要看是存有王備是再改還上一進生不們隨！業坐上輕至於合正公是古爾口一的者。
        <div class="subsection" id="section-second">
            <h2>要自於的演一來</h2>
            <div>是工國統品化過集之參認事火，洋還反我我下的室時聽後的民度國麼。</div>
            <h3>言快放一容人</h3>
            <div>都差星化化說文一處國愛以。</div>
        </div>
    </div>
</div>

Outline解讀如下：

語意網 - HTML5文件的段落和綱要 (Semantic Web - Sections and Outlines of an HTML5 Document)

由解讀結果可知，「遠計的作到產好上上聯程要構」是這個頁面的標題，意即這個頁面的主旨。而這個頁面包含一個段落，其標題為「要自於的演一來」，並包含一個子段落，標題是「言快放一容人」。　　

在HTML4中，我們使用<div>或Heading Tags(<h1>~<h6>)這樣隱性又不明確的方式劃分段落。而且，為了保留<h1>作為文件標題用，之後的段落標題必須要從<h2>開始。對於結構簡單的頁面來說，解讀是容易的。但在現實世界中，頁面結構往往非常複雜，而且，在切版的時候，<div>除了定義段落或子段落外，很多時候是用來做CSS Style或Javascript效果的，這時不管對開發者、搜尋引擎或輔助工具(例如：閱讀機)來說，判讀都容易造成誤會。

HTML5解決了HTML4什麼問題？

HTML5帶來了一些新的元素，讓開發者能運用這些有意義的的標籤來清楚表達文件的語義和結構。例如：能明確定義區塊的標籤、開放使用多個<h1>(關於HTML5標籤可參考 HTML5 Introduction)。

HTML5中用來定義段落的元素：

<section>：明確定義段落或子段落範圍。
<article>：定義獨立內容。
<nav>：定義導航列。
<aside>：定義側邊欄。

注意，段落元素，需要有Heading Tags。並且文件並不是都線性閱讀的，有可能是導航列、側邊欄或其他元素，因此當使用<nav>和<aside>便能將這些區塊與主內容隔開。

如何使用HTML5表達文件段落？

將上面的範例使用HTML5的段落元素修改如下。

<section class="section" id="section-first">
    <h1>遠計的作到產好上上聯程要構</h1>
    <div>
        國試用賽好人想。以特營濟業真只！
        候驚的……起也友道在從其學：相麼無人品。
        智放氣金理來新上來我，推數學、亮是加形其於生子，
        獨縣有：下家義洋得，文銀的天環事議。
        何全感足陸故登臺則要看是存有王備是再改還上一進生不們隨！
        業坐上輕至於合正公是古爾口一的者。
        <section class="subsection" id="section-second">
            <h2>要自於的演一來</h2>
            <div>是工國統品化過集之參認事火，洋還反我我下的室時聽後的民度國麼。</div>
            <article>
                <h3>言快放一容人</h3>
                <div>都差星化化說文一處國愛以。</div>
            </article>
        </section>
    </div>
</section>

Outline解讀為：

語意網 - HTML5文件的段落和綱要 (Semantic Web - Sections and Outlines of an HTML5 Document)

在這裡，我們就可以看到，「遠計的作到產好上上聯程要構」不再解讀為頁面標題，而是段落標題 (此時頁面標題是untitled section)。段落標題仍是「要自於的演一來」，其子段落標題也仍是「言快放一容人」。關於頁面標題的討論請繼續往下看。　　　　

Multiple `<h1>`

過去一個頁面只能有一個<h1>存在來表達此頁面的主題，這是由於在段落隱晦不明確的狀況下，<h1>被保留用來定義整份文件的主題，而文件中的段落標題就被迫降級，只能從<h2>開始。但在HTML5時代，因為定義段落的元素出現，能明確定義段落或子段落範圍，因此多個<h1>被允許，我們只要注意文件中的第一個<h1>會被解讀為文件標題即可。範例如下：

<h1>安同牛配片華你是藝</h1> <!-- 文件標題 -->
<section class="section" id="section-first">
    <h1>遠計的作到產好上上聯程要構</h1> <!-- 段落標題 -->
    <div>
        國試用賽好人想。以特營濟業真只！
        候驚的……起也友道在從其學：相麼無人品。
        智放氣金理來新上來我，推數學、亮是加形其於生子，
        獨縣有：下家義洋得，文銀的天環事議。
        何全感足陸故登臺則要看是存有王備是再改還上一進生不們隨！
        業坐上輕至於合正公是古爾口一的者。
        <section class="subsection" id="section-second">
            <h2>要自於的演一來</h2> <!-- 段落子標題 -->
            <div>是工國統品化過集之參認事火，洋還反我我下的室時聽後的民度國麼。</div>
            <article>
                <h3>言快放一容人</h3> <!-- 段落次子標題 -->
                <div>都差星化化說文一處國愛以。</div>
            </article>
        </section>
    </div>
</section>

Outline解讀如下：

語意網 - HTML5文件的段落和綱要 (Semantic Web - Sections and Outlines of an HTML5 Document)

由以上範例可知，頁面標題為「安同牛配片華你是藝」，段落標題為「遠計的作到產好上上聯程要構」、段落子標題為「要自於的演一來」和段落次子標題為「言快放一容人」。

結論

頁面段落結構、標題分明有助於開發者、搜尋引擎或輔助工具(例如：閱讀機)的重點解讀。
HTML5解決過去一個頁面只能使用一個<h1>的限制、段落元素能清楚定義段落範圍。

今年年初才慎重地跟SEO說再見，沒想到在新工作上又重操舊業啦！

參考資料

Sections and Outlines of an HTML5 Document：簡單說明HTML5對段落區隔的改進。
The Truth About Multiple H1 Tags in the HTML5 Era：這篇文章清楚解說HTML5解決HTML4的哪些問題，例如段落解析、為什麼只能使用一個<h1>，並附上詳細範例。

搜尋此網誌

Summer。桑莫。夏天