来自 Web前端 2020-04-29 17:44 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

【网上澳门金莎娱乐】vue项目做seo_关于vue项目的seo问题

exports.siteFile = { '/favicon.ico': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/images/favicon.ico')), '/sitemap.xml': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/sitemap.xml')), '/robots.txt': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/robots.txt'))};

所以说,即使是像vue这种前后端分离开发的网站,我们还是能够通过其他技术解决seo问题的。常用的解决方案有三种:

一般的单页面是发送一个“空白”的HTML到浏览器,浏览器通过再获取页面对应的js文件, js操作dom展示页面,但是SEO无法去解析js的内容,爬虫所“看到”的,其实是一个空白的页面,SEO中重要的TDK,在单页面应用中只能设置固定的TDK,或者通过js去设置的,再次设置的实际爬虫也是无法获取的,再者,单页面应用在访问跳转页面时,实际只是替换了中间变化的模板部分,整体模板头部尾部是不变的,这就造成了对浏览器而言,实际我们访问的一直都是一个地址只是后面的参数在变化,对于很多网站分析工具就无法做针对用户访问路径的优化分析单页面的模式,在切换页面,访问URL上体验好,流畅度高,对于部署也较简单,但是对有SEO需求的就不是很友好了

关于收录问题:

一:为什么要做SEO

目前百度spider抓取新链接的途径有两个:

模式公共模板(头部底部),多个页面模板组成多个完整页面构成,整体切换,完整URL跳转用户体验加载快,切换流畅度高,用户体验好切换加载较慢,流畅度不高适用场景追求操作流畅,用户体验的应用高度支持搜索引擎的应用部署维护部署实现简单,维护简单部署维护相对复杂三:改造过程1、路由

而市场上依靠vue做出来的唱功案例还是很多的:

两个文件都被放置在网站跟目录并可直接访问,配置config/config.default.js siteFile

对于站长来说,如果链接很长时间不被收录,建议尝试使用主动推送功能,尤其是新网站,主动推送首页数据,有利于内页数据的抓取。

exports.siteFile = { '/favicon.ico': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/images/favicon.ico')), '/sitemap.xml': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/sitemap.xml'))};

2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin 对SEO进行了优化

2、模板

第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考第二,vue-meta-info,这个是针对单页面的meta SEO的另一种思路,参考网站 第三,nuxt 简单易用,参考网站 第四,phantomjs 页面预渲染,具体参考 phantomjs.org

单页面

而应用到的技术也是有很多,大体上我总结了四个,也是比较常用的:

robots.txt :爬虫协议,爬虫访问的第一个文件,告知那些页面可以访问,那些禁止访问

这只是我片面的分析,具体情况我们还要根据网站定位,开发成本,后期的维护成本等综合考虑,但是我觉得掘金真的是一个非常成功的案例,既然有人给我们迈出了这一步,我们也要紧跟潮流,毕竟互联网是一个与时俱进的行业。如果我们永远停留在传统的混合开发,也会给我们的公司,给我们个人带来一些影响。

文档类型统一使用HTML5 doctype !DOCTYPE HTMLmeta标签优化,主要有title、description、keywords三个地方,结束不要使用“ /”,应该直接写“”css文件最好使用一个,放在头部head标签里面js文件最好放在底部,避免因加载js文件阻塞HTML的渲染使用外联文件,避免在HTML直接写css和js的代码引入文件时使用绝对地址,绝对地址包括了网站的域名img标签加上alt关键字,利于SEO优化,尽量不要使-用“的”、“上”、“好”、“等等”等,搜索引擎数据库默认不收录的字当图片过多时使用懒加载logo处加h1标签,搜索引擎默认h1标签这个标题是网页中最重要的信息,所以我们把最重要信息入在H1标签内2、json+ld

时间: 2019-04-10阅读: 497标签: seo

每个页面单独的title;主题明确,涵盖页面主旨内容不罗列关键词,使用户能够快速分辨出主题,最好不超过17个中文汉字,否则在搜索结果中会被折行重要内容往左放,保持语义通顺使用用户熟知或习惯用语如果品牌名高,最好能展示出来名牌词

网站收录,搜索引擎在爬取你的网页以后,通过对网页内容进行检测,将符合收录规则的网页存库。因此该网页将会出现在与网页内容相关的查询的搜索结果中。 搜索引擎判断一个网站权重高低的尺度无非两个:收录和外链。因此百度收录的高低很大程度上影响着网站在百度的排名

module.exports = app = { app.get('/home', app.controller.home.index);}

二就是从百度站长平台的链接提交工具中获取数据,其中通过主动推送功能“收”上来的数据最受百度spider的欢迎。

对title的补充,准确描述页面内容,不堆砌关键词(否则会被搜索引擎判定作弊嫌疑)每个页面要有不同的description,尽量不适用默认一样的适当的长度,超出会被截断四:SEO改造

  1. 页面预渲染2. 服务端渲染3. 路由采用h5 history模式

原路由采用vue-router,egg.js不支持这种方式,需要把路由转化为对应的路由easywebpack-cli脚手架地址/app/router.js

4) 有一些流量不太高的网站比如 (Marshall University)做了seo社会化分享优化,在meta信息中出现了property=”og:title”这种新东西;-CN/campus (大疆招聘)使用了Nuxt

description

1.搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对seo并不友好。

module.exports = app = { return class HomeController extends app.Controller { async index() { const {ctx} = this; await ctx.render('home/index.js', { id: ctx.params.id, data: [1, 2, 3] }); } }}

这些网站中出现率最高的公共组件或公共方法有四个:

  • Vue + Webpack4多页面服务端渲染项目开发模板进行改造。

那么他们是如何做优化的呢?我们通过分析,总结以下几点

title

首先,可以肯定的是前后端分离不利于SEO,为什么呢?

多页面单页面对比

这就代表交互网站不用vue做么?当然不是。无意间在知乎看见vue的作者是这么说的:

if (isMobile(ctx.get('user-agent'))) { await ctx.render('home/index.js');} else { await ctx.render('home/indexPc.js');}

不可否定的是,vue现在火。但是在实际项目中,特别是像一下交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用vue搭建的网站不能做优化,那我们真的要放弃vue,放弃前后端分离开发么?

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:【网上澳门金莎娱乐】vue项目做seo_关于vue项目的seo问题

关键词: