正确用于 SEO 的 Web 元素

最后更新于 2019 年 1 月 16 日

大多数网页由 3 个基本元素组成，HTML、CSS 和 JavaScript。 这些构建块构成了所有网页，无论它们使用什么来呈现它们。 每个网络元素都有其适当的位置。 虽然可能存在一些重叠，但有目的地使用它们有助于制作 SEO 优化页面。 那么应该如何使用这些元素以及它们可能被误用的方式有哪些？

基本的网络元素功能

让我们将网页比作房子。 一所房子有几个部分，每个部分都在它的位置并服务于它的目的。 在我们的网页房屋中，HTML 类似于结构网络元素、桁架、墙壁和地基。 HTML 提供了重要的页面内容布局，概述了它的顺序以及哪些元素出现在哪里。

CSS 应该用于样式。 如果我们坚持使用房屋插图，这将是墙壁的颜色、橱柜、地板的类型等。页面的颜色、字体大小、页面的实际布局也可以在 CSS 中定义。 但是等等，布局不应该在 HTML 中吗？ 好问题。 HTML 应该对页面上的元素进行布局，而 CSS 应该控制这些元素在页面上的显示方式。 CSS 负责网络的大部分响应能力。

现在你的房子已经建成，是时候使用一些公用设施了，比如你的电力和自来水。 JavaScript 应该用于页面的交互元素，例如单击时更改元素、显示数据等。 JavaScript 可用于更改页面的整体外观和感觉，如果您要针对特定​​受众或用例进行定制，这将非常有效。

为什么要把它们分开？

那么，如果您可以同时使用 HTML 和 CSS 进行布局，并使用 JavaScript 和 CSS 进行样式设置，为什么要将它们分开呢？ 当 Google 为您的网页编制索引时，它会寻找有关您的网页内容和功能的关键指标。 如果您不恰当地使用其中一个元素，您可能会发出错误的信号并损害您的排名。 当使用 CMS 编辑器使用元素预设样式或运行不必要的 JavaScript 以减慢页面执行可以在 CSS 中完成的事情时，这种情况经常发生。

因此，让我们回顾一些常见的误用。

滥用标题标签

最常见的误用之一是使用标题标签来设置 Web 元素的样式。 标题标签概述了页面上的主要主题，从最重要的 H1 标签（每个页面都应该有）到 H6。 当用于设置元素样式时，您是在告诉 Google 这些词就是您的页面的内容。 或者，您可能使用了错误的标题标签（例如使用 h3 而不是 h2，因为您更喜欢字体大小）。 无论哪种情况，您都发送了错误的信息。 相反，您应该使用 CSS 将元素样式设置为您想要的适当大小或字体。

双H1标签

另一个常见问题是页面上有 2 个或更多 H1 标签。 您的 H1 标签应该是页面的主要思想； 它应该告诉访问该页面的每个人（以及每个爬行机器人）它是关于什么的，因此，您应该只有一个。 拥有两个 H1 标签就像在页面上发送两个不同的信号。 有些人甚至专业主题倾向于将他们的标志放在 H1 标签中。 因此，请注意确保每页只有一个。

---

---

所有图像都是背景图像。

拥有图像背景并没有错。 图片引人注目，可以为您的网站增加很多价值并吸引用户购买产品或服务。 但是您所有的图像都不应该是背景图像。 最近在一个网站上工作，我发现 CMS 将所有图像都转换为背景图像。 这里的目的是更容易地设置样式和调整它们的大小。 虽然它可能会使它看起来更好，但您会失去页面上图像优势的一个重要部分：替代文本。 替代文本描述图像中的内容，屏幕阅读器使用它来识别图片中的内容。 通过将所有图像设置为背景图像，您会降低页面的可访问性，从而使残障人士更难使用，并且可能会在您的排名中受到谷歌的打击。

使用 JavaScript 渲染 CSS

通过 JavaScript 提供不必要的 CSS 会增加页面的加载时间。 最好将 CSS 文件链接到标题中，而不是通过那个额外的步骤。 此外，使用 JavaScript 制作简单的动画或悬停效果会增加加载时间，因为它可以通过 CSS 更快地完成。 即使在不需要时添加 JavaScript 框架也会增加加载时间。 就像加载 jQuery 来为按钮设置动画一样。 与其编写普通的 JavaScript，甚至更好，使用 CSS 中的动画元素甚至 CSS 动画样式表，加载速度要快得多。

在 HTML 中设置 Web 元素的样式

直接在 HTML 文件中设置元素样式是一个有争议的话题。 WordPress 和其他 CMS 中的许多主题和插件不断依赖于覆盖样式表和其他插件。 这通常被视为一种不好的做法。 一些内容创建者直接将样式写入他们的内容，因为他们想改变他们的主题样式。 这有什么问题？ 当直接写入 HTML 元素的样式覆盖 CSS 文件中的样式时，通常会导致 CSS 问题。 为避免这种情况，不要将其直接写入 HTML，而是为 Web 元素分配一个类并添加一个新样式表来添加样式。 这可以避免冲突工作表的问题，这些问题可能会破坏您的网站或不正确地设置您的网站样式。

使用 HTML 设置布局样式

这有点棘手，因为主题通常将 CSS 选择器与 HTML 结构结合在一起。 这使得人们更难在不破坏使页面可读和功能的重要样式的情况下更改 HTML 结构。 例如：

在示例中，如果您更改前者的 HTML 结构，您将丢失该元素的所有样式，因为它依赖于结构。 相反，将样式与结构分离，就像在后面的类中一样，即使您更改了 HTML 结构，您也可以重用您的 CSS。

格式正确的页面是优化良好的页面。

您页面的内容是排名的一个重要因素。 正确利用网页元素也是如此。 具体来说，HTML、CSS 和 JavaScript 在优化您的页面 SEO 方面发挥着同样重要的作用。 通过了解每个网络元素的作用并以适当的方式使用它，您可以提高您的排名。 只需构建一个既实用又有吸引力的页面。 如果您正在考虑为 CMS 切换主题或将自定义 CSS 或 JavaScript 添加到您的页面，请再次查看并确保您正确使用了 Web 元素。