前端系统SEO方案

941 阅读12分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

一、SEO简介

SEO(Search Engine Optimization),即搜索引擎优化。是指是为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为(网站Web结构调整、网站内容建设、网站代码优化和编码等和站外优化)。而优化的目的就是为了提升网站在搜索引擎中的权重,增加对搜索引擎的友好度,使得用户在访问网站时能排在前面。

分类:白帽SEO和黑帽SEO。白帽SEO,起到了改良和规范网站设计的作用,使网站对搜索引擎和用户更加友好,并且网站也能从搜索引擎中获取合理的流量,这是搜索引擎鼓励和支持的。黑帽SEO,利用和放大搜索引擎政策缺陷来获取更多用户的访问量,这类行为大多是欺骗搜索引擎,一般搜索引擎公司是不支持与鼓励的。

通过黑帽 SEO 技术欺骗搜索引擎是一条危险的道路,会带来糟糕的用户体验。因此从长远的利益角度出发我们只考虑白帽SEO技术。

那么白帽SEO能做什么呢?

  1. 对网站的标题、关键字、描述精心设置,反映网站的定位,让搜索引擎明白网站是做什么的;
  2. 网站内容优化:内容与关键字的对应,增加关键字的密度;
  3. 在网站上合理设置Robot.txt文件;
  4. 生成针对搜索引擎友好的网站地图;
  5. 增加外部链接,到各个网站上宣传。

二、搜索引擎工作原理

搜索引擎的基本工作原理包括如下三个过程:

image.png

三、为什么要做SEO

提高网站的权重,增强搜索引擎友好度,以达到提高排名,增加流量,吸引更多目标客户点击访问网站,从而达到互联网营销及品牌建设的目标。

四、seo优化策略

一、站内优化

站内优化顾名思义就是指网站内部优化,即网站本身内部的优化。包括代码标签优化、内容优化和URL优化 。

以下从前端人员职责分析与推荐SEO方法

1、网站内容优化

① 单页面应用无法抓取内容

目前流行的单页面应用都是采用js等搜索引擎无法识别的技术来做的,蜘蛛无法执行js,相应的页面内容也无从抓取。

方案:SSR(服务端渲染)就是将页面在服务端渲染完成后在客户端直接展示。

因此我们首先要做的就是让搜索引擎可以抓取到我们网站的内容,这也是开启我们seo的第一步。

SSR的实现方式:

  1. vue-ssr
  2. nuxt.js
  3. 预渲染 prerender-spa-plugin + vue-meta-info;

② 合理的设计title、description和keywords

  1. 标题:只强调重点即可,尽量把重要的关键词放在前面,关键词不要重复出现,尽量做到每个页面的<title>标题中不要设置相同的内容。
  2. 标签:关键词,列举出几个页面的重要关键字即可,切记过分堆砌。
  3. 标签:网页描述,需要高度概括网页内容,切记不能太长,过分堆砌关键词,每个页面也要有所不同。

推荐使用vue-meta-info,来设置vue 单页面meta info信息,支持SSR

③ 提高页面关键词密度(关键词在所有文字内容中出现的比例)

提升关键词的密度,有利于提升搜索引擎针对对应关键词的搜索排名。但并不是我们整个页面密密麻麻堆砌关键词就好。

关键词位置、密度、处理

  • URL中出现关键词(英文)
  • 网页标题中出现关键词(1-3个)
  • 关键词标签中出现关键词(1-3个)
  • 描述标签中出现关键词(主关键词重复2次)
  • 内容中自然出现关键词
  • 内容第一段和最后一段出现关键词
  • H1,H2标签中出现关键词
  • 导出链接锚文本中包含关键词
  • 图片的文件名包含关键词
  • ALT属性中出现关键词
  • 关键词密度2-8%
  • 对关键词加粗或斜体

④ 语义化标签

尽量让代码语义化,在适当的位置使用适当的标签,用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如:h1-h6 是用于标题类的,

标签是用来设置页面主导航的等。

⑤ 链接

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

  • 内链采用绝对路径,减少响应时间,避免出现死链接,减少给搜索引擎堵塞。
  • 页面跳转尽量使用a标签,而不是js控制跳转。

⑥ 其他

细枝末节但不可忽视的优化

  1. 正文标题要用h1标签:h1标签自带权重“蜘蛛” 认为它最重要,一个页面有且最多只能有一个H1标签,放在该页面最重要的标题上面,如首页的logo上可以加H1标签。副标题用h2标签, 而其它地方不应该随便乱用 h 标题标签。
  2. 应使用 "alt" 属性加以说明
  3. 尽量少使用iframe框架,因为“蜘蛛”一般不会读取其中的内容。
  4. 设置好404页面,减少网站跳出率。
  5. 重要内容不要用js输出,因为蜘蛛不会执行js
  6. 巧妙布局,将重要内容放在html文档前面,让蜘蛛优先读取。

2、网站结构优化

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

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

(1)控制首页链接数量

网站首页是权重最高的地方,如果首页链接太少,没有“桥”,“蜘蛛”不能继续往下爬到内页,直接影响网站收录数量。但是首页链接也不能太多,一旦太多,没有实质性的链接,很容易影响用户体验,也会降低网站首页的权重,收录效果也不好。

建议首页链接在100个以内;

