在Angular 9中,meta description和关键字不起作用的问题可能是由于Angular应用是一个单页应用(SPA),其中所有的页面内容都是通过JavaScript动态加载的。因此,搜索引擎无法直接读取和索引这些动态生成的内容。
解决这个问题的方法是使用Angular的Server-side rendering(SSR)功能,将应用的内容在服务器端渲染成HTML,然后将静态的HTML页面返回给搜索引擎。这样,搜索引擎就能够读取和索引页面的meta description和关键字了。
以下是一个使用Angular Universal实现Server-side rendering的示例:
ng add @nguniversal/express-engine
app.module.ts
)中,导入ServerModule
和ModuleMapLoaderModule
,并将它们添加到imports
数组中:import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
@NgModule({
imports: [
ServerModule,
ModuleMapLoaderModule
]
})
export class AppServerModule { }
server.ts
),并添加以下内容:import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { join } from 'path';
enableProdMode();
const app = express();
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
app.engine('html', ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [
provideModuleMap(LAZY_MODULE_MAP)
]
}));
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
app.get('*.*', express.static(DIST_FOLDER, {
maxAge: '1y'
}));
app.get('*', (req, res) => {
res.render('index', { req });
});
app.listen(4000, () => {
console.log('Angular Universal server listening on port 4000');
});
angular.json
文件中,将outputPath
设置为dist/browser
:"projects": {
"your-project-name": {
"architect": {
"build": {
"options": {
"outputPath": "dist/browser"
}
}
}
}
}
ng run your-project-name:server:production
node server.js
现在,你的Angular应用将以服务器渲染的方式运行,并且meta description和关键字将起作用。
请注意,以上步骤是一个基本示例,你可能需要根据你的项目结构和需求进行适当的调整。此外,还可以使用其他的SSR方案,如Angular预渲染器(Pre-rendering)或Angular Universal的其他配置选项。
上一篇:Angular 9 - Material日期选择器 - 设置为UTC
下一篇:Angular 9 - NativeScript - 目标入口点 "side-drawer-directives" 有缺失的依赖: - ./