Blog/Technical SEO/Breadcrumb 导航类型、最佳做法和SEO的好处
Breadcrumb 导航类型,最佳做法,和SEO的好处
斯维特兰娜在SE Ranking领导内容团队. 她的内容营销专门知识由于对SEO过程的深刻理解而得到加强.
SE Ranking的SEO专家. Valerii对Google的算法有顶尖的理解,专门从事专业页面优化.
总结此博客文章:
面包屑是网站导航的一个重要因素. “面包屑”一词来源于经典的Brothers Grimm故事, Site breadcrumbs服务于同一目的;它们帮助用户了解它们在网站的页面层次,甚至帮助他们回到以前的章节.
这篇文章涵盖现有的各种面包屑类型。 我们亦会讨论您的网站是否需要,
SE Ranking的AI概览研究
下载我们的免费电子书来了解AIO在推出后如何改变,
你们都准备好了!
点击我们在电子邮件中发送的链接确认您的电子邮件
并获得由SE Ranking撰写的AI概览研究
- Breadcrumbs是图形用户界面(GUI)元素,作为文本链接,帮助用户在站点的层级内跟踪位置. 面包屑一般出现在网页的顶端附近.
*网站主要有三种类型的面包屑:基于等级(显示网站结构),基于路径(显示用户历史),基于属性(显示选定的过滤器),每种都服务于不同的导航目的.
-
Breadcrumbs通过创建清晰的层次结构,帮助搜索引擎更好地理解网站组织,改善网站架构.
-
Breadcrumbs通过帮助访客了解自己在特定页面上的位置来增强可用性. 他们还鼓励用户继续探索您的网站。 这降低了反弹率,并导致更好的换算率.
*Breadcrumbs通过增强你的内部连接结构,改善你的搜索引擎的爬行性,以及用适当的Breadcrumb schema markup执行来完善SERP片段,从而加强了SIO.
- 提供尽可能好的用户经验,使其具有不侵扰性和干净的面包屑,保持格式一致,包括完整的导航路径,并避免与当前页面连接。
校对:Soup 进行爬行索引和链接分析,以确保您的页面被正确爬行、索引和链接。
-
如果您的网站运行在WordPress上,您可以手动编码面包屑或者添加像Yoast SIO这样的插件.
什么是面包屑导航?
Breadcrumb导航,或称breadcrumb线索,是一个图形用户界面(GUI)元素. 它可以帮助用户在网站或应用程序上跟踪当前位置.
在网络设计中,面包屑的使用案例是让他们以方便用户的方式展示网站的层次。 它们一般出现在一个网页(或应用程序)的顶端,作为可点击链接的横向行,每个链接都代表了网站层次的级别. 最左边的链接表示主页或根级,而后续的链接则逐渐代表特定的子类. 例如,在电子商务网站上,面包屑线索可能以 " Home > Women > Accessories > Bags " 开头,以显示用户目前在网站分类等级中的位置。
什么样的面包屑?
面包屑有几种类型,每种类型取决于小径中包含的元素.
** 基于等级的面包屑**
** 基于等级的面包屑最普遍。 ** 这些系统为网站用户提供了一个延伸至主页的路径,使用户能够轻松地浏览到网站层级中各个层次的分类页面. Breadcrumb小径一般是这样的: 主页 > 类别 > 子类 > 页面。
这个面包屑导航例子是一种基于等级的面包屑的变种. 路径总是从顶级类别开始,引导用户从网站结构下游. 这个例子中的面包屑是静态的,意思是它们看起来对每个用户都是一样的,无论它们如何导航到每个页面.
这不是唯一的选择。 一些面包屑是路径基,甚至属性基.
- 以帕思为基础的面包屑**
** 基于Path的**(或基于历史的)面包屑包括一条路径,表明用户访问过的实际页面。 看起来是这样的: 内容 > 上一页 > 上一页 > 目前页. 这些面包屑类型很少被使用, 因为浏览器的_ Back_ 按钮做同样的工作 。 从Google等外部来源抵达的访客也无济于事.
基于历史的面包屑往往与其他面包屑类型结合,以帮助用户回到以前的页面.
基于属性的面包屑
与传统面包屑显示的网站的分级显示不同,基于属性的面包屑显示用户在上页选择的过滤器或属性.
比如说,你在电子商务网站上买鞋。 您首先选择“ 男鞋” 类别, 然后按大小和颜色过滤 。 有了基于属性的面包屑,而不是看到传统的面包屑小径,如“家庭>男人的鞋子 > 尺寸>颜色 ” , 你会看到类似“男人的鞋子 > 尺寸:9 > 颜色:黑色 ” 。 这使得用户更容易记住之前的选择,并在必要时迅速修改或删除.
下面的截图显示了Sephora如何将基于等级的面包屑和基于属性的面包屑结合起来. 通常,基于属性的面包屑与传统的面包屑一起使用,为用户提供更全面的导航经验.
如果看“shampoo”类别,你可以看到面包屑小径显示了用户选择的特定发型、担忧和配方。 这些属性作为可点击的crumbs,可以根据用户的偏好被删除或修改以显示不同的页面或内容.
基于属性的面包屑的一个优点是它们提供比传统面包屑更微粒的导航水平. 用户可以通过选择或取消属性来快速缩小搜索结果. 这使得他们不必从头开始搜索,无需返回上页。 这提高了用户体验,使网站更满足探索.
这表明面包屑呈各种形状和大小,可以满足不同网站的需求. 这还证明它们是有用的,但是它们有多重要?
你的网站真的需要面包屑导航吗? 页:1 页:1
这取决于网站的结构和用户需求。 尽管面包屑很有用,而且能够增强使用者的经验,但它们也可能是混淆和不必要的。
面包屑对于具有多层次结构的网站,如电子商务或新闻网站,可能极为有用. 想象一个用户浏览一个在线商店,拥有许多类别,子类别,和产品页面. Breadcrumbs使用户能够快速导航回上一页或跳转到更高层次的类别. 他们不再需要反复点击后键。
面包屑最有效的例子
例如,eBay是世界上最大的在线零售商之一,它利用面包屑导航帮助用户浏览其庞大的产品目录。 当用户搜索产品并选择特定类别时,可以使用面包crumb线索返回类别页面或主页.
类似地,美国新闻使用面包crumb导航帮助用户通过教育,健康,金钱,旅行等新闻部分进行筛选. 用户可以使用其面包屑小径特性返回主页(或上篇文章).
面包屑不起作用的例子
对于结构平坦的小网站来说,Bradecrumb导航可能没有必要. 如果一个网站只有几页,并且从主导航菜单上可以很容易地访问到所有网页,面包屑线索可能不会增加多少价值. 用户使用主页或菜单寻找其他页面不会遇到太多麻烦。
考虑一个名为罗马国际舞蹈学院的意大利舞蹈学校和工作室的网站. 它只有几节(家庭、关于我们、培训课程、曼德拉戈拉舞蹈公司、新闻和联系)。 用户可以通过网站的主菜单或页脚链接浏览任何页面。
用户如果在从多个切入点可以到达的低层页面上加入面包屑,可能会感到困惑. 一个很好的例子是互联网电影数据库(IMDb),一个流行电影和电视剧数据库. 互联网电影数据库(IMDb)上"面包屑导航"的资料(英文) 互联网电影数据库(IMDb)上"面包屑导航"的资料(英文)
这是因为一部电影可以属于多个类别或流派,使用面包屑菜单可能会迷惑用户. 相反,用户可以通过IMDb的建议和搜索功能浏览其他相关电影.
** 面包屑导航的最低限度业务效益**
在你的网站上包括面包屑是UX设计的最佳做法和有效的SEO战略. 它帮助搜索引擎了解您网站的结构,并提高其在搜索结果中的能见度. 有效的面包屑导航也符合UX SEO的最佳做法.
下一节探讨面包屑的SIO效益以及如何增强用户体验,改善用户行为,优化内部连接结构,以及改进搜索片段.
增强用户经验
Breadcrumbs简化网页导航. 它们显示用户的位置,并方便访问以前的网页或不同的类别。 Breadcrumb对来自SERP的用户特别有帮助,
考虑以下设想: 你在找沙发。 您点击了 Google 片断, 想要探索商店的额外选项 。 多亏了面包屑,你才能进入整个沙发目录,或者用一击就检查同一品牌的其他产品.
当您从网站的分类页面开始搜索产品时, 面包屑也有帮助, 尤其是当您设置了颜色或大小等过滤器时。 如果使用面包屑从产品页返回分类页面,则过滤器将保持完好无损,允许你拾起你留下的地方. 但如果使用浏览器后键,则可能会失去过滤偏好.
Breadcrumbs也可以用于在网站类别和多步骤进程之间进行导航,如表单,结账,和调查问卷. 当用户从事复杂的任务,如使用页码填写一个长的表格或问卷,分成多个页面时,面包屑会帮助他们跟踪进度,并在页面之间前后移动. 这降低了挫折感,提高了用户的满意度,促进了参与和忠诚.
改进用户行为
Breadcrumb鼓励用户浏览网站并访问更多页面,从而降低弹跳率. 当用户容易移动网站时, 用户花在一个网站的时间越长,对网站所有人的价值就越大. 换言之,面包屑有助于保持用户的参与,提高电子商务的换算率和收入。
改善内部联系结构
除了页眉菜单和页脚之外,面包屑还帮助您在您的网站上传播股本链接。 您网站中指向网页的链接数量表明其显著性,而网页的级别越高,链接应越多。 分类应链接到主页,子类应链接到类别,产品页应链接到子类.
除了改善内部连接结构外,面包屑还可以增强网站的可爬性,协助搜索引擎了解网站的架构. 通过跟随面包屑提供的链接,搜索引擎爬行者可以在网站上发现更多页面,并更有效地进行索引. 这会导致搜索引擎排名提高,有机流量增加.
SE Ranking的网站审核工具可以帮助您优化您网站的链接结构,确保通过链接汁到正确的页面. 与搜索爬行者类似,这个工具跟随您网站上的链接,检测和帮助您解决Google可能不满意的任何链接问题.
在工具的_Issue Report_部分中,您可以访问网站审计中发现的所有问题的综合列表. 报告将问题归类为错误、警告或通知,允许您优先处理必要的纠正。 点击议题名称,可查看建议的解决办法的说明和详细分类。
检讨报告的 _ crawling_ & Indexing_和 _Links 的章节,以确保您的网站的页面被正确爬行和链接.
请检查access-date=中的日期值 (帮助) 本指南关于内部链接,学习如何使用所有内部链接类型,包括面包屑.
强制搜索片段
使用适当的面包屑标记 包括你的面包屑线索 在你的Google SERP片段。
如果你不使用实际的面包屑, 或者没有用谷歌所理解的语言告诉谷歌, 以下是面包屑如不包含網址内的网页类别,
使用 schema 标记以确保 Google 在片断中显示您的面包屑而不是修改的 URL 。 Google将根据其与搜索查询的关联性独立决定您网站的哪些类别将包含在线索中.
您在浏览页面的 SERP 片段时有一些选项 。 一种方法是在您选择的所有页面中进行人工Google搜索(一个一个). 也可以使用SE Ranking来检查单标签中的所有内容. 创建项目后, 您可以在_ 分析与交通_ 部分评估每个履带关键字的片断 。
工具存储数据超过30天, 您可以在此范围内选择任何日期或时间段, 并查看您在任何特定时间的 SERP 片段的长相 。
Google片段中的Breadcrumbs快速概述了该页面的类别以及网站提供的相关产品/信息. 这就是为什么拥有适当的面包屑是另一个因素,让用户选择自己的网站而不是在SRPs中的其他网站.
通过遵循Google指南,确保结构化数据标记的有效性。 为改善用户体验,Google建议提供面包屑,作为用户通向网页的共同路径,而不是仅仅复制URL结构. URL路径的某些组件可能无助于用户了解页面在您的网站上的位置.
为了解如何优化面包屑,
使用Google的Schema Markup 校验器验证结构化数据标记。 使用这个工具来测试和确认您的标记代码的准确性,确保它符合最佳做法,并且不出现可能影响您网站在搜索结果中出现的错误。
简言之,面包屑会向Google发送更好的行为信号,并在你的网站上正确分发链接果汁. 两者都是正排名信号,这意味着包括面包屑可以帮助你获得更高的搜索引擎排名.
让我们探索一些使用流行内容管理系统(CMS)的方法,
面包屑最佳做法
在您的网站上添加面包屑导航需要慎重考虑. 以下是有效使用面包屑的一些提示:
** 保持面包屑的航行小而无侵扰性* 页:1
为了保持均衡的外观设计,避免用户之间的混淆,在主站点导航下方以较小的尺寸显示面包屑导航.
如果面包屑导航太大,可能会扰乱页面的整体平衡,使用户难以浏览您的网站.
保持面包屑小径的方法之一是使用一个与网站其他部分融合的简单设计. 实施一种微妙的颜色方案,或者将面包屑小径放在不太突出的地方。
保持面包屑的痕迹 干净而无杂乱
一个不杂乱的面包crumb导航可以帮助用户专注于诸如页面标题和导航路径等基本信息. 这也防止了用户因不必要的设计元素而分心. 这可以改善总体用户体验,使网站导航方便用户.
为了达到这个目的,网站设计师可以和真正的用户一起测试面包屑线索. 这包括通过调查、用户审查或反馈表进行可用性测试或收集用户反馈。
对面包屑使用一致的格式
确保面包屑中的页面标题与网站的网页标题相符,使用户更容易在自己的位置按键并浏览网站。
使用一致的格式,如箭头或鞭打,将面包屑小径中的链接分开. 此外,确保导航的字体、颜色和样式与网站的总体设计一致。
包含全导航路径
这有助于用户在浏览时丢失时重新追踪其步骤. 有些网站可能隐藏主页或顶级页面,但您应当总是在面包屑导航中提供尽可能多的信息. 这有助于用户了解他们目前在网站上的立场。
避免链接到当前页面
将页面连接到自己对SIO不利. 尽管您可以在面包屑小径中加入当前页面, 也不应该在主页上添加面包屑, 如果用户不小心点击面包屑链接,最后在同一页上,这可能会引起混淆. 相反,将当前页面显示为没有链接的纯文本。 这使得用户更容易理解他们在网站结构中的位置. 从SEO的角度看,
例如,如果用户正在浏览iphone 16,面包屑可以是: Home > Electronics > 智能手机 > iphone 16(其中“iphone 16”为纯文本)。 或者像目标有它:
如何在您的网站上正确添加面包屑
在添加面包屑之前,
- 主导航下方正下方的页顶处贴着面包屑。 ** 这是用户共同和预期的地点。 然而,一些网站,如苹果公司,将面包屑放在页面的底部.
这是因为Apple的产品页面有很长的描述,所以用户否则会很难滚动到页面的顶部. 与苹果公司类似的网站(无尽滚动)也可以从页面底部的面包屑小径中受益. 也可以使用两条面包屑路径,一条位于顶部,另一条位于底部.
- 在启用面包屑之前,添加您网站代码的图示。 ** Schema markup是一个添加到HTML代码中的标记的语义词汇. 它帮助Google理解你的内容,并表明你的页面顶端的链接是面包屑.
将面包屑添加到您的网站上。
在WordPress中添加面包屑
如果您的网站运行在WordPress上,您可以使用特殊的插件添加面包屑. 也有可能自行编码一切。
让我们仔细看看Yoast SEO插件,
此插件的免费版本包括面包屑特性,但也可以为99 EUR获得Yoast SEO Premium版本. 要使用这个插件,您需要WordPress版本6.0或更高,您的托管服务必须支持PHP版本7.2.5或更晚.
安装和激活插件后,遵循这些步骤:
1. 通过点击WordPress仪表板中的“Yoast SEO”标签并选择“定居”来进入 Yoast SIO 设置。
2. 点击“高级”和“Bradecrumbs”标签。
3. 选择面包屑分隔符字符 。 这种方法用于分离面包屑,例如“”或“/”。
4. 根据需要定制面包屑设置 。 你可以在主页上显示面包屑,选择面包屑小径的前缀,以及更多.
5. 将“可启用面包屑”选项切换为“On”。
6. 单击“保存更改”以保存您的设置。
面包屑不会立刻出现在你的网站上。 在您的主题或孩子的主题标题中添加几行代码 。 php 文件启用它们.
< php 读取
如果( 函数_ 存在('yoast_ breadcrumb' )) {
yoast_breadcrumb('
如此, Breadcrumb 导航现在应该在您的网站上可见 。
** 自行编码面包屑**
编码面包屑可能是一项具有挑战性的任务。 这需要一些编码知识和经验。 具备所需技能和时间的,可以自行制作面包屑. 否则,将此委托给开发商.
创建面包crumb涉及写HTML和CSS代码来设计视觉布局,JavaScript代码用于交互. 精心规划面包屑结构,并彻底测试,以确保它在不同设备和浏览器上运作良好.
执行不当的面包屑可能无法按预期发挥功能,导致用户体验差,网站参与度降低. 要建立健全安全的面包屑代码,就必须对网络开发和安全做法有坚实的理解.
没有犹豫的余地
面包屑对导航至关重要,各种插件和模块可以使其易于执行. 如果您的网站有多个多层次的结构,
这条导航线索将帮助您的用户在您的网站和SERP中运行.
就这样! 你的下一步是采取行动 开始为你的网站创造适当的面包屑线索 如果你需要更多的帮助,你可以回去再读这篇文章! 如果每一步都紧紧跟着走,
Svitlana是SE Ranking公司的内容团队领跑者,她在此指导内容策略,并确保团队的输出达到标点. 她偶尔在SE Ranking博客上分享她的见解。 除了工作之外,斯维特兰娜还忙着让她的小孩活着和微笑. 她也是文学、艺术和旅行的粉丝。