当前位置:首页 >技术文库 >技术分享 >WLDOS技术专题 >正文

SPA单页seo最佳实践——Centos8下WLDOS前后端分离框架的seo

2023-10-04 12:15:31 1 个评论 WLDOS技术专题 / 问题解答 15,101

wldos平台前端是用reactJs开发的，使用的是客户端渲染模式，前端应用必然面临seo的问题。为了解决百度等国内搜索引擎不能收录动态单页应用的问题，采用Google的rendertron针对搜索引擎的网络爬虫专门优化。Google和bing搜索引擎已经可以很好支持单页应用的爬取，可以不走该方案，但是要做robots中显式声明对js、css放开抓取权限。

User-agent: Googlebot
Allow: .js
Allow: .css
User-agent: Bingbot
Allow: .js
Allow: .css
User-agent: msnbot
Allow: .js
Allow: .css

一、环境安装

rendertron是js开发渲染工具，需要在服务器搭建js运行环境。

首先安装nodejs，我们使用yum安装：

执行命令行检查nodejs包版本：

yum list|grep nodejs

可以看到当前系统支持的node版本是10.24.0，执行安装命令：

yum install nodejs.x86_64

执行node -v 查看验证版本，返回v10.24.0类似的版本号说明安装成功！

有了node可以先安装rendertron了：

二、安装rendertron

git clone https://github.com/GoogleChrome/rendertron.git

正克隆到 ‘rendertron’…
remote: Enumerating objects: 2758, done.
remote: Counting objects: 100% (109/109), done.
remote: Compressing objects: 100% (80/80), done.
remote: Total 2758 (delta 77), reused 40 (delta 29), pack-reused 2649
接收对象中: 100% (2758/2758), 15.90 MiB | 9.77 MiB/s, 完成.
处理 delta 中: 100% (1791/1791), 完成.

切换目录到安装目录下：

cd rendertron/

执行项目初始化命令

npm install

安装过程报如下的错：

78 packages are looking for funding
run `npm fund` for details

found 16 vulnerabilities (10 moderate, 6 high)
run `npm audit fix` to fix them, or `npm audit` for details

根据提示执行修复命令：

npm audit fix

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {“os”:”darwin”,”arch”:”any”} (current: {“os”:”linux”,”arch”:”x64″})

updated 6 packages in 7.626s

78 packages are looking for funding
run `npm fund` for details

fixed 16 of 16 vulnerabilities in 675 scanned packages

继续执行npm install，初始化完成。

配置rendertron

rendertron默认的参数不是很合理，使用自定义的配置，在根目录下创建congfig.json文件，输入如下内容保存（注意删掉注释）：

{
“cache”: “filesystem”, // 缓存模式：文件系统
“cacheConfig”: {
“snapshotDir”: “/www/rendertron”,  // 快照存放目录
“cacheDurationMinutes”: 120, // 缓存有效期
“cacheMaxEntries”: 1000000 // 缓存最大数
},
“timeout”: 2000, // 请求超时毫秒数
“port”: 3000, // 服务端口号
“host”: “127.0.0.1”,
“width”: 1000,
“height”: 1000,
“reqHeaders”: {},
“headers”: {},
“puppeteerArgs”: [“–no-sandbox”],
“renderOnly”: [],
“closeBrowser”: false,
“restrictedUrlPattern”: null
}

注意同时要修改一下src/config.ts里的默认值，否则可能不生效：

public static config: Config = {
  cache: null,
  cacheConfig: {
    snapshotDir: path.join(os.tmpdir(), 'rendertron'),
    cacheDurationMinutes: (60 * 24).toString(),
    cacheMaxEntries: '100', // 改为你上面设置的数
  },
  timeout: 10000, // 改为上面设置的毫秒数
  port: '3000',
  host: '0.0.0.0',
  width: 1000,
  height: 1000,
  reqHeaders: {},
  headers: {},
  puppeteerArgs: ['--no-sandbox'],
  renderOnly: [],
  closeBrowser: false,
  restrictedUrlPattern: null
};

启动rendertron
npm run build 
npm run start
或者cd到rendertron的bin目录执行rendertron脚本启动。

