要确保 Angular 10 应用程序的所有页面都被 Google 索引,可以按照以下步骤操作:
@angular/platform-server
包:npm install @angular/platform-server
prerender.js
:// prerender.js
const { renderModuleFactory } = require('@angular/platform-server');
const { AppServerModuleNgFactory } = require('./dist//server/main');
const express = require('express');
const fs = require('fs');
const path = require('path');
const domino = require('domino');
const app = express();
const indexHtml = fs.readFileSync(path.resolve(__dirname, './dist//index.html'), 'utf-8');
const win = domino.createWindow(indexHtml);
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['CSS'] = null;
app.get('**/*', (req, res) => {
res.render(path.resolve(__dirname, './dist//index.html'), {
req,
res,
providers: [
{ provide: 'serverUrl', useValue: `${req.protocol}://${req.get('host')}` }
]
}, (err, html) => {
if (html) {
res.send(html);
} else {
console.error(err);
res.send(indexHtml);
}
});
});
renderModuleFactory(AppServerModuleNgFactory, {
document: indexHtml,
url: '/'
}).then(html => {
fs.writeFileSync(path.resolve(__dirname, './dist//index.html'), html, { encoding: 'utf-8' });
console.log('Prerendering complete.');
});
app.listen(4000, () => {
console.log('Prerender server listening on port 4000!');
});
请确保将
替换为你的 Angular 10 应用程序的实际名称。
package.json
文件中添加一个新的脚本命令:"scripts": {
"prerender": "node prerender.js"
}
运行 npm run prerender
命令以启动服务端渲染。
在 Google 搜索控制台中提交你的应用程序的每个页面的网址。可以使用 ngrok
或将你的应用程序部署到服务器上来获取每个页面的 URL。
这样,当 Google 索引你的网站时,它将会渲染每个页面并将其添加到索引中,而不仅仅是第一页。