hello，大家好，欢迎大家收听收看本期的咨道一课。今天爆老师和大家分享一个实体的案子，他不仅是在SEO上面，他在用户体验上面做的非常不错的网站，那这个网站是Firestone美国主站。
打开这个网站之后给予我们第一个感觉就是色彩非常的不错，搭配的非常不错并且非常的专业，从他的Logo体上你可以发觉上面Firestone是红色的与左边的一个导购栏目，那右侧是更多偏向于专业的深色调偏蓝色的。所以给我们感觉十分的搭调。此外的话，一些B2B的企业网站，也可以将自己的网站做成这样。为什么他们要做出这样的导购模式呢？因为当一个新用户来到企业站点的时候，如果你给到他很多类似于这样的一些大的栏目结构的时候，他必须要到里面一个一个去找，找你的产品。
因为有些用户他不了解你的网站，所以说通过传统的栏目形式，一个类目一个类目往下走的话比较容易迷失比较不容易找到自己想要的产品，而他用的方式却是恰恰相反的。比如我们选第二个Firestone下面他也提供汽车的电池电瓶，那在汽车电瓶里面他会问你一些，一些核心的小问题，你比如说车是几几年的，你的车的品牌是什么，比如我选的是马自达，型号是什么我选MX6，引擎是什么，引擎的model是什么，随后你打上自己在美国的zip code，因为美国是根据自己的code来定位或者是报价的。这几个项目你选完之后你点get pricing他就会给你带到关于你这个马自达MX6这个型号下的所有电池。因此你找产品是非常容易，不需要刚才讲了你从大栏目里一层层一层层去找或者是通过搜索来搜，你看他这里的搜索框都是不提供的。因为很多时候用户想买东西的时候，他自己不一定知道产品具体叫什么怎么去描述，是不是？或者有些型号如果网站不提醒他，我到底是MX4,mx5还是mx6，所以说如果网站能列出来提醒信息，这样的话你在选择产品的时候对应的准确性是非常强的，他的这种模式是非常不错的。
随后我们刚才讲到在用户体验上面这种方式是非常好的，而且我们刚才看到当他在切换左边的这六个小栏目的时候，他的页面其实是不变的，你看浏览器的URL框是不变的，只是这里面的小的widget内容在变。假如他们使用切换tab改url的话，可能页面的loading speed会下降，所以说这个体验式非常非常不错的。此外的话我们再看下面，当他在做正文内容的时候，他的limited time offers，你看他做的这样的一种图片方式啊，也是非常好看的，就是非常的统一，有没有左边是整个offer的文案，右边的是他的一个图型，像他一个个做的非常的精致。在他的下面他可以及时的抓住我们用户上sign up的一个欲望，就是说如果你觉得不错，愿意定期收到他的一些推送，那你就可以在这里放一个入口让他们去做。此外的话，我们看这里，当你在选择tyres的时候，你看他，当他这里搜索，你可以把你的汽车型号，你要可以根据你轮胎的大小来进行这样的一个搜索，所以说他提供了两种方式，这两种方式的切换不占面积，非常的舒服。用户每次的切换，有时候会发现搞不清楚到底是在哪里，很多中国网站会这样的，因为他这里用了红色和左边的大类目成为一个同色了，同色了你就知道你现在在哪一块了，灰色的这一块我们也知道一般代表禁用或者是没在用，因此我不是在这个tyre上面,细节上面也是做的非常的不错。
此外的话我们再去看一下SEO那里做得好，刚才爆老师讲到，你在切换这里的时候他的页面是不变的，但是仔细看一下左下角，我们浏览器这里的左下角当我们在换的时候其实他的URL是在变的，因此蜘蛛在抓这个页面的时候是可以抓到去往不同的这样一个通路。下面我们看一下他的原理，代码，在源代码其实他这一块其实就是在这里，这里是select a service,其实是在这一块对吧，所有的链接都是可以给蜘蛛抓到的，随后在select a service上面我们看这一段，alignment,all auto services,oil,所以我们在代码上看看，虽然他后面这一块他用的特效虽然这里成为widget ,但是他在前面是有通路的，是一个A标签的通路。因此蜘蛛可以很舒服的在这里抓取我们也可以用另外一种方式就是把我们的源代码贴到SEO工具里面，这个就是模拟蜘蛛去抓取，百度和谷歌都是有的。对吧，等一下这个地址贴一下刚才batteries的地址，我把这个打开，这个地址发生变化了啊，我把这个贴到我们这里面去看一下，随后你可以看到当我们刚才说的那些链接其实可以在这边看到，看到了吗，是不是在这边，刚才讲到的select a service这样的widget。这是个活链接蜘蛛是可以抓到的，所以说他这一块不仅用户体验做的不错而且SEO也是能够达到标准的，而这一页这一块是很适合当我们但是很多用户新用户不能很快的掌握，找的时候可以通过这样的一个方式结合体验做出来，所以说爆老师也是觉得不错的。
另外，看这里我之前提交的brakes就是他的刹车栏目，如果我之前是提交过的，我之前用zip code的告诉他我在美国的哪一块，直接显示的就是电话号码了，就是你所在的州或者是区你应该打那个电话，那我切换到IE浏览器，你可以看到他没有之前COOKIE记录的话，当我选brakes他会问我local store 是什么，需要你去打进去zip code，find a store 相对应的商店，如果我已经做过这个事情的话，你看不会在要你重新打了，他会告诉你这个区域直接打什么电话。所以这个细节是做的非常不错的，此外的其他的他的H标签，包括他的导航页是做的，包括你看他这里做的栏目的这样一种方式也是非常好的，你看相面两个做的一个让你知道额外的信息，这一块是download这两个空是给予他主营业务之外的插播东西，他会很统一的放在下面。上面的导航其实是不同的页面，在产品这一块是主要告诉你当你去维护你的汽车的时候，那些东西是需要你去看的，此外在右边的话，他更多的是让你去的小的tips，关于一些维护汽车的小常识，他会按照这样的一些栏目，这个栏目的布局是非常漂亮的。有没有，放的非常的好，非常的清晰，图片button这个button就非常的清晰，你想要了解这个马上就可以点对吧。你看包括tires这个栏目也是同样的道理，非常的明显，产品归产品，关于某一些小知识的这个区域分的非常的清楚。
这个网站Firestone你可以去了解一些，在做我们企业站，一些网站或者小型电子商务的时候可以在首页运用这样的一种方式，这就是爆老师和大家分享的案例，希望大家喜欢，下期再见，byebye！
