谷歌提升的 3 种外围类型的面包屑导航 (谷歌新政策2021)

本文目录导航：

• 谷歌提升的 3 种外围类型的面包屑导航
• 面包屑导航成功与详解
• 面包屑导航怎样做

谷歌提升的 3 种外围类型的面包屑导航

面包屑导航是一种协助用户在网站中导航和了解位置的工具，它准许用户追踪从主页到以后页面的门路。

这种导航方式在提升网站体验和搜查引擎提升（SEO）方面起着关键作用。

以下是三种外围类型的面包屑导航，它们对提高用户体验和SEO成果至关关键。

1. **位置面包屑导航**

位置面包屑导航是最经常出现的类型，它显示用户在网站结构中的位置，理论以主页为终点。例如，关于暖通空调承包公司或批发店的网站，位置面包屑导航会显示如下门路：

这种导航方式对用户和爬虫都十分有用。

2. **门路面包屑导航**

随着灵活、数据库驱动站点的兴起，门路面包屑导航越来越经常出现。

这类导航显示用户抵达以后页面的实践门路，而非相关于主页的档次结构。

以亚马逊为例，它会展现用户在寻觅行车记载仪时所采取的门路。

用户或者经过多种方式访问页面，发生少量不同的门路。

这须要导航系统能够顺应各种或者的访问门路。

3. **属性或关键字面包屑导航**

这种导航类型经常使用形容页面的关键字和属性，而不经常使用页面题目或其余标识符。

它实用于电子商务网站，如Orvis在其产品页面上所驳回的面包屑导航，显示产品在全体商店结构中的位置。

例如，在Orvis网站中，用户经过搜查“狗”找到特定产品时，面包屑导航显示该产品属于“狗”类别的一局部，即“狗床”区域。

须要留意的是，经常使用门路和属性面包屑导航或者会造成重复的导航门路，这在搜查引擎眼中或者被以为是内容“单薄”。

为了提升SEO，应优先思考基于位置的面包屑导航。

面包屑导航成功与详解

面包屑导航是一种导航元素，它协助用户了解他们以后页面在整个网站结构中的位置。让咱们经过饿了吗和蚂蚁的面包屑组件来了解其上班原理：

饿了吗面包屑组件示例:

蚂蚁面包屑组件示例:

经过以上实例，你应该对面包屑导航有所了解。

实践上，即使不依赖前端框架，自定义成功这个配置也是可行的。

接上去，我将展示如何仅用 HTML 和 CSS 成功面包屑导航。

在开局前，确保你把握了 HTML 和 CSS 的基础。上方是一个成功面包屑导航的代码示例：

首先，将 ul 作为行内元素出现，而不是自动的列表方式。

经过 CSS 样式调整，如设置 的内边距和背风景，使其合乎要求。

接着，设置 li 之间的分隔符，这里经常使用的是 /，并在 :before 中拔出，确保每个链接之间有明白的距离。

而后，为每个链接 a 标签设置样式，使其显示为绿色字体。

最后，将一切这些元素组合起来，你将获取一个完整的面包屑导航栏。让咱们看看实践成果：

至此，你曾经成功地成功了面包屑导航配置。

经过基础的 HTML 和 CSS 技巧，你可以轻松地为你的网站减少这种导航元素，提高用户体验。

面包屑导航怎样做

1、点击后盾插件，装置插件 搜查： Breadcrumb NavXT 点击如今装置并启用。

2、将下列这段代码放入到“”中，（外观—编辑栏目中查找）<div><?phpif(function_exists(bcn_display)) {bcn_display();}?>普通放在文章题目上方位置即可。

点击保留。

刷新即可发生面包屑导航