(2)扁平化的目录层次

尽量让“蜘蛛”只要跳转3次,就能到达网站内的任何一个内页。

(3)导航优化

导航应该尽量采用文字方式,也可以搭配图片导航,但是图片代码一定要进行优化,标签必须添加“alt”和“title”属性,告诉搜索引擎导航的定位,做到即使图片未能正常显示时,用户也能看到提示文字。

② 建立网站地图

当蜘蛛来到我们的网站时,告诉它我们有多少页面,不同页面是按什么分类的,每个页面的地址是什么。顺着我们的指引,蜘蛛会很轻松的爬遍所有内容。另外,如果你的页面分类比较多,而且数量大,建议添加sitemap索引文件。如果站点经常更新添加新页面,建议及时更新sitemap文件;

方案推荐: sitemap.js 高级站点地图生成框架,可以轻松创建站点地图XML文件

二、站外优化

从字面理解,就是非网站内容的,而是网站外部的优化。在极端情况下,站内优化做得不好的情况下,如果站外seo优化得当,也能产生很好的结果。实际来看,相对于站内,站外优化的过程不具备可控性,更加困难。站外seo优化方法涵盖反向链接建设,也就是俗称的发外链以及品牌曝光,右侧排名等。

反向链接。友情链接就是反向链接的一种。优化关键字排名的核心就是获取大量高权重,高PR的反向链接。

我们经常会在页面底部看到友情链接。友情链接是作为网站之间相互交换流量,互惠互利的合作形式。事实上,友情链接对网站权重提升有着至关重要的作用。友链不仅可以引导用户浏览,而且搜索引擎也会顺着链接形成循环爬取,可以有效提升网站流量和快照的更新速度。

如何建设高质量的外链(反向链接)?

1、高质量的内容

产生高质量的外部链接最好的方法就是书写高质量的内容,站长们的文章能够让读者产生阅读的欲望而对文章进行转载

2、合作伙伴、链接交换

与合作伙伴互相推荐链接。与行业网站、相关性网站进行链接

3、分类目录

将网站提交到DMOZ目录、Yahoo目录和ODP目录一些专业目录网站

4、社会化书签

将网站加入百度收藏、雅虎收藏、Google书签、QQ书签等社会化书签

5、发布博客创建链接

目前获取外部链接最有效的方式之一就是通过发布博客文章

五、优化步骤

SEO技术并不是简单的几个建议,而是一项需要足够耐心和细致的脑力劳动。大体上,SEO优化主要分为8小步:

1、关键词分析(也叫关键词定位)

这是进行SEO优化最重要的一环,关键词分析包括:关键词关注量分析、竞争对手分析、关键词与网站相关性分析、关键词布置、关键词密度、关键词排名预测。

借助站长工具爱站网或者各种站长后台我们可以分析出ip来路,以及关键词的搜索热度和相关词,我们再把这些词以一定的密度添加到页面中,以此来提升命中率,这里主要是运营同学的工作。

2、网站架构分析

网站结构符合搜索引擎的爬虫喜好则有利于SEO优化。网站架构分析包括:剔除网站架构不良设计、实现树状目录结构、网站导航与链接优化。

3、网站目录和页面优化

SEO不止是让网站首页在搜索引擎有好的排名,更重要的是让网站的每个页面都带来流量。

4、内容发布和链接布置

搜索引擎喜欢有规律的网站内容更新,所以合理安排网站内容发布日程是SEO优化的重要技巧之一。链接布置则把整个网站有机地串联起来,让搜索引擎明白每个网页的重要性和关键词,实时的参考是第一点的关键词布置。友情链接战役也是这个时候展开。

5、与搜索引擎对话

向各大搜索引擎登陆入口提交尚未收录站点。在搜索引擎看SEO的效果,通过site:站长们的域名,知道站点的收录和更新情况。通过domain:站长们的域名或者link:站长们的域名,知道站点的反向链接情况。更好的实现与搜索引擎对话,建议采用Google网站管理员工具。

6、建立网站地图SiteMap

根据自己的网站结构,制作网站地图,让站长们的网站对搜索引擎更加友好化。让搜索引擎能过SiteMap就可以访问整个站点上的所有网页和栏目。

最好有两套siteMap,一套方便客户快速查找站点信息(html格式),另一套方便搜索引擎得知网站的更新频率、更新时间、页面权重(xml格式)。所建立的sitemap要和站长们网站的实际情况相符合。

7、高质量的友情链接

建立高质量的友情链接,对于seo优化来说,可以提高网站PR值以及网站的更新率,都是非常关键性的问题。

8、网站流量分析

网站流量分析从SEO结果上指导下一步的SEO策略,同时对网站的用户体验优化也有指导意义。流量分析工具,建议采用分析工具Google Analytics分析工具和百度统计分析工具。

总结

相对来讲,站内优化更多的是自己说自己有多好,站外seo则是别人说你有多么好。如果自己很好,别人也说你好,那么在网站优化的角度来讲,你就成功了。

想要做好SEO并不是一件简单的事,需要持之以恒,面面俱到。对网站持续关注,并保持更新。从长远打算,切不可投机取巧,只图一时的效果做违背搜索引擎的操作,也就是常说的黑帽SEO,否则被百度K掉就得不偿失了。