什么是 SEO 中一个好的网页所必需的 HTML 标签和属性？

搜索引擎优化 (SEO) 是提高网站在搜索引擎中的排名（可见性）的过程。网站在搜索引擎列表（如谷歌）中显示得越高（或更频繁），预计会收到越多的访问者。

SEO 考虑搜索引擎的工作方式、人们搜索的内容以及输入的搜索词（词）。优化网站可能涉及编辑内容以增加其与特定关键字的相关性。推广网站以增加链接数量是另一种 SEO 策略。

下面给出了 SEO 必需的 HTML 标记和元素列表：

HTML 标题标签： HTML 中的标签用于定义 HTML 文档的标题。它在浏览器工具栏中设置标题。当它被添加到书签时，它提供了网页的默认标题。它在搜索引擎结果中显示页面的标题。这个 HTML 标题标签是 SEO 期间要考虑的最重要的标签之一。当我们在搜索引擎中搜索某些内容时，标题标签也会以粗体和更大的字体显示。内容创建者和开发者必须确保正确使用标题标签才能获得良好的搜索引擎排名。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><title> Title name

示例：下图说明了标签在浏览器中作为网页标题的外观。 </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_are_HTML_tags_&_Attributes_mandatory_for_a_good_Web_page_in_SEO_?_0.jpg" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20220126181039/Screenshot133-660x238.png 660w, https://media.geeksforgeeks.org/wp-content/uploads/20220126181039/Screenshot133-768x276.png 768w, https://media.geeksforgeeks.org/wp-content/uploads/20220126181039/Screenshot133.png," sizes="100vw" width="660" class="aligncenter"></p><p> <strong>HTML 元标记：</strong><strong> </strong>元数据是指有关数据的信息。 HTML 中的 <meta> 标记提供有关 HTML 文档的信息，或者简单地说，它提供有关文档的重要信息。元标记包含一个名称属性。我们可以将它的值设置为'description'，然后在'content'属性中添加网页的描述。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><meta name="description" content="Some text about the contents of the webpage"></code></pre></div><p> <strong>SEO</strong><strong>最佳实践</strong>：</p><ul><li>始终保持<strong>简短而准确</strong>，因为搜索引擎通常会保留您的元描述的前 150-160 个单词并删除其余部分。</li><li>如果您的网页打算显示搜索范围更广的搜索关键字，那么最好<strong>跳过元描述</strong>。在这种情况下，搜索引擎算法将根据搜索次数最多的网页文本创建描述。</li></ul><p><strong>示例：</strong>下图说明了 <meta> 标记在浏览器中作为元描述的外观。 </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_are_HTML_tags_&_Attributes_mandatory_for_a_good_Web_page_in_SEO_?_1.jpg" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20220126183256/Screenshot134-660x390.png 660w, https://media.geeksforgeeks.org/wp-content/uploads/20220126183256/Screenshot134-768x454.png 768w, https://media.geeksforgeeks.org/wp-content/uploads/20220126183256/Screenshot134-1024x606.png 1024w, https://media.geeksforgeeks.org/wp-content/uploads/20220126183256/Screenshot134.png," sizes="100vw" width="660" class="aligncenter"></p><p> <strong>HTML 标题标签 (h1-h6):</strong><strong> </strong>它用于定义页面的标题。 HTML 定义了六级标题。这 6 个标题元素是 H1、H2、H3、H4、H5 和 H6； H1 最高，H6 最低。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><h1>Some Text</h1> <h3>Some Text</h3> ... <h6>Some Text</h6></code></pre></div><p> <strong>SEO最佳实践：</strong></p><ul><li>不要在整个网页中使用多个 <h1> 标签。仅使用一个 <h1> 标签作为整个网页的标题或可见标题。</li><li>对网页的部分使用 h2，对子部分使用 h3。最好不要低于 h3，因为这会使用户和搜索引擎算法感到困惑。</li><li>制作与可能的搜索查询相关的标题。这将有助于在搜索预期查询时将网站排名在更好的位置。</li></ul><p><strong>示例：</strong>下图说明了标题标签在网页上的外观。 </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_are_HTML_tags_&_Attributes_mandatory_for_a_good_Web_page_in_SEO_?_2.jpg" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20220126184849/Screenshot135-660x416.png 660w, https://media.geeksforgeeks.org/wp-content/uploads/20220126184849/Screenshot135-768x485.png 768w, https://media.geeksforgeeks.org/wp-content/uploads/20220126184849/Screenshot135-1024x646.png 1024w, https://media.geeksforgeeks.org/wp-content/uploads/20220126184849/Screenshot135.png," sizes="100vw" width="660" class="aligncenter"></p><p> <strong>HTML 图像“alt”属性：</strong><strong> </strong><img> alt 属性用于指定图像的替代文本。在不显示图像时很有用。它用于为图像提供替代信息。</p><p><strong>句法：</strong> </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><img src="image_URL" alt="Image Description"></code></pre></div><p> <strong>SEO最佳实践：</strong></p><ul><li> alt 属性内的一两行良好的描述性文本将帮助用户找出图像中显示的内容，即使图像未加载也是如此。</li><li>关键字搜索不会考虑图片 alt 属性中优先级较高的文本，所以不要尝试在这里写搜索关键字。</li></ul><p><strong>示例：</strong>下图说明了图像不显示时图像标签的 alt 属性的外观。 </p><div class="hcb_wrap"><pre class="prism undefined-numbers lang-html" data-lang="HTML"><code class="replace"><img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="GeeksforGeeks logo"></code></pre></div><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_are_HTML_tags_&_Attributes_mandatory_for_a_good_Web_page_in_SEO_?_3.jpg" class="aligncenter"></p><p> <strong>HTML5 语义标签：</strong>语义元素具有有意义的名称，可以说明内容的类型。例如页眉、页脚、表格等。HTML5 引入了许多语义元素，如下所述，这些元素使开发人员更容易编写和理解代码，并指导浏览器如何处理它们。</p><p><strong>除了使用文章之类的语义标签之外，细节对 SEO 也有帮助：</strong> </p><p><img src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/What_are_HTML_tags_&_Attributes_mandatory_for_a_good_Web_page_in_SEO_?_4.jpg" alt width="1000" height="500" class="aligncenter size-full wp-image-754194" srcset="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220131094801/Group-2-3.jpg 1000w, https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220131094801/Group-2-3-300x150.jpg 300w, https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220131094801/Group-2-3-768x384.jpg 768w, https://media.geeksforgeeks.org/wp-content/cdn-uploads/20220131094801/Group-2-3-660x330.jpg 660w" sizes="(max-width: 1000px) 100vw, 1000px"></p><p>右侧的约定对搜索引擎非常有用且易于理解。所以它在 SEO 期间更有用。 </p><br><div id="GFG_AD_Desktop_InContent_ATF_728x280" style="margin-left:-3.5%;min-height:280px"></div></div></article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>