面包屑设计:以用户还是以SEO为中心?

当我们分析一个网站可用性的时候,必定会考虑到面包屑。对于用户来说,面包屑几乎是一个“透明”的玩意儿,有谁会仔细观察那些页面左上方的导航链接呢?是的,没人在意,但却也没有人离得开它。

面包屑,就是在任何一个页面,都能清楚的知道让访问者明白他所在的具体位置的网站 GPS 定位系统,而面包屑导航对于大型网站和按分级排列页面的网站,更是不可或缺。就凭这一点,我们要介绍一下关于面包屑的一些核心内容:

一、面包屑的类型

一般来说,面包屑设计主要分为三种类型(作者坚持推荐第一种类型,因为后面两种类型很容易造成内容重复的问题)

1、基于定位的面包屑:显示用户在网站整体结构中的具体位置。

2、基于路径的面包屑:想象一下把用户带到当前页面的路径,这些页面都是动态的而且都是基于搜索的结果,所以这类型的面包屑会导致有几种达到该页的方式:


以下为引用的内容:

咨询> 服务 > 履行 > 服务 A

咨询 > 服务 >优化 > 服务 A

咨询 > 服务 > 升级 > 服务 A

3、基于属性的面包屑:列出当前页的属性

二、面包屑的关键词优化

很多人都将面包屑当做内部链接优化的另外一种方式,所以他们通常将面包屑关键词设计如下:


以下为引用的内容:

主关键词(链向主页)>主关键词+词(目录链接)-主关键词+词

例子:


以下为引用的内容:

海报(链向主页)>明星海报(目录链接)>阿根廷朱莉海报

有些时候(如上)这样设计面包屑虽然看起来依然很自然,但总体来看作者更加倾向尽量减少以 SEO 中心化的设计,原因如下:

1、太聚焦在锚文本优化的面包屑设计看起来很别扭,会导致页面内容非常不自然。

2、在网站可用性前不要过分注重 SEO。用户通常都知道“主页”意味着链向什么地方,但如果硬换成关键词就会引起误会和猜想,所以还是使用一贯认同的面包屑设计标准。

三、面包屑和 Google

从今年 11 月份开始,Google 已经整合了面包屑导航到搜索结果里面,使得更加吸引和可信赖性,但不是每个面包屑导航都可以被 Google 采用,但是将面包屑放在页面的越顶部越好。

4、面包屑的最好实践

面包屑真正能帮助用户的时候才使用。对于大型的,多层次的网站,面包屑首先就可以帮助用户,其次就是有助于 SEO 优化—这是一个额外的收益。不要仅仅为了更好的内部链接优化而使用面包屑。

当前页不要链接。(最后的一页的词语不要加链接效果)

不要用面包屑导航取代主导航栏。(面包屑在网站结构当中是横条结构的,试想下主导航却是垂直型展示目录和内容,没有了主导航会怎样呢?)

连贯地使用面包屑(这样使得用户在浏览你的网站的时候更有安全感同时可以更快地熟悉你网站的结构)

不要将页面的标题用作面包屑(这样会导致标题太长而且没有目的性)

时间: 2024-12-31 12:55:55

面包屑设计:以用户还是以SEO为中心?的相关文章

分面面包屑设计技巧:设计分面搜索界面技巧

文章描述:分面面包屑在我看来是下一代查找界面中最直观的关键控件,充分整合了分面搜索和浏览功能.我希望这篇文章能够协助大家设计分面搜索界面,也希望大家帮助宣传分面面包屑设计,帮助我们把灵活的一体化搜索普及到实践中. 译者注:搜索的关键是让用户更加容易的找到所需的信息,我发现该文精心的为用户创造了一个灵活的解决方法,交互形式不在拘泥于固有的设计原则,更多是从实际情况出发,创造更适合的交互控件. 翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正. 原文地址:faceted-finding

网页设计技巧之面包屑设计

What? 什么是面包屑 面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点. 最常见的面包屑的样式是:横向的文字链接,由大于号">"分开,这个符号也暗示了它们的层级关系. [ 面包屑的分类] 1.基于用户所在的层级位置.(Location-based) 基于位置的面包屑用于告知用户在当前网站中所在的结构层级.用在具有多级导航(通常具有2级以上导航)的网站中. 2.基于产品的属

