谈谈以前端角度出发做好SEO需要考虑什么

大家好,我是IT修真院深圳分院第02期学员,一枚正直善良的web程序员。

今天给大家分享一下,修真院官网css任务15,深度思考中的知识点——谈谈以前端角度出发做好SEO需要考虑什么?

1.背景介绍

什么是SEO?

SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”!SEO是指在了解搜索引擎自然排名机制的基础之上,对网站进行内部及外部的调整优化,改进网站在搜索引擎中关键词的自然排名,获得更多的展现量,吸引更多目标客户点击访问网站,从而达到互联网营销及品牌建设的目标。搜索引擎检索原则是不断更改的,检索原则的更改会直接导致网站关键字在搜索引擎上排名的变化,所以搜索引擎优化并非一劳永逸。

2.知识剖析

搜索引擎工作原理

在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据库。反之,如果“蜘蛛”认为是垃圾信息或重复信息,就舍弃不要,继续爬行,寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时,就能检索出与关键字相关的网址显示给访客。

一个关键词对应多个网址,因此就出现了排序的问题,相应的与关键词最吻合的网址就会排在前面了。在“蜘蛛”抓取网页内容,提炼关键词的这个过程中,就存在一个问题:“蜘蛛”能否看懂。如果网站内容是flash和js,那么它是看不懂的,会犯迷糊,即使关键字再贴切也没用。相应的,如果网站内容是它的语言,那么它便能看懂,它的语言即SEO。

从宏观的角度来说,SEO有三条最重要的规律,那就是原创的内容、高质量的外部链接和适度的优化。前端是构建网站中很重要的一个环节,本节重点从前端的角度来讲解一下SEO的实施方法。前端的工作主要是负责页面的HTML+CSS+JS,优化好这几个方面会为SEO工作打好一个坚实的基础。突出重点内容可以让搜索引擎判断当前页面的重点是什么,提升网站的访问速度可以让搜索引擎的蜘蛛顺利、快速、大量的抓取页面内容,所以我就着重以突出重要内容和提升网站速度来总结一下。

3.常见问题

前端部分如何进行SEO?

4.解决方案

(1)网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。

一般而言,建立的网站结构层次越少,越容易被“蜘蛛”抓取,也就容易被收录。一般中小型网站目录结构超过三级,“蜘蛛”便不愿意往下爬,“万一天黑迷路了怎么办”。并且根据相关调查:访客如果经过跳转3次还没找到需要的信息,很可能离开。因此,三层目录结构也是体验的需要。

1. 控制首页链接数量

网站首页是权重最高的地方,如果首页链接太少,没有“桥”,“蜘蛛”不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。因此对于中小型企业网站,建议首页链接在100个以内,链接的性质可以包含页面导航、底部导航、锚文字链接等等,注意链接要建立在用户的良好体验和引导用户获取信息的基础之上。

2.扁平化的目录层次

尽量让“蜘蛛”只要跳转3次,就能到达网站内的任何一个内页。扁平化的目录结构,比如:“植物”–> “水果” –> “苹果”、“桔子”、“香蕉”,通过3级就能找到香蕉了。

3.导航优化

导航应该尽量采用文字方式,也可以搭配图片导航,但是图片代码一定要进行优化,img标签必须添加“alt”和“title”属性,告诉搜索引擎导航的定位,做到即使图片未能正常显示时,用户也能看到提示文字。其次,在每一个网页上应该加上面包屑导航,好处:从用户体验方面来说,可以让用户了解当前所处的位置以及当前页面在整个网站中的位置,帮助用户很快了解网站组织形式,从而形成更好的位置感,同时提供了返回各个页面的接口,方便用户操作;对“蜘蛛”而言,能够清楚的了解网站结构,同时还增加了大量的内部链接,方便抓取,降低跳出率。

4.网站的结构布局–不可忽略的细节

页面头部:logo及主导航,以及用户的信息。

页面主体:左边正文,包括面包屑导航及正文;右边放热门文章及相关文章,好处:留住访客,让访客多停留,对“蜘蛛”而言,这些文章属于相关链接,增强了页面相关性,也能增强页面的权重。

页面底部:版权信息和友情链接。

特别注意:分页导航写法,推荐写法:“首页 1 2 3 4 5 6 7 8 9 下拉框”,这样“蜘蛛”能够根据相应页码直接跳转,下拉框直接选择页面跳转。而下面的写法是不推荐的,“首页 下一页 尾页”,特别是当分页数量特别多时,“蜘蛛”需要经过很多次往下爬,才能抓取,会很累、会容易放弃。

5.控制页面的大小

减少http请求,提高网站的加载速度。一个页面最好不要超过100k,太大,页面加载速度慢。当速度很慢时,用户体验不好,留不住访客,并且一旦超时,“蜘蛛”也会离开。

(2)网页代码优化

1.title标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的title标题中不要设置相同的内容。

2.meta keywords标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。

3.meta description标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。

4.body中的标签:尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,nav标签是用来设置页面主导航的等。

5.a标签:页内链接,要加 “title” 属性加以说明,让访客和 “蜘蛛” 知道。而外部链接,链接到其他网站的,则需要加上 el=”nofollow” 属性, 告诉 “蜘蛛” 不要爬,因为一旦“蜘蛛”爬了外部链接之后,就不会再回来了。

6.正文标题要用h1标签:“蜘蛛” 认为它最重要,若不喜欢h1的默认样式可以通过CSS设置。尽量做到正文标题用h1标签,副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。

7.img应使用 “alt” 属性加以说明

8.strong、em标签 : 需要强调时使用。strong标签在搜索引擎中能够得到高度的重视,它能突出关键词,表现重要的内容,em标签强调效果仅次于strong标签。

9.巧妙利用CSS布局,将重要内容的HTML代码放在最前面,最前面的内容被认为是最重要的,优先让“蜘蛛”读取,进行内容关键词抓取。

10.谨慎使用 display:none :对于不想显示的文字内容,应当设置z-index或设置到浏览器显示器之外。因为搜索引擎会过滤掉display:none其中的内容。

5.编码实战

6.扩展思考

如何不让搜索引擎抓取网站的隐私内容

Robots协议(也称为爬虫协议、机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol), 网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓取。

7.参考文献

参考一:百度百科

参考二:前端SEO技巧

8.更多讨论

还有哪些搜索引擎优化的方法?

搜索引擎如何抓取网页?

白帽SEO和黑帽SEO的区别?

9.视频资料

谈谈以前端角度出发做好SEO需要考虑什么_腾讯视频

PPT

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

下期不见不散~

    原文作者:与其感慨路难行
    原文地址: https://www.jianshu.com/p/7d7d83e4ec46
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