前端使用vue如何做SEO优化
发布时间: 2022-03-26 00:32:31点击次数: 565

搜索引擎优化指为了提升网页在搜索引擎自然搜索结果中(非商业性推广结果)的收录数量以及排序位置而做的优化行为,是为了从搜索引擎中获得更多的免费流量,以及更好的展现形象。当然如果是sem就不必那么费神了。


要了解SEO,必须了解搜索引擎的工作原理,重要的tdk是每个优化师都必须掌握的基础知识,其原理是比较复杂,流程简化如下:一般爬虫抓取页面内容是先从一个页面出发,从中提取出其他页面的链接,然后当作下一个请求的对象,一直重复这个过程。所以要有良好的SEO,需要你在各大网站上拥有外链,这样会提高你的网站被搜索引擎爬虫的几率。爬虫拿到HTML之后,就会对其内容进行分析。一般需要进行去杂、分词、简历索引数据库。什么是索引数据库呢?简单地说就是记录一个词在哪些文档中出现、出现次数、出现的位置等等。为什么要简历索引数据库呢?是为了快速查找。搜索会根据你输入的关键词,分别查询其对应的索引数据库,并对结果进行处理和排序。


故而有如下要求:


网站结构要清晰。一般网站的结构是树形的,一般分为三个层次:首页 → 频道页(列表页) → 文章页(详情页)。

网站的结构要扁平。结构层数越少越好,一般不要超过三层,搜索引擎一般到了第三层就不想继续深入地爬取了。多数的网站,例如掘金、雪球等,他们的网站结构是两层,他们的首页和频道页是同一个页面。页面应该要有简明的导航。导航可以让搜索引擎知道网站的结构,也可以让搜索引擎知道当前页面在网站结构所在的层次。每一个页面都包含NAV导航。对于内容较多的网站可以采用面包屑导航。链接使用文字链接,如果是图片,则通过alt属性告知搜索引擎链接的指向。规范、简单、易理解的URL能让搜索引擎更好地抓取内容。建议:同一个页面,只对应一个url。多个url可以采用301进行重定向。url尽量简短。尽量减少动态url中包含的变量参数。


Sitemap 可推送搜索引擎他们网站上有哪些可供抓取的网页,以便搜索引擎可以更加智能地抓取网站。

搜索引擎爬行网站**个访问的文件就是robots.txt。在这个文件中声明该网站中不想被蜘蛛访问的部分,这样,该网站的部分或全部内容就可以不被搜索引擎访问和收录了,或者可以通过robots.txt指定使搜索引擎只收录指定的内容。


如果站点临时关闭,当网页不能打开时,建议使用503状态。503可以告知百度spider该页面临时不可访问,请过段时间再重试。如果百度spider对您的站点抓取压力过大,请尽量不要使用404,同样建议返回503。这样百度spider会过段时间再来尝试抓取这个链接,如果那个时间站点空闲,那它就会被成功抓取了。有一些网站希望百度只收录部分内容,例如审核后的内容,累积一段时间的新用户页等等。在这种情况,建议新发内容暂时返回403,等审核或做好处理之后,再返回正常状态的返回码。


标题title是告诉搜索引擎网页的主要内容。是非常重要的。每个网页应该有一个独一无二的标题,切忌所有的页面都使用默认标题。标题要主题明确和精练,包含这个网页中*重要的内容,且不罗列与网页内容不相关的信息用户浏览通常是从左到右的,重要的内容应该放到title的靠前的位置。


合适的description,描述介绍是对网页内容的精练概括。这个标签存在与否不影响网页权值,只会用做搜索结果摘要的一个选择目标。为每个网页创建不同的description,避免所有网页都使用同样的描述网站首页、频道页、产品参数页等没有摘要的网页*适合使用description准确的描述网页,不要堆砌关键词,长度合理


当前对于SEO支持比较好的项目方案是采用服务端渲染。所以如果项目有SEO需求,那么比较好的方案是服务端渲染。如果你已经采用了前后分离的单页项目,而你的网站内容不需要AJAX去获取内容和展示内容,那么可以试试prerender-spa-plugin这个插件,这个插件是一个webpack插件,可以帮助你在打包过程中通过无头浏览器去渲染你的页面,并生成对应的HTML。当然这个方案适合你的路由是静态的,并且路由数量非海量。


如果你的内容是AJAX动态获取的,那么vue单页项目可以试试prerender,这个是一个预渲染服务,可以帮你通过无头浏览器渲染页面,并返回HTML。这个方案和prerender-spa-plugin很相似,都是通过无头浏览器去渲染页面,不同的是渲染的时机,prerender-spa-plugin是在打包过程中渲染,注定了其只能渲染静态路由,而prerender 是在请求时渲染,所以可以渲染动态的路由。请自行百度查案相关的教程。这里不再详细介绍。


通过以上的方法已经将HTML的请求时间稳定在2s左右。以上就是我想讲的关于前端vue编码SEO的大致基础型的内容,然而我们是不推荐seo采用vue架构的。这不是一个正确的方向。懂技术的都懂。


标签: SEO