网页设计理论:面包屑设计

先谈一下面包屑的由来:       很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命.他的儿子名叫汉赛尔,女儿名叫格莱特.后来樵夫的妻子去世了,他又给孩子们娶了一个后母.后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉.汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里.       在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上.后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑.汉赛尔安慰他的

网页设计面包屑:面包屑的使用前提及设计规范

文章描述:网站面包屑(breadcrumb)设计. 一.什么是面包屑 A "breadcrumb" (or "breadcrumb trail") is a type of secondary navigation scheme that reveals the user's location in a website or Web application. The term comes from the Hansel and Gretel fairy tale i

【读书分享】 Web导航设计—面包屑

先谈一下面包屑的由来: 很久很久以前,在大森林的边上住着一个贫穷的樵夫,他妻子和两个孩子与他相依为命.他的儿子名叫汉赛尔,女儿名叫格莱特.后来樵夫的妻子去世了,他又给孩子们娶了一个后母.后母计划把两个孩子带到森林的深处,然后趁他们睡着的时候跑掉.汉赛尔无意中知道了后母的计划,于是偷偷地把一块面包藏在了口袋里. 在去森林的路上,汉赛尔悄悄地捏碎了他的面包,并不时地停下脚步,把碎面包屑撒在路上.后母顺利地趁孩子们睡着的时候溜掉了,汉赛尔和格莱特醒来已是一片漆黑.汉赛尔安慰他的妹妹说:"等月亮一出来,

电子商务网站设计分析:面包屑导航

AnyForWeb正式推出电子商务网站设计分析的系列文章,每月更新,本次主题为电商网站的面包屑导航设计,欢迎关注! 网站中的面包屑导航(Breadcrumb Navigation)导航是一种作为辅助和补充的导航方式,它能帮助用户明确当下所在的网站内位置,并快捷返回之前的路径. 面包屑的由来出自一个童话,两个孩子为了不在森林里迷路,于是沿途洒下了面包屑作为标记,帮助自己能够原路返回.通过这个故事我们可以看出,之所以被称为面包屑导航,正是因为它在网站中也起了相同的作用,让用户既能看清自己在网站中所处

网站设计分析:超级面包屑的分面查找

译者注:搜索的关键是让用户更加容易的找到所需的信息,我发现该文精心的为用户创造了一个灵活的解决方法,交互形式不在拘泥于固有的设计原则,更多是从实际情况出发,创造更适合的交互控件. 翻译了这篇文章跟大家共享,若大家发现任何错误,欢迎随时给予纠正. 原文地址:faceted-finding-with-super-powered-breadcrumbs 如今的查找界面没有有效的支持一体化查找,用户的注意力经常被一些不同的搜索结果和浏览界面所混淆.在这篇文章中,我建议使用一体化分面(分面指事物多维度的属

CSS3实例代码:兼容多浏览器的面包屑

文章简介:兼容多浏览器的面包屑. 面包屑是Web中常见的一个元件,早前在<CSS3制作Breadcrumbs>和案例<css3面包屑设计>使用CSS3制作了各式各样的面包屑效果,今天使用上原始的CSS配合一定的标签制作了一款兼容多浏览器的面包屑案例,感兴趣的可以看看: HTML <ul class="clearfix">  <li>面包屑一<em></em><i></i></li>

怎样才能兼顾用户体验和SEO优化

众所周知,网站建设的过程中,用户体验和SEO优化都是非常重要的一部分,一个好的用户体验网站设计,大图片是占据着重要的部分,因为大多数吸引用户的还是图片的视觉冲击力,但仅仅图片是非常不利于搜索引擎SEO的优化,SEO优化重要的是内容(文字)和外链,这与用户体验有着一定的冲突.所以能设计出用户体验和SEO优化都能兼顾的网站是现阶段中小型企业的重中之重.其实在网路上也有朋友对此的介绍,但我的思路与其稍微有些不同,以下介绍的主要思路为拼接.特别适合在设计行业不久的朋友. 第一.寻找一个不错的网页设计门户