测试rendertron
curl --user-agent "baiduspider" http://localhost:3000/render/http://abc.com 如果能看到返回的html则部署成功。

三、配置静态资源服务器
配置静态资源服务器让rendertron服务与应用服务融合，这里以apache为例配置，nginx的网络方案较多不赘述：

内容查看此隐藏内容查看价格为5积分，请先
点击【立刻购买】给作者的精彩内容打赏一下！
（注*人民币1元充值可获得1积分）


四、安装pm2


Linux上的node不能默认以服务或守护进程运行，nohup不是很有效(Linux熟手可用)，改用强大的pm2管理node：


全局安装命令安装pm2：


npm install pm2 -g


执行到bin目录使用pm2启动服务：


cd rendertron/bin


pm2 start rendertron


启动pm2服务




使用nohup


切换到rendertron/bin目录下，执行如下命令：


内容查看此隐藏内容查看价格为5积分，请先
点击【立刻购买】给作者的精彩内容打赏一下！
（注*人民币1元充值可获得1积分）


测试rendertron


curl –user-agent “baiduspider” http://abc.com


返回html源码中包含tdk和html标签说明渲染成功：




至此，基于单页react前端的seo方案介绍完毕。


本来此文已经完毕，但是最近发现首页始终不能收录，于是用百度站长手动抓取测试，发现抓取的页面竟然是404页面，首页抓取不到未免有些打脸啊！汗……。经过分析发现是rendertron默认把首页的访问转到/index.html，WLDOS前端并没有这样的路由，于是新增了此路由默认跳转到/：




再次测试，抓取成功，这次抓取到的首页大小明显大了一倍多：




再看百度蜘蛛抓取的内容：


......
<title>WLDOS云应用支撑平台_云管端解决方案-让专业更有价值，聚焦、开放、管控你的应用生态。</title><meta name="keywords" content="博客" data-react-helmet="true"><meta name="description" content="分类存档：博客" data-react-helmet="true"></head>
  <body>


......
<h4 class="ant-list-item-meta-title"><a class="listItemMetaTitle___muPZC" rel="noreferrer" href="/archives-97416725827076104.html">wldos平台版本迭代功能规划</a></h4><div class="ant-list-item-meta-description"><span></span></div></div></div><div class="listContent___1FAeE"><div class="description___3OMtD">1.0实现开发框架、系统管理和内容管理三大模块。系统管理包含系统配置、应用管理、资源管理、角色权限管理、租户管理、体系结构、组织机构、用户管理、域管理、类型管理、标签管理。 内容管理包含作品管理、作品篇章管理。 2.0在1.0的基础上实现分布式应用注册中心、资源注册中心、服务发布 ...</div>




看到网站title和首页文章链接抓取到了，表示首页抓取成功！老板再也不担心WLDOS应用SEO的问题了。


内存优化，防止服务器内存溢出


经过一段实际运行，发现一个问题，服务器内存多消耗了3个G，用ps -ef|grep rendertron 发现后台启动了几十个chrome实例进程，怪不得内存锐减。这是因为配置里面设置默认不关闭浏览器实例，这样确实可以降低开闭浏览器的性能开销，但是会囤积大量不关闭的浏览器实例进程，不知道rendertron为什么不实现连接池(或者笔者未发现)，于是修改如下参数：


exports.ConfigManager = ConfigManager;

……

timeout: 3000,

port: ‘3000’,

host: ‘0.0.0.0’,

width: 1920,

height: 1080,

reqHeaders: {},

headers: {},

puppeteerArgs: [‘–no-sandbox’],

renderOnly: [],

closeBrowser: true, // 将此项改为true，记得修改build目录下的config.js

restrictedUrlPattern: null

};


然后杀掉rendertron那几十个进程，再重启。一个个删除太累，使用此命令：


ps -ef|grep rendertron | grep -v grep | awk ‘{print $2}’ | xargs kill -9


最后还是建议用pm2管理守护进程，pm2使用方法见上面。


按上述方案测试了一周，最后发现rendertron不响应了，看来rendertron问题很多，重新把封印的closeBrowser选项置为false，但是告诉pm2 最多起8个线程，具体起几个线程，要看你的cpu几个逻辑核心，脚本如下：


