学会如何利用 Angular 实现服务器端渲染（SSR）技术，以大幅提升您的网页应用的搜索引擎优化。
Angular + 通用
搜索引擎优化（SEO）对于确保您的网站能被搜索引擎轻松找到，进而被用户发现至关重要。通过 Angular 中的服务器端渲染（SSR），我们可以显著提高网站的 SEO。在这篇文章中，我们将探讨如何在 Angular 中实现 SSR，以及它如何优化您的应用程序的 SEO。
什么是SSR（服务器端渲染）？SSR 是在服务器端而不是在浏览器端渲染网页的过程。通过 SSR，Angular 应用程序会将完整的页面 HTML 从服务器发送到客户端，而不仅仅是那些需要浏览器处理的 JavaScript 文件来构建页面。
SSR 对 SEO 的好处有- 快速初次加载：服务器渲染的页面加载更快，提供更好的用户体验。
- 改进的索引：搜索引擎可以更有效地索引服务器渲染的内容，相比客户端渲染的内容。
- 增强的链接分享：在社交媒体上分享的链接能够显示更丰富和信息量大的预览。
首先，创建一个Angular项目（或者使用已有的项目），
创建一个新的Angular项目：`ng new angular-seo-ssr`
切换到项目目录：`cd angular-seo-ssr`Angular Universal 是使 Angular 支持服务端渲染 (SSR) 的技术。要在项目中添加 Angular Universal，可以使用 Angular CLI 命令。
ng add @nguniversal/express-engine该命令添加必需的依赖项，并配置项目进行SSR（服务器端渲染）。
3. 调整 Express 应用的服务器设置上述命令创建了一个 server.ts 文件，该文件设置了一个 Express 服务器以在服务器端渲染 Angular 应用程序。该文件可以根据需要进行修改。这里是一个基本的 server.ts 示例:
import 'zone.js/node';
import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';
export function app(): express.Express {
const server = express();
const distFolder = join(process.cwd(), 'dist/angular-seo-ssr/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
server.engine('html', ngExpressEngine({
bootstrap: AppServerModule,
}));
server.set('view engine', 'html');
server.set('views', distFolder);
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});
return server;
}
function run(): void {
const port = process.env.PORT || 4000;
const server = app();
server.listen(port, () => {
console.log(`Node Express服务器正在监听http://localhost:${port}`);
});
}
declare const __non_webpack_require__: NodeRequire;
if (require.main === module) {
run();
}
export * from './src/main.server';在 package.json 文件里添加构建并提供服务器端渲染的脚本。
"scripts": {
"dev:ssr": "ng run angular-seo-ssr:serve-ssr", // 开发服务器端渲染的命令
"build:ssr": "ng build && ng run angular-seo-ssr:server", // 构建和运行服务器端应用
"serve:ssr": "node dist/angular-seo-ssr/server/main.js" // 运行构建后的服务器端应用
}要构建和运行SSR应用，请执行：
# 在这里填写相关命令 npm run build:ssr
npm run serve:ssr运行构建服务器端渲染命令，然后运行服务端渲染命令
SSR在SEO优化中的应用动态元标签：你可以用 Angular Meta 服务在应用中动态设置元标签。
import { Meta } from '@angular/platform-browser';
// 在你的组件里
constructor(private meta: Meta) {}
ngOnInit() {
this.meta.addTags([
{ name: 'description', content: '页面的描述' },
{ name: 'keywords', content: 'angular, SSR, SEO' },
// 根据需要继续添加更多的标签
]);
}友好的 URL：让你的 URL 友好且能清晰地描述页面的主题。
高质量内容：虽然SSR改善了索引，对良好的SEO至关重要。要确保内容相关、独特且实用。
Angular 中常见的服务端渲染问题及解决方法 1. 浏览器相关问题很多 JavaScript 包假设是在浏览器环境中运行，因此在服务器上可能因为缺少 window 和 document 等 API 而失败。
解决方法：使用环境检测或 Angular 提供的 is-platform-server 函数来保证依赖浏览器的代码只在客户端运行。
导入 { isPlatformBrowser } from '@angular/common';
导入 { Inject, PLATFORM_ID } from '@angular/core';
constructor(@Inject(PLATFORM_ID) 私有的 platformId: 对象) {}
ngOnInit() {
如果 (isPlatformBrowser(this.platformId)) {
// 浏览器特有的代码
}
}SSR 会增加初始延迟时间，因为页面需要在服务器上先渲染，再发给客户端。
解决方法：使用缓存技术，例如 HTTP 响应缓存技术或更复杂的缓存解决方案如 Varnish 或 Redis，来存储已经渲染的页面，并在后续请求中快速提供。
3. 路由和导航在服务器处理路由时可能会出现问题，尤其是在动态路由过程中。
解决方法：正确配置您 Express 服务器的路由，并确保服务器能处理您 Angular 应用程序的所有路由。
4. 异步API和数据通过API异步加载的数据在首次渲染时可能不可用，从而导致内容缺失。
解决方法：使用 Angular 的 TransferState 在服务器端预先加载数据，并将其传递给客户端以确保两边的内容一致。
import { TransferState, makeStateKey } from '@angular/platform-browser';
const STATE_KEY = makeStateKey<any>('apiData');
constructor(private http: HttpClient, private state: TransferState) {}
ngOnInit() {
const data = this.state.get(STATE_KEY, null);
if (data) {
this.apiData = data;
} else {
this.http.get('API_URL').subscribe(data => {
this.apiData = data;
this.state.set(STATE_KEY, data);
});
}
}用 Angular 实现 SSR 是提升应用 SEO 的一个强大策略。按照上面的步骤操作，可以轻松实现 SSR，享受更好的索引和更佳的用户体验。此外，采用 SEO 最佳实践，例如动态元标签和友好的网址，有助于提高网站在搜索引擎中的可见性。
通过这些技术，你将能够创建不仅性能出色，而且在搜索结果中表现突出的Angular web应用。通过了解并解决常见的SSR（服务端渲染）问题，你确保你的应用程序既稳健又高效，
关注我领英上的内容：https://www.linkedin.com/in/erickzanetti