提升WordPress网站性能和SEO的伪标签使用指南

问题

使用Tabs元素时,如果你添加了大量的元素(例如Loop Grid或Loop Carousel元素)或许多元素(例如在每个选项卡中几乎创建了整个页面的内容),可能会遇到性能问题。

提升WordPress网站性能和SEO的伪标签使用指南

这些问题包括:

  • 前端性能问题(页面加载缓慢)。
  • Elementor编辑器中的性能问题(编辑器操作困难)。

另一个问题是,如果在选项卡内容中使用依赖JavaScript的元素,它们可能无法正常显示。例如,如果你在第一个选项卡之外的任何选项卡中使用循环轮播、Gallery Pro元素或其他依赖JS的元素,可能会遇到错误。

通过本教程中的方法,可以避免这些问题。

优点

  • 性能提升:避免前端和编辑器的性能问题。
  • SEO优化:每个选项卡内容都将成为独立页面,具有独立的<title>和meta-description,并且没有内容会使用display,这对SEO有积极影响。

适用场景

  • 当选项卡包含大量内容时
  • 当选项卡中有依赖JavaScript的元素时
  • 当SEO是优先事项时(即当选项卡内容对SEO很重要时)

热门网站上的伪标签

“伪标签”是一些热门网站的流行选择,例如Google:

提升WordPress网站性能和SEO的伪标签使用指南

所有这些像标签标题一样,但实际上是指向其它页面的链接。这是一种广泛使用的设计模式。

创建伪标签

使用Nav Menu元素替换它。然后,将菜单项链接到与“标签内容”相对应的不同页面。

创建伪标签

创建页面

首先,为每个选项卡内容创建一个新页面。

提升WordPress网站性能和SEO的伪标签使用指南

这样做可以提高性能并预防错误。

接下来,为这些页面命名并发布。

创建菜单

然后,进入WordPress仪表板,依次点击“外观” > “菜单”,点击“ create a new menu”创建一个新的导航菜单。

提升WordPress网站性能和SEO的伪标签使用指南

然后,在该菜单中添加刚刚创建的所有页面,然后单击“保存”。

提升WordPress网站性能和SEO的伪标签使用指南

创建单页模板

为了确保所有“标签页”保持一致,我们将创建一个单页模板。

这个模板可以链接到某些帖子或自定义文章类型(CPT)的存档。

步骤:

  1. 前往WordPress后台,依次点击“模板” > “主题构建器”。
提升WordPress网站性能和SEO的伪标签使用指南
  1. 点击“添加新的单页模板”。
提升WordPress网站性能和SEO的伪标签使用指南

添加 WordPress 菜单元素

提升WordPress网站性能和SEO的伪标签使用指南
  1. 创建菜单
    • 登录到 WordPress 仪表板。
    • 前往“外观” > “菜单”。
    • 点击“创建新菜单”,为菜单命名并点击“创建菜单”按钮。
    • 在左侧的菜单项中,选择要添加到菜单的页面、文章、分类或自定义链接,然后点击“添加到菜单”按钮。
    • 可以拖动菜单项来调整顺序。完成后,点击“保存菜单”。
  2. 将菜单添加到页面
    • 前往“页面” > “所有页面”,找到您要添加菜单的页面,然后点击“编辑”。
    • 如果使用的是经典编辑器:
      • 在页面编辑器中,选择一个文本小工具或直接在页面内容中添加短代码 [menu id="menu_id"],其中 menu_id 是你创建的菜单的ID。
      • 使用Elementor构建器
        • 打开Elementor编辑器,找到“导航菜单”小工具。
        • 将“导航菜单”小工具拖动到页面上的合适位置。
        • 在左侧面板中,选择刚创建的菜单。
提升WordPress网站性能和SEO的伪标签使用指南
  1. 自定义菜单样式(可选):
    • 如果需要自定义菜单样式,可以在主题自定义器中进行设置。
    • 前往“外观” > “自定义” > “额外CSS”,根据需要添加自定义CSS代码。

添加HTML元素

  • 打开Elementor编辑器,找到“HTML”小工具。
  • 将“HTML”小工具拖动到页面上的导航菜单元素的上方。
提升WordPress网站性能和SEO的伪标签使用指南

找到类似以下代码的部分,并用该代码替换它。样式已调整为与上面演示中的样式相同,这样可以节省更改所有CSS的时间。

<div class="custom-html">
  <!-- 您的自定义HTML代码 -->
  <style>
    /* 添加您自定义的CSS样式 */
    .custom-html {
      /* 示例样式 */
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
    }
  </style>
  <!-- 示例内容 -->
  <p>这是一个示例HTML元素,位于导航菜单元素的上方。</p>
</div>

可能需要浏览以下CSS并根据需要进行调整。

现在,调整该容器(它应该包含HTML元素和WordPress菜单元素),直到它具有你想要的完美样式。

在需要的地方添加“帖子内容”元素。这就是“标签内容”显示的位置。

提升WordPress网站性能和SEO的伪标签使用指南

发布你的单页模板,并设置条件,使得所有“标签页”都拥有它

添加内容

现在剩下要做的就是进入每个“标签页”并在其中添加你需要的内容。

总结:

提升WordPress网站性能和SEO的伪标签使用指南

如何通过使用伪标签替代Tabs元素来优化WordPress网站的性能和SEO?本文章讲解了创建伪标签的方法,包括创建新页面、设置导航菜单以及添加自定义HTML元素。这种技术可以避免前端加载和编辑器中的性能问题,确保JavaScript元素正确显示,并通过独立的页面结构提高SEO效果。还说明了如何创建单页模板以保持一致性和优化标签页内容。通过实施这些步骤,可以显著提升网站的用户体验和搜索引擎排名。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10758/

(0)
上一篇 2024年 6月 1日 下午6:24
下一篇 2024年 6月 1日 下午6:26

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!