正在开发中的项目是采用vue,Vue+router搭建的单页面应用,因2C项目有seo的需求,就需要把当前的项目改为多页面+服务端渲染,调研之后使用了easywebpack-cli脚手架,基于Egg + Vue + Webpack4多页面服务端渲染项目开发模板进行改造。
提高网站搜索排名,从而吸引更多的潜在客户来浏览网站,目的是增加网站访问量,提升企业的销售业绩,获得效益搜索网站通过爬虫爬取网页内容,SEO让爬虫更好的理解网页内容(主要是文本)
一般的单页面是发送一个“空白”的html到浏览器,浏览器通过再获取页面对应的js文件, js操作dom展示页面,但是SEO无法去解析js的内容,爬虫所“看到”的,其实是一个空白的页面,SEO中重要的TDK,在单页面应用中只能设置固定的TDK,或者通过js去设置的,再次设置的实际爬虫也是无法获取的,再者,单页面应用在访问跳转页面时,实际只是替换了中间变化的模板部分,整体模板头部尾部是不变的,这就造成了对浏览器而言,实际我们访问的一直都是一个地址只是后面的参数在变化,对于很多网站分析工具就无法做针对用户访问路径的优化分析单页面的模式,在切换页面,访问URL上体验好,流畅度高,对于部署也较简单,但是对有SEO需求的就不是很友好了
单页面 | 多页面 | |
---|---|---|
模式 | 公共模板(头部底部),多个页面模板组成 | 多个完整页面构成,整体切换,完整URL跳转 |
用户体验 | 加载快,切换流畅度高,用户体验好 | 切换加载较慢,流畅度不高 |
适用场景 | 追求操作流畅,用户体验的应用 | 高度支持搜索引擎的应用 |
部署维护 | 部署实现简单,维护简单 | 部署维护相对复杂 |
原路由采用vue-router,egg.js不支持这种方式,需要把路由转化为对应的路由easywebpack-cli脚手架地址/app/router.js
module.exports = app => {
app.get('/home', app.controller.home.index);
}
在控制器中/app/controller/home.js设置路由对于的模板或接口
module.exports = app => {
return class HomeController extends app.Controller {
async index() {
const {ctx} = this;
await ctx.render('home/index.js');
}
}
}
上例渲染了一个模板返回到页面,模板地址/app/web/page/home/index.vue路由配置支持/home/:id params参数,控制器通过ctx.params可获取,在控制器也可以返回模板带入参数数据
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模板内,可通过this.data直接获取到控制器传回的参数路由代理,使用egg-http-proxy配置路由代码,更新包之后,在config/plugin.js里配置中间件,
exports.httpProxy = {
enable: true,
package: 'egg-http-proxy'
};
// 在config/config.default.js里引用并配置地址
exports.httpProxy = {
'/oldServer': 'http://xxx.com',
'/otherServer': 'http://xxx.com'
};
返回指定文件,例如favicon.ico,sitemap.xml等,可在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'))
};
项目有两套模板,/app/web/component/layout/index.js 服务器端模板,/app/web/view/layout.html 浏览器端模板,当服务端渲染出现错误,js报错或在created中调用window,localStorage等,导致服务端无法正常渲染时,就会调用备用的浏览器端渲染模板,也可通过controller控制根据不同场景渲染返回不同的模板,下例通过判断不同设备PC或wise,返回不同的模块
if (isMobile(ctx.get('user-agent'))) {
await ctx.render('home/index.js');
} else {
await ctx.render('home/indexPc.js');
}
title
keywords
description
Sitemap:网站地图,告知搜索引擎那些页面可供抓取,有利于隐藏层级较深的页面
一般为xml格式,设置成功之后需在站长平台提交
robots.txt :爬虫协议,爬虫访问的第一个文件,告知那些页面可以访问,那些禁止访问
两个文件都被放置在网站跟目录并可直接访问,配置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')),
'/robots.txt': fs.readFileSync(path.join(app.baseDir, 'app/web/asset/sitemap/robots.txt'))
};
1、语义化
2011年Google,Bing,Yahoo!和Yandex共同努力为网络创建统一的结构化数据词汇表(但是,Bing和其他搜索引擎尚未正式声明他们支持Schema.org的JSON-LD实现),结构化数据是用于提供关于页面的信息并分类页面内容的标准化格式,例如文章标题,简介,作者,图片等信息,基于json格式,简单易懂,更方便搜索引擎理解页面内容
在使用vue的时候,我们都知道它是双向数据绑定的,但是在使用不熟的情况下,经常会遇到:data中的数据变化了,但是并没有触发页面渲染。下面就整理一些出现这种情况的场景以及解决办法。
这里结合art-template模板引擎说明。首先了解下前端页面中如何使用art-template。当不需要对SEO友好的时候,推荐使用客户端渲染;当需要对 SEO友好的时候,推荐使用服务器端渲染
在使用vue的时候,偶然发现多次刷新或者网络加载缓慢的时候,会一瞬间出现设置的模板的情况。实在很影响美观,可以使用vue现成的指令来解决这个问题:v-cloak
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?
估计大家都听过,尽量将 CSS 放头部,JS 放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其然而不知其所以然,强行背下来应付考核当然可以,但实际应用中必然一塌糊涂
原生JS改变页面数据,必须要获取页面节点,也即是进行DOM操作,jQuery之类的框架只是简化DOM操作的写法,实质并没有改变操作页面数据的底层原理,DOM操作影响性能(导致浏览器的重绘和回流),Vue是一个mvvm框架(库),大幅度减少了DOM操作
在决定渲染方式时,需要测量和理解真正的瓶颈在哪里。静态渲染或服务器渲染在多数情况都比较适用,尤其是可交互性对JS依赖较低的场景。下面是一张便捷的信息图,显示了服务器到客户端的技术频谱:
如果从服务端返回的数据量较少,或者只有几个字段,可以用vue的set方法,如果数据量较大,请直接看第二种情况。官网API是这样介绍的:Vue.set(target,key,value)
当数据需要异步加载时render获取不到数据可能会报一些错误,此时需要在render函数中加一个判断.行到render时,state对象的haveData为false, 所以此时页面展示 loading,当异步获取数据成功时
在vue.js中,要将一段字符串渲染成html,可以使用v-html指令。但是 官方文档 中的v-html部分也提醒了
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!