单页应用SEO原理
iVX的前端web应用，属于单页应用（Single-page application），其内所有页面元素，都是通过js代码动态计算渲染出来的，而非直接存在于静态html文件中。现代的前端应用框架，比如react，vue，angular等，都属于单页应用框架，其好处是前端逻辑更加灵活，可提供更好的用户交互体验，但坏处就是对搜索引擎不友好，因为对于搜索引擎的爬虫来说，静态html的内容更容易获取，动态通过js渲染的内容，或者无法获取，或者获取起来代价很高。
为了让搜索引擎爬虫可以爬取到iVX应用的内容，平台提供了页面预渲染服务，即判断请求客户端为搜索引擎爬虫时，将页面预先在后台渲染为静态html之后，再返回，大致原理如下：
预渲染的原理，是在后台运行一个浏览器，在这个浏览器中打开单页应用的页面，然后将渲染完成的html返回给前端。这样，爬虫就可以获取到完整的html页面内容。
开启应用SEO
第一步：开启应用SEO配置
在应用配置界面中，选择SEO配置，打开SEO开关，并保存配置后，即可启动预渲染机制：
注意，SEO的功能仅针对发布版本应用有效，因此打开开关，并保存配置之后，应用的发布版本（如有）就会自动添加预渲染功能，无需再次发布应用。
在SEO配置中，还可以设置缓存时间（1-7天），默认不缓存，即每次爬虫请求，后台都会开启一个浏览器对当前的应用版本进行预渲染，如选择缓存，则在缓存有效期间，后台会直接返回上一次已预渲染的页面，而不必重新开启浏览器打开页面进行预渲染，从而更快的对爬虫请求进行返回。我们可以根据自己应用的更新频率来选择合适的缓存时长。
第二步：设置预渲染时机
由于页面的内容可能是动态获取的，比如，页面初始化后请求一个服务，然后将服务获取的数据在页面中显示出来，因此我们需要告知后台程序在获取数据完成之后再进行预渲染，否则获取的页面是不完整的。通过“应用系统”组件的“启动页面预渲染”，我们可以告知iVX后台何时进行预渲染，比如下图中，我们首先请求一个获取数据的服务，当数据获取完成再进行预渲染。
如果我们开启了SEO服务，但没有设置预渲染时机，那么系统会默认在页面初始化完成后3s进行预渲染，这可能会导致爬虫等待太久而爬取失败。
最后，请注意这个“启动页面预渲染”的动作，必须通过初始化等自动的事件触发，而不能通过点击等需要用户操作的事件，因为搜索引擎爬虫是不会去点击页面的。
优化SEO效果：添加超链接
一个应用通常包含多个内容页面，无论是真实的页面组件还是虚拟的数据页面，我们都希望这些页面可以被搜索引擎爬取并收录。由于爬虫主要靠页面中的标签来探索新页面，因此我们需要对应用进行一定的改造，让爬虫能够顺着标签进入更多的子页面，而不是进入首页之后就跳出。改造的方法主要有两点：
- 为每个子页面添加不同的URL地址。由于每个标签必须对应不同的URL地址，因此每个内容页面，必须有独立的URL地址。比如iVX的文档中心，所有文档显示其实仅对应一个实体的页面组件，不同的文档，都是从数据库中动态获取后显示，但每个文档加载完成，都会设置不同的URL参数。然后，在页面初始化时，需要获取URL参数，并根据URL参数来输出对应文档，这样，就可以实现一个文档一个URL地址的效果了。除了通过URL参数，我们还可以通过路由容器组件来为虚拟页面设置不同的路径地址；
- 使用超链接组件来制作页面跳转的效果。每个超链接组件，都对应一个html的标签，为每个子页面都添加超链接之后，爬虫就能通过标签进入所有子页面了。在同一个应用中，建议使用相对地址的超链接，比如?page=1, 这样可以在不刷新应用的情况下修改URL地址，进入子页面。注意，请不要为用户不可见的组件（比如一个空的文本或一个透明的按钮）添加超链接，这会被爬虫认定为隐藏链接作弊。
具体实现方法，请参考以下demo：
查看预渲染效果
启动SEO之后，我们可以通过切换浏览器的user agent来“假装”成蜘蛛，查看蜘蛛爬取页面的效果。
在chrome浏览器中，首先打开控制台（windows电脑按f12， mac按 alt+command+i），然后选择右侧三个点的三个点 => More tools => Network conditions, 在User agent栏目里，勾掉默认的“Use browser default”，选择Googlebot，然后刷新浏览器，就可以假装成蜘蛛查看网页了。
针对开启SEO的应用，假装成蜘蛛刷新网页后，我们看到的页面和之前的页面是完全一样的，但我们会发现除了添加了超链接的跳转点击功能，其他交互功能都消失了，因为这是纯静态的预渲染页面，类似是一个html版本的“截屏”。另外，如果点击右键查看源码，会发现和之前完全不同，因为给到蜘蛛的网页是完整的预渲染完成的html静态页面，而不是普通用户看到的通过js动态计算的页面。
应用预渲染费用
应用SEO的费用，会在费用详情里单独列出，其费用包含预渲染计算的费用以及流量费用。如果应用开启了缓存，那么在缓存期间，不产生预渲染计算费用，仅产生流量费用。
若有收获，就点个赞吧
0 人点赞
