为什么以及如何添加 Elementor 面包屑以改善您的网站导航

面包屑是您的网站路径指示器，主要位于您网站的顶部。 它还显示了您网站的用户旅程，并确保更好的网站导航和更好的可抓取性。

面包屑作为您网站的导航功能，它们可以对您网站的 SEO 产生重大影响。

但是，您会发现大量网站没有实施面包屑导航，这是一个巨大的错误。 或者他们实现了它，但不关心设计或位置。

发生这种情况主要是因为他们在网站上显示面包屑时遇到了麻烦，此外，他们不知道实施它们的正确方法。

如果您有一个由 Elementor 提供支持的网站并正在寻找添加面包屑的最终解决方案，那么您来对地方了。

在本博客中，我们将向您展示如何使用 Elementor 面包屑小部件向您的网站添加面包屑功能。 我们还将向您展示添加面包屑的其他一些方法，并讨论有关面包屑的必要注意事项。

在你走之前，让我们谈谈在你的网站上放置面包屑的重要性。

为什么考虑将面包屑添加到您的 Elementor 网站

您可能知道 Google 在搜索结果中显示面包屑并使用面包屑对搜索结果中的信息进行分类。 由此，您可能会猜到面包屑对您的网站有多重要。

每个网站所有者都希望他们的访问者在他们的网站上停留很长时间。 添加面包屑可能是改善网站用户体验的好方法。 请记住，用户总是喜欢那些易于使用、结构良好且速度快的网站类型。

事实上，大多数搜索引擎都会特别注意那些有面包屑的网站类型。

面包屑分为三种，

• 基于层次结构的面包屑：这向用户显示了他们在站点中的位置。 例如：首页 > 博客 > WordPress 指南

• 基于属性的面包屑：这主要用于电子商务网站，以显示用户点击了哪些属性。 例如：首页 > 鞋子 > 男士

• 基于历史的面包屑：向用户显示他们访问过的网站上的其他页面。 例如：首页 > Elementor文章 1 > Elementor文章 2 > 当前页面。

您可以在您的网站上使用它们中的任何一个。 不仅如此，使用面包屑还可以为您带来更多优势，例如，

• 提升用户体验
• 提高网站排名
• 添加 SEO 好处
• 降低跳出率
• 确保正确导航。

因此，既然您知道在您的网站上实现面包屑的重要性，让我们开始了解如何使用 Elementor 面包屑小部件添加面包屑。

将 Elementor 面包屑添加到您的网站的 2 种方法

在我们博客的以下部分中，您将学习如何通过两种简单的方式将面包屑添加到您的网站。

1. 如何使用 Elementor Breadcrumbs 小部件进行 Yoast SEO

2. 添加元素面包屑的替代方法（对于其他 SEO 插件）

如何使用 Elementor Breadcrumbs 小部件进行 Yoast SEO

在我们开始之前，您需要在您的网站上安装以下插件：

• 元素（免费）
• 元素（专业版）
• Yoast 搜索引擎优化

确保您已安装并激活 Elementor免费和高级版。

如果您是 Elementor 的新手，请查看本指南并了解如何使用 Elementor（初学者分步指南）。

让我们开始吧：

第 1 步：安装和设置 Yoast SEO 插件

首先，您需要将 Yoast SEO 插件安装到您的网站，因为面包屑小部件仅在您安装插件时才有效。

转到插件-> 添加新的。 然后在搜索栏中输入 Yoast SEO。 找到插件后，单击安装按钮。 最后，单击“活动”按钮以完成插件激活过程。

现在，我们将启用面包屑选项。 为此，您需要访问SEO–> Seach Appearance 。 然后单击面包屑选项卡。 在这里，您将获得设置面包屑的所有必要选项。

注意：默认情况下，SEO 插件会为您设置完美运行的设置。

第 2 步：创建 Elementor 模板

是时候创建一个页面模板来添加面包屑了。 为此，您需要转到Template–>Theme Builder 。 然后打开单页选项卡并单击添加新单页按钮。

一段时间后，您会发现一个模式弹出窗口，您可以在其中添加模板的名称。 然后单击创建模板按钮并等待以下页面。

在下一页上，您将获得大量预制模板，您可以轻松地将其安装到您的站点。 只需单击安装按钮并等待模板安装。

第 3 步：添加元素面包屑小部件

让我们添加元素面包屑小部件到我们新创建的页面模板。 您可以从 Elementor 小部件库中找到该小部件。 然后将其拖放到要显示面包屑的合适位置。 通常，面包屑显示在页面顶部和网站标题区域的正下方。

第 4 步：自定义您的面包屑

您可以按照自己的方式自定义面包屑。 内容区域允许您设置面包屑的内容。 在这里，您可以定义Alignment和HTML Tag 。 这些是您为面包屑设置的 HTML 标记。

• 默认
• 磷
• div
• 导航
• 跨度

您还可以使用样式选项设置面包屑的样式。 在样式区域中，您可以按照自己的方式更改排版、文本颜色和链接颜色。 您会看到我们更改了文本和链接颜色。

如果要更改悬停颜色，可以按照下图进行操作。

添加 Elementor 面包屑的替代方法（适用于其他 SEO 插件）

您可以按照其他一些方法将面包屑添加到您的 Elementor 网站。

Elementor 免费版

如果您没有 Elmntor pro 许可证，您可以将面包屑添加到您的站点。 请按照以下步骤执行此过程。

• 创建要显示面包屑的部分
• 将 Elementor Shortcode 小部件添加到部分
• 粘贴以下 Yoast SEO 面包屑简码

[wpseo_breadcrumb]

现在您可以在您的网站上显示面包屑。

排名数学 SEO

您还可以使用 Rank Math SEO 插件来显示面包屑。 如果您是 Rank Math 专业用户，您可以使用小部件轻松添加面包屑。

但是，如果您是普通用户，则必须手动添加面包屑。 像 Elementor 免费用户一样，您还必须使用简码方法来完成任务。

该过程与上述类似。 但是您必须确保使用 Rank Math 插件提供的正确短代码。 这里是Rank Math 的面包屑简码。

 [rank_math_breadcrumb]

而已。

Elementor 面包屑常见问题解答

让我们查看以下有关 Elementor 面包屑的常见问题解答。

奖励：使用快乐插件的面包屑小部件在您的 Elementor 网站上添加令人惊叹的面包屑！

如果您想要更高级的选项来为您的 Elementor 网站添加流畅、吸引人且可自定义的面包屑，那么您应该尝试 Happy Addons Breadcrumbs Widget。 这个惊人的小部件允许您以更艺术的方式将动态面包屑添加到您的网站。 它还带有一些漂亮的预制面包屑设计。

主要特征。

• 使用方便。
• 提供漂亮的预构建面包屑设计，可帮助您轻松设计面包屑。 您可以在演示页面上找到它们。

• 完全可定制。
• 获取更多高级设置。
• 能够添加主页图标，这将使您的面包屑更具可信度。

查看 Happy Addons Breadcrumbs 的文档并了解如何使用它。

使用面包屑改善您的网站用户体验

添加面包屑可为您的 Elementor 网站带来额外的 SEO 优势。

在本指南中，我们介绍了添加此 Web 元素的所有可能方法。 我们已经讨论了它的重要性。 此外，还简要介绍了 Happy Addons 的面包屑小部件。

如果您对此博客有任何疑问，可以对我们发表评论。

不要忘记订阅我们的时事通讯，以获取有关 Elementor 和 Happy Addons 的更酷提示和技巧。