正確使用h1的方法？ （關於文件大綱和SEO）

Question

我還在努力讓自己熟悉HTML5，而且這些東西讓人感到有些困惑....

我曾經讀過Jeremy Keith的書和HTML5 Doctor（通過這個問題 ），它說HTML5可以使用多個h1 。 在HTML5中，每個部分都可以有自己的標題元素，因此可以有多個h1 。 我見過一個Wordpress主題框架， “下划線” ，似乎最充分地應用了這個。

但是，在定義站點結構/文檔大綱時，這似乎對舊版瀏覽器（尚未支持HTML5）造成問題。 此外，它給SEO帶來了問題。

我偶然發現了Matt Cutts（來自Google）的視頻並重新閱讀了Keith的書，該書建議限制使用h1並使用傳統的文檔大綱（每頁只使用一個或兩個h1 ，然后是多個h2 ， h3等）。 Matt Cutts也暗示多個h1對SEO不太好。

然而，

• 我之前從未認真關注網站結構/文檔大綱。 所以我永遠不知道有多舊的瀏覽器（HTML5之前版本）讀取網站結構/文檔大綱。 有一個HTML5大綱 ，但我找不到HTML4的大綱。
• Matt Cutts的視頻（關於HTML5和SEO）發布於2009年。我不知道Google是否已經支持新的HTML5概述文檔的方式。

所以我的問題是，如果我想：

• 支持舊版瀏覽器（例如Firefox 3.0和IE 6）顯示正確的網站結構/文檔大綱
• 在SEO中取得好成績

我應該使用哪一個：多個h1 （在HTML5中完成的方式）還是常規方式？

這個HTML5一個（例子來自HTML5 Doctor）：

<h1>My fantastic site</h1>
<section>
  <h1>About me</h1>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
  <section>
    <h1>What I do for a living</h1>
    <p>I sell enterprise-managed ant farms.</p>
  </section>
</section>
<section>
  <h1>Contact</h1>
  <p>Shout my name and I will come to you.</p>
</section>

還是傳統的方式？

<h1>My fantastic site</h1>
  <h2>About me</h2>
  <p>I am a man who lives a fascinating life. Oh the stories I could tell you...</p>
    <h3>What I do for a living</h3>
    <p>I sell enterprise-managed ant farms.</p>
  <h2>Contact</h2>
  <p>Shout my name and I will come to you.</p>

Answer 1

使用新格式。 很多人會使用h3或h2 ，這也很好。

事實上，他們將使用html5提供的section或article或header或footer元素，然后使用h3或h4作為該文檔片段的標題（因為害怕SEO懲罰/遺留樣式|布局怪癖）。

那也沒關系。

如果你再次觀看Cuts'視頻，他說要將h1使用保持在最低限度 - 只有在他們真正需要時才使用倍數。

在這一點上，這並沒有真正改變。

谷歌不會因為有倍數而謀殺你。 Google IS希望每個人都意味着內容發生了根本性的變化。

無論你是否有切片（ section / article / etc）元素，都是如此。

谷歌也已經達到了這樣的程度：他們正在適當地使用僅限AJAX或依賴JavaScript的網站，並擁有自己的內容豐富的元數據系統......他們非常復雜，可以解析section或article 。

更多地擔心內容的質量，如果您准備好接受它，那么他們用於搜索結果的特定於Google的元數據......等等......讓Google擔心導航語義（如只要你使用它們很好，而不是做任何陰暗的事情）。

較小的爬蟲，誰知道......但這是基於每個爬蟲的，大多數人只需要關注谷歌和必應和雅虎，其他爬蟲要么從谷歌出來，要么是特定領域的（如果你想因某種原因在選擇加入，租車的履帶上排名很高......那時你應該提供某種類型的XML / JSON提要）。

Answer 2

死鎖，你的第二個例子不包含任何切片元素。 但是，您可以使用標題為h1以外的標題元素。 我認為這就是你的問題：

h1在每個切片元素中

<section>
  <h1>…</h1>
  <section>
    <h1>…</h1>
  </section>
</section>

或 “計算”的標題水平

<section>
  <h2>…</h2>
  <section>
    <h3>…</h3>
  </section>
</section>

在語義上/技術上，它們是相同的。

搜索引擎優化應該不是問題，因為“ h1無處不在”將在整個網絡上使用（並且已經存在），主要搜索引擎都知道這一點。 如果他們想要支持HTML5，他們必須了解概述算法。 我敢打賭，他們的爬蟲/ API已經正確地計算了實際的標題級別，例如HTML5大綱 。

您想要使用h2 - h6作為分段元素標題的唯一原因是舊的可訪問性軟件，例如屏幕閱讀器。 它們通常提供輪廓菜單，因此用戶可以直接跳轉到某個標題。 因此，如果您總是使用h1 ，那些不知道HTML5的舊版屏幕閱讀器會將所有標題聲明為h1 ，因為它們不會計算正確的大綱級別。 但是 ，例如Jaws 13（ 屏幕閱讀器的當前版本），在IE， AFAIR中只能獲得HTML5正確的“ h1無處不在”，如果您在HTML5頁面中使用其他標題級別，則會感到困惑。 當然，這是一個錯誤，但這是一個很好的例子，堅持“舊方式”並不總是適用於較新的軟件。

所以你可能會遇到問題。

在我看來，你應該堅持使用HTML5規范推薦的內容，這將是：對所有切片元素標題使用h1 。 因為此規范是未來用戶代理，可訪問性工具，搜索引擎和其他服務/軟件用於構建其產品的原因。

但是，這當然取決於您的使用案例。 如果您了解訪問者統計信息，則應使用它們為特殊情況做出正確的決定。 例如，如果您的網站將來不會存在多年，請使用現在最受支持的網站。

Answer 3

最好的方法是使用HTML5並使用此鏈接使它們在舊瀏覽器中工作，因為如果您使用新標記，Google可以更好地使用您的網站並考慮使用新技術（以便您的網站更好）。

 <!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

把它放在你網站的head部分，它適用於舊的IE版本