Proper usage of <title>, <header>, <h1> and <h2> in a HTML5 website?

我已经研究了该主题几天，并发现了许多有关搜索索引的相互矛盾的建议。我正在从事一个项目，该项目有许多不同的页面，从简单的产品描述到深入的用户文档。

我将这个问题分为几个部分，因为我认为这将使它变得更加

我的一些发现

几个网站似乎都假定了以下文档概述：

1. Programmer's Guide  (https://www.dartlang.org/docs/)
    1. Getting Started
    2. Concepts
        1. Libraries
        2. Fundamental classes
        etc.

我发现有趣的是，上面的示例未使用带有适当标题的<nav>元素。我喜欢大纲的简洁性，并且喜欢成为Google，我可以肯定地说他们知道自己在做什么。

但是我很困惑，因为上面的大纲没有提到“ Dart” 。从语义上仅提及“ Dart”似乎是在主文档<title>元素“程序员指南| Dart：结构化Web应用程序”之内。遵循此原则的网站。 <h1>的许多标题提供了完整的上下文（HTML5文档的各节和大纲）：）。例如，下面的HTML5大纲是否与CSS，HTML5或C＃相关联...仅附带文档大纲，谁知道呢！最糟糕的是，如果MDN包含2个主题相同（或非常相似）的标题“避免过时的做法”，其中一个是CSS指南的一部分，另一个是HTML指南的一部分... />在频谱的另一端，网站似乎使用主<body>级别的标题表示产品名称（Foo）或主题容器（Foo用户指南）。然后，所有后续页面都使用<h2>作为实际页面标题。

问题

搜索引擎如何使用DOM和HTML5大纲来推断MDN网站上的网页上下文？

标记的正确方法是什么？以下HTML5页面，以便Google可以在适当的上下文中为该页面编制索引？这包括<title>，<header>和<h1>元素的用法。

公司名称
产品名称
用户指南
入门

在Web浏览器中查看的HTML中最重要的标题，它应该代表整个网站的上下文（公司名称或产品名称），主题集合（用户指南）还是实际的主题（入门））？

我的最佳猜测

1. Sections and Outlines of an HTML5 Document
    1. Untitled Section (nav)
    2. Untitled Section (nav)
    3. Structure of a Document in HTML 4
    4. Problems Solved by HTML5

领先于大纲： />

我是否正确理解您是否在寻找文档，以及搜索引擎如何使用该大纲？（而不是与SEO无关的建议使用哪种标记）

