浅谈前端设计与SEO

你可晓得？每日里百度蜘蛛所抓取的网页当中，有超过百分之四十的网页，是由于代码结构杂乱无章或者加载速度过于迟缓，从而遭到放弃抓取的处理，这表明了你耗费诸多心血所撰写的内容，根本就不存在进入搜索引擎索引库的机会。身为前端工程师，你所编写的每一行代码，都扮演着裁判的角色，决定着该网站是否能够被搜索引擎精准理解并且成功收录。

标题标签要突出重点

搜索引擎判断内容相关性所依据的首要部分是页面标题，每个页面的title标签都应当具备独一无二的特性，要将最重要的关键词放置在前面，并且同一个关键词出现的次数不要超过两次，像进行产品介绍的页面，能够写成“产品名称-品牌名-官方网站”此种格式。

虽描述标签不直接影响排名，却会现于搜索结果影响用户点击。概括页面内容，80 字内说明其给 用户提供的价值，勿为凑词写重复话。关键词标签作用如今不大，列三五个核心词即可。

代码语义化让蜘蛛读得懂

搜索引擎的爬虫好似盲人一般，仅能借助HTML此代码，去理解网页页面的内容，将h1标签用于包裹文章主要标题之举实施，把构建内容层级这一行为通过h2至h8标签负责，列表内容借助ul或者ol标签来呈现，把重要文字采用strong标签予以强调，像如此书写而成的代码，即便是将样式予以去除，其结构依旧清晰明了呐。

拿禅意花园网站来说，它堪称典型示例，在缺乏CSS的状况下，内容的层级依旧清晰可辨。从事前端工程师工作的人编写代码之际，需始终牢记：要是把样式去除掉，用户是否还能够明白页面的结构呢？如此这般，不但能够对SEO起到助力作用，对于维护代码而言，益处也是极大的。

重要内容放在代码最前面

关于蜘蛛抓取HTML，其方式是自上至下逐行进行读取的，而在页面代码排版方面，应将承载主要内容的代码置于左侧或者中间栏的前方，并使得那些诸如广告、友情链接等属于次要内容的代码放置在底部，借助CSS的浮动定位手段，实际上能够在视觉呈现上最终把侧边栏放置于左边，然而在代码的顺序层面，主要内容的代码却是处在前面的。

淘宝的商品详情页是如此这般去做的，商品标题、价格、参数等关键信息的HTML代码皆处于最靠前的位置，然而“你可能还喜欢”这类推荐模块的代码却在其后。如此这般保证了蜘蛛每一次前来都能够率先抓取到最为重要的内容。

图片优化不能只靠alt属性

把alt属性添加到图片之上，这属于最为基础的优化操作，然而这仅仅只是处于及格的界限范围。实际上真正意义上的优化，是要达成图片既能够被搜索引擎所领会理解，同时又不会致使加载速度变得迟缓缓慢。将多张图标进行合成从而形成一张CSS精灵图，这样能够削减减少HTTP请求的数量数目，360官网首页把几十个数量的小图标，合并成为了两张图片。

对于那必须借助图片来展示展现呈现的标题上的文字内容，能够运用text-indent负值将文字往外挤出屏幕范围区域，在背景图之上留存保留留下文字的样式模样，但要留意注意不能采用display:none去隐藏隐匿文字，因为搜索引擎的话会认定认为这是在进行作弊行为举动从而忽略忽视这部分的内容信息。

加载速度决定抓取深度

一个网站被百度蜘蛛抓取的时间是存在预算的，加载速度越快能够抓取的页面数量就越多。将CSS放置在头部，把JS放置在底部是基本的操作，CSS以及JS文件需要进行压缩合并。为静态资源设定过期时间，当用户第二次进行访问时直接从本地缓存读取，其速度飞快，如同在本地打开文件一般。

360网站卫士所具备的CDN服务，能够实现自动加速，淘宝在启用GZIP压缩之后，页面大小降低了70%，这些技术手段，不但使得用户打开速度变快，更为关键的是，能让蜘蛛在同等时间之内抓取到更多的页面内容。

伪静态让动态网页更好抓

以PHP、Python所开发的动态网站，其URL之中常常带有问号以及参数，当蜘蛛对这类地址进行抓取之时，常常会迷失方向。借助伪静态技术，将“article.php?id=123”转变为“article/123.html”，如此一来，蜘蛛便会将其当作静态页面予以抓取。若是URL里能够带上拼音关键词，那么效果将会更佳。

京东那儿的商品地址属于典型的伪静态范畴，它把分类以及商品ID都弄成了目录样式。然而需要留意一点，即伪静态规则可千万别太繁杂，不然服务器就得耗费大量时间去解析地址，进而反倒拖慢加载速度，如此实在是得不偿失了。

你可曾碰到过，费尽心力去优化代码，然而排名却丝毫不见上涨的状况？欢迎于评论区当中分享你遭遇过的踩坑经历，点赞数量多的朋友，我将会送出SEO诊断工具包。