关于面包屑你应该知道的一切

面包屑是一种导航结构,包含帮助用户轻松浏览网站的链接集合。 这有助于用户在任何时间点知道他在网站上的确切位置,并直接向上或向下移动级别结构。 具有单一类别或独立页面的较小站点可能不需要额外的面包屑导航,因为站点的菜单可以满足用户的导航需求。 但是具有大量类别和父子页面结构的大型网站需要额外的面包屑来告知用户当前页面相对于整个网站的确切位置。

感兴趣的用户可以到上层或下层查找相关内容,如果没有面包屑,这些内容可能是不可能的。

面包屑的重要性

除了帮助用户外,面包屑结构还显示在 Google 和 Bing 的搜索引擎结果页面中。 像 Bing 这样的搜索引擎会在搜索结果中显示面包屑的链接,以便用户可以直接转到该类别而不是特定页面。

Google 搜索中显示的面包屑导航

必应搜索中显示的面包屑导航

如何添加面包屑?

将面包屑添加到您的站点的简单方法是使用默认提供此功能的主题。 自托管 WordPress 等内容管理系统提供插件以在文章标题上方插入自定义面包屑。 如果您的网站构建器不提供这样的功能,那么您需要使用 HTML 锚标记在每个页面上手动添加它。 例如,像 Weebly 这样的网站构建工具不提供带有默认面包屑的主题。 因此,您需要使用自定义 HTML / CSS 分别在每个页面上添加它。

面包屑的例子

虽然面包屑通常作为页面标题下方或上方的水平链接放置,但它可以具有垂直或水平结构,具体取决于站点的导航结构。 下面是面包屑的示例,展示了它使用户浏览网站变得多么容易。

面包屑示例

在这个网站中,我们使用 Yoast SEO 插件在每个帖子标题上方显示水平面包屑。 由于我们有很多类别,这有助于我们将文章分组到相关类别并在搜索引擎中显示。 优点是当一篇文章按多个类别分组时,您可以选择应该在面包屑中显示的类别作为主要类别。

Yoast SEO 面包屑

Yoast SEO 面包屑

Yoast SEO 面包屑将基于简单的文本,您可以使用以下 CSS 添加框和阴影:

#breadcrumbs {
box-shadow: 1px 1px #d5d4d4;
background: #eeeded;
border: 1px solid #eeeded;
border-radius: 5px;
padding: 0 5px 0 10px;
font-size: 16px;
}

自定义 CSS 面包屑

您可以添加自定义 CSS 面包屑,尤其是当您的网站页面数量较少时。 下面是一个水平的 CSS 面包屑,可以添加到您的网站上。 查看我们关于如何将此面包屑添加到您的 Weebly 网站的文章。

CSS 面包屑样式 1

CSS 面包屑样式 2

CSS 面包屑样式 3

CSS 面包屑样式 4

CSS 面包屑样式 5

额外的 CSS 面包屑样式 6

面包屑也称为饼干屑或面包屑痕迹。

  如何为您的网站创建 Google Analytics 跟踪代码?

类似文章