@unor我想了解MDN / Dart文档中使用的技术为何有效，以及我是否缺少任何关键知识。他们似乎依靠提供上下文。例如，在每个页面上都包含相同的<h1> Ubermachine用户指南</h1>是不好的主意，在该页面上以<h2>入门</h2>表示主题标题...还是大纲应该开始<h1>入门</h1>和随附的<title>入门| Ubermachine用户指南</ title>，为搜索引擎提供有用的上下文。这是一个SEO问题。<br /><hr />如果有2个单独的产品，那么很可能会有2个用户指南包含其各自的“入门”主题。因此，我对MDN方法的部分关注以及为什么我想知道<title>是否提供了足够的上下文。<br /><hr />我不会担心搜索引擎。如果您正在这个级别上考虑，那么您网站的其余部分在技术上可能会很好，并且对于搜索引擎来说足够好。请考虑您的用户。<br /><hr />您没有提及网址。这也是人类和机器人友好的重要机制。例如，当您的两个MDN示例<h1>不一致时。上下文中，它们的两个URL都在页面标题之前包含/ web / guide / html /。<br /><hr /></div><div class='answer'><h3 style='font-size: 16px;background: #434a54;color: #fff;padding: 10px;margin: 10px 0;'> #1 楼</h3>在广泛的网络搜索中，我发现了一个引文，觉得有用，并且怀疑将来这个问题的读者也会使用。<br /> <br /> <br />使用<code><h1></code>作为顶层标题<br /> <br /> <code><h1></code>是文档第一级标题的HTML元素：<br /> <br /> <br />如果文档基本上是独立的，例如在日内瓦的“看与做的事情”，则顶部<br />如果它是集合的一部分，例如，关于宠物的页面集合中有关“狗”的部分，则顶层标题应具有一定的上下文；只需写<code><h1>Dogs</h1></code>即可在标题在任何情况下都可以使用的情况下：狗-您的宠物指南。提示/ Use_h1_for_Title <br /> <br />以上引用似乎表明文档级<code><h1></code>元素可以假定使用<code><title></code>本身定义的当前页面的上下文。因此，如果有多个页面具有完全相同的<code><h1></code>，那么这没关系... <br /> <br /> <pre><code><title>Getting Started | Guide | Uber Product - Company Name</title> <h1>Getting Started</h1> <title>Getting Started | Guide | Other Uber Product - Company Name</title> <h1>Getting Started</h1> </code></pre> <br /> <br />另请参见：<title>：高质量的网页<br /> <br />接受答案之前，我想等一下别人的想法。<br /><br /><div class='comment'><h4 style='font-size: 14px;background: #f5f5f5;color: #2fa4e7;padding: 10px;margin: 10px 0;'>评论</h4><hr />好的问题更新和后续答案。如果您认为这是正确的答案，也许其他人会听到，如果不接受您的答案。 <br /> <br /> – dan♦ <br /> 2014年2月28日在23:16 <br /><hr /></div></div><div class='answer'><h3 style='font-size: 16px;background: #434a54;color: #fff;padding: 10px;margin: 10px 0;'> #2 楼</h3>我会质疑在标题中使用H1还是“产品名称”的任何标题级别。<br /> H1代表页面的标题，而不是产品，应用程序或站点。 <br />出于可访问性和SEO的目的，每页上重复H1都是有害的。不幸的是，在这种情况下，没有语义HTML标记表示“站点标题”，因此唯一的选择是<code><div></code>或<code><p></code>或什至<code><strong></code>标记，以对其进行语义强调。 <br /> <br /> <pre><code><main> <header> <div>Logo</div> <div>Product name</div> <nav> <ul> ... </ul> </nav> </header> <section> <h1>Getting started</h1> ...content </section> </main> </code></pre> <br /><br /></div><div class='answer'><h3 style='font-size: 16px;background: #434a54;color: #fff;padding: 10px;margin: 10px 0;'> #3 楼</h3>没有一个正确的答案，有不同的选择。<br /> <br />以下是一些选择，但是它们都有优点和缺点：<br /> <br />此选项或多或少您提出的一个标题，但标题更多，内容会去往何处，再加上徽标的概念，它比图像/文字要复杂得多，它具有所有相关元素，给人留下深刻的印象公司的个性，那何必节。再次。它不能是一个部分，而只能是一个div。<br /> <br /> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Started | User Guide | Product Name - Company Name</title> </head> <body> <section> <a id="logo" href="http://example.com">Company Name</a> </section> <nav> <ul> ... </ul> </nav> <main> <header> <h1>Product Name</h1> </header> <p>...</p> <header> <h1>User Guide</h1> <p>...</p> </header> <p>...</p> </main> </body> </html> </code></pre> <br /> <br />下一个介绍了主要标签，以显示页面的相关部分。该标签在支持和将来方面仍是粗略的，但是它清楚地表明导航与产品或页面无关。 <br /> <br /> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Started | User Guide | Product Name - Company Name</title> </head> <body> <section> <a id="logo" href="http://example.com">Company Name</a> </section> <nav> <ul> ... </ul> </nav> <main> <header> <h1>Product Name</h1> </header> <section> <header> <h1>User Guide</h1> <p>...</p> </header> <p>...</p> </section> </main> </body> </html> </code></pre> <br /> <br />下一个使用文章，因为大多数人倾向于使用那个。<br />我将使用类似下一个的东西，因为我是非常模块化的且面向块的，因此每个元素从数据库角度都是独立的，仅与相关的键相关。尽管我很可能会跳过这些部分标签。<br /> <br /> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Getting Started | User Guide | Product Name - Company Name</title> </head> <body> <article> <a id="logo" href="http://example.com">Company Name</a> <nav> <ul> ... </ul> </nav> <main> <header> <h1>Product Name</h1> </header> <section> <header> <h1>User Guide</h1> <p>...</p> </header> <p>...</p> </section> </main> </article> </body> </html> </code></pre> <br /> <br />仍然有更多选择。<br /><br /><div class='comment'><h4 style='font-size: 14px;background: #f5f5f5;color: #2fa4e7;padding: 10px;margin: 10px 0;'>评论</h4><hr />它们对我来说看起来都过于复杂。 <br /> <br /> –马丁F <br /> 2014年5月5日，0：41 <br /><hr /></div></div> </div> <div class="post-footer"><b>本文标签：</b> <a href="http://129.226.226.195/tags/seo/" target="_blank"> seo </a> <a href="http://129.226.226.195/tags/html/" target="_blank"> html </a> <a href="http://129.226.226.195/tags/google-search/" target="_blank"> google-search </a> <a href="http://129.226.226.195/tags/html5/" target="_blank"> html5 </a> <a href="http://129.226.226.195/tags/semantic-web/" target="_blank"> semantic-web </a> </div> </div> <div class="box boxmt nearbypost"> <div class="alignleft"><a href="http://129.226.226.195/post/25313.html" >捐款-他们确实有效吗？</a></div> <div class="alignright"><a href="http://129.226.226.195/post/25315.html">您如何备份您的网站？</a></div> </div> </div> <div class="aside"> <div class="box widget" id="divTags"> <div class="title">标签列表</div><ul><li><a href="http://129.226.226.195/tags/java/">java<span class="tag-count"> (11)</span></a></li> <li><a href="http://129.226.226.195/tags/r/">r<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/r-faq/">r-faq<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/javascript/">javascript<span class="tag-count"> (17)</span></a></li> <li><a href="http://129.226.226.195/tags/jquery/">jquery<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/asynchronous/">asynchronous<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/php/">php<span class="tag-count"> (17)</span></a></li> <li><a href="http://129.226.226.195/tags/mysql/">mysql<span class="tag-count"> (7)</span></a></li> <li><a href="http://129.226.226.195/tags/sql/">sql<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/html/">html<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/regex/">regex<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/arrays/">arrays<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/variables/">variables<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/warnings/">warnings<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/language-agnostic/">language-agnostic<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/c%2B%2B/">c++<span class="tag-count"> (9)</span></a></li> <li><a href="http://129.226.226.195/tags/c%2B%2B-faq/">c++-faq<span class="tag-count"> (8)</span></a></li> <li><a href="http://129.226.226.195/tags/parsing/">parsing<span class="tag-count"> (2)</span></a></li> <li><a href="http://129.226.226.195/tags/debugging/">debugging<span class="tag-count"> (5)</span></a></li> <li><a href="http://129.226.226.195/tags/c/">c<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/error-handling/">error-handling<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/python/">python<span class="tag-count"> (10)</span></a></li> <li><a href="http://129.226.226.195/tags/pandas/">pandas<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/android/">android<span class="tag-count"> (3)</span></a></li> <li><a href="http://129.226.226.195/tags/list/">list<span class="tag-count"> (3)</span></a></li> </ul> </div><div class="box widget" id="divPrevious"> <div class="title">最近发表</div><ul><li><a href="http://129.226.226.195/post/18326.html">IP地址错误的错误掩码</a></li> <li><a href="http://129.226.226.195/post/18325.html">在Cisco IOS中自动进行配置备份（每分钟）</a></li> <li><a href="http://129.226.226.195/post/18324.html">VRRP和HSRP有什么区别？</a></li> <li><a href="http://129.226.226.195/post/18323.html">IP地址如何映射到MAC地址？</a></li> <li><a href="http://129.226.226.195/post/18322.html">网站可以识别我的MAC地址吗？</a></li> <li><a href="http://129.226.226.195/post/18321.html">在STP中如何选择根桥？</a></li> <li><a href="http://129.226.226.195/post/18320.html">为什么要使用三根以太网电缆将交换机连接到路由器？</a></li> <li><a href="http://129.226.226.195/post/18319.html">为什么10.1.255.255是无效的广播地址？</a></li> <li><a href="http://129.226.226.195/post/18318.html">为什么将IP地址分配给每个接口而不是设备？这将意味着什么？</a></li> <li><a href="http://129.226.226.195/post/18317.html">为什么Visual Studio 2013不愿意运行我的Web性能/负载测试？</a></li> <li><a href="http://129.226.226.195/post/18316.html">对测试代码了解太多会不利吗？</a></li> <li><a href="http://129.226.226.195/post/18315.html">如何隔离错误？</a></li> <li><a href="http://129.226.226.195/post/18314.html">如何使用Selenium和WebDriver清除localStorage</a></li> <li><a href="http://129.226.226.195/post/18313.html">评估测试项目</a></li> <li><a href="http://129.226.226.195/post/18312.html">我如何说服管理层我们需要一个正式的质量保证部门？</a></li> <li><a href="http://129.226.226.195/post/18311.html">FluentWait与WebDriverWait有何不同？</a></li> <li><a href="http://129.226.226.195/post/18310.html">简历和求职建议-从开发到测试的职业转变</a></li> <li><a href="http://129.226.226.195/post/18309.html">您如何等待Selenium 2中的jQuery Ajax调用完成</a></li> <li><a href="http://129.226.226.195/post/18308.html">在持续开发下测试应用程序</a></li> <li><a href="http://129.226.226.195/post/18307.html">Selenium的页面加载默认超时是多少？</a></li> <li><a href="http://129.226.226.195/post/18306.html">IT项目中软件测试的真正商业价值是什么？</a></li> <li><a href="http://129.226.226.195/post/18305.html">系统测试与系统集成测试（SIT）有何不同？</a></li> <li><a href="http://129.226.226.195/post/18304.html">如何找到我们的“质量保证流程”的弱点？</a></li> <li><a href="http://129.226.226.195/post/18303.html">测试人员应如何处理生产中发现的错误？</a></li> <li><a href="http://129.226.226.195/post/18302.html">如果我不使用TDD但想过渡到敏捷，那我应该回去创建那些单元测试吗？</a></li> <li><a href="http://129.226.226.195/post/18301.html">代码覆盖率和测试覆盖率有什么区别？</a></li> <li><a href="http://129.226.226.195/post/18300.html">当团队想要忽略关键但难以重现的错误时，我应该如何应对</a></li> <li><a href="http://129.226.226.195/post/18299.html">测试人员应该修复错误吗？</a></li> <li><a href="http://129.226.226.195/post/18298.html">审核测试自动化代码的良好实践</a></li> <li><a href="http://129.226.226.195/post/18297.html">质量检查人员应该能够编写测试代码吗？</a></li> </ul> </div> <div class="box widget" > <div class="title">随机文章</div> <ul> <li><a href="http://129.226.226.195/post/11389.html">如何在React中访问DOM元素？什么是React中的document.getElementById（）等效项</a></li> <li><a href="http://129.226.226.195/post/11981.html">是否有针对Safari的CSS hack（仅适用于Chrome）？</a></li> <li><a href="http://129.226.226.195/post/12264.html">是否有任何OllyDbg反调试/反反调试插件在Windows 7 / NT 6.x上有效？</a></li> <li><a href="http://129.226.226.195/post/12779.html">x64dbg如何调试从应用程序调用的DLL</a></li> <li><a href="http://129.226.226.195/post/14069.html">在Ubuntu上安装最新版本的QGIS？ [关闭]</a></li> <li><a href="http://129.226.226.195/post/14100.html">六角形采样多边形有什么好处？</a></li> <li><a href="http://129.226.226.195/post/14395.html">有哪些替代的Android应用市场？</a></li> <li><a href="http://129.226.226.195/post/15783.html">什么使哈希函数适合于密码哈希？</a></li> <li><a href="http://129.226.226.195/post/15799.html">谁使用Dual_EC_DRBG？</a></li> <li><a href="http://129.226.226.195/post/15921.html">是否有一个网站显示CI / CD工具的普及程度？</a></li> </ul> </div> </div> </div> <style> code{ padding: 2px 4px; color: #242729; background-color: #e4e6e8; border-radius: 3px; } pre{ padding: 12px; color: #242729; background-color: #e4e6e8; border-radius: 5px; overflow: auto; max-height: 600px; } pre code{ padding:0; } </style><footer class="footer"> <div class="global-width footer-box"> <div class="copyright" id="copyr"><span>声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。</span> <script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1279522828&web_id=1279522828"></script> </div> </div> <span id="go-to-top"></span> </footer> </body> </html>

编程黑洞网

Proper usage of <title>, <header>, <h1> and <h2> in a HTML5 website?

评论