pm2 start ./rendertron -i 8     # 切换到rendertron/bin目录下执行


然后加个定时脚本或者设置pm2为自启动服务(方法见官网)，定期重启pm2，以免rendertron出问题。


调整线程数，如果设置了pm2自启动服务，通过pm2 save保存了dump配置文件，则每次重启pm2都会自动启动初始设置的线程数，此时可以通过delete命令调整线程数：


pm2 delete [id] ，[id] 是pm2启动的多线程应用id：


[root@localhost .pm2]# pm2 delete 5

[PM2] Applying action deleteProcessId on app [5](ids: [ ‘5’ ])

[PM2] [rendertron](5) ✓

┌─────┬───────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐

│ id  │ name          │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │

├─────┼───────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤

│ 0   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754552  │ 25h    │ 1    │ online    │ 0%       │ 67.0mb   │ root     │ disabled │

│ 1   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754558  │ 25h    │ 1    │ online    │ 0%       │ 66.2mb   │ root     │ disabled │

│ 2   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754995  │ 25h    │ 1    │ online    │ 0%       │ 68.3mb   │ root     │ disabled │

│ 3   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754982  │ 25h    │ 1    │ online    │ 0%       │ 66.7mb   │ root     │ disabled │

│ 4   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2755407  │ 25h    │ 1    │ online    │ 0%       │ 69.2mb   │ root     │ disabled │

└─────┴───────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

[PM2][WARN] Current process list is not synchronized with saved list. Type ‘pm2 save’ to synchronize.

[root@localhost .pm2]# pm2 delete 4

[PM2] Applying action deleteProcessId on app [4](ids: [ ‘4’ ])

[PM2] [rendertron](4) ✓

┌─────┬───────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐

│ id  │ name          │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │

├─────┼───────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤

│ 0   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754552  │ 25h    │ 1    │ online    │ 0%       │ 67.4mb   │ root     │ disabled │

│ 1   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754558  │ 25h    │ 1    │ online    │ 0%       │ 66.9mb   │ root     │ disabled │

│ 2   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754995  │ 25h    │ 1    │ online    │ 0%       │ 68.5mb   │ root     │ disabled │

│ 3   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754982  │ 25h    │ 1    │ online    │ 0%       │ 66.4mb   │ root     │ disabled │

└─────┴───────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘

[PM2][WARN] Current process list is not synchronized with saved list. Type ‘pm2 save’ to synchronize.


[root@localhost .pm2]# pm2 save

[PM2] Saving current process list…

[PM2] Successfully saved in /root/.pm2/dump.pm2

[root@localhost .pm2]# pm2 list

┌─────┬───────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐

│ id  │ name          │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │

├─────┼───────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤

│ 0   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754552  │ 25h    │ 1    │ online    │ 0%       │ 67.0mb   │ root     │ disabled │

│ 1   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754558  │ 25h    │ 1    │ online    │ 0%       │ 66.8mb   │ root     │ disabled │

│ 2   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754995  │ 25h    │ 1    │ online    │ 0%       │ 68.6mb   │ root     │ disabled │

│ 3   │ rendertron    │ default     │ 3.1.0   │ cluster │ 2754982  │ 25h    │ 1    │ online    │ 0%       │ 66.6mb   │ root     │ disabled │

└─────┴───────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘


以上自动重启rendertron的过程可以写成定时任务脚本crontab shell，需要的可以进qq群 830355512 索要。


声明: 除非转自他站（如有侵权，请联系处理）外，本文采用 BY-NC-SA 协议进行授权 | 嗅谱网
转载请注明：转自《SPA单页seo最佳实践——Centos8下WLDOS前后端分离框架的seo》
本文地址：http://www.xiupu.net/archives-11234.html
关注公众号：嗅谱网


           
                
                
                
        

赞赏
wechat pay微信赞赏alipay pay支付宝赞赏
, , ,
上一篇：
下一篇：

相关文章

在线留言

你必须 登录后 才能留言！

  1. 异想·天开

    比同构简单，是一种方案。

beian 鲁公网安备 37011302000391号 鲁ICP备2021041844号法律声明 | 隐私协议 | Copyright © 2009-2025 嗅谱网 版权所有