用Angular实现服务器端渲染以提升SEO效果-原创手记-慕课网

学会如何利用 Angular 实现服务器端渲染（SSR）技术，以大幅提升您的网页应用的搜索引擎优化。

Angular + 通用

搜索引擎优化（SEO）对于确保您的网站能被搜索引擎轻松找到，进而被用户发现至关重要。通过 Angular 中的服务器端渲染（SSR），我们可以显著提高网站的 SEO。在这篇文章中，我们将探讨如何在 Angular 中实现 SSR，以及它如何优化您的应用程序的 SEO。

什么是SSR（服务器端渲染）？

SSR 是在服务器端而不是在浏览器端渲染网页的过程。通过 SSR，Angular 应用程序会将完整的页面 HTML 从服务器发送到客户端，而不仅仅是那些需要浏览器处理的 JavaScript 文件来构建页面。

SSR 对 SEO 的好处有

快速初次加载：服务器渲染的页面加载更快，提供更好的用户体验。
改进的索引：搜索引擎可以更有效地索引服务器渲染的内容，相比客户端渲染的内容。
增强的链接分享：在社交媒体上分享的链接能够显示更丰富和信息量大的预览。

使用 Angular 实现 SSR（服务端渲染）的一步一步指南

1. 新建一个 Angular 项目

首先，创建一个Angular项目（或者使用已有的项目），

    创建一个新的Angular项目：`ng new angular-seo-ssr`  
    切换到项目目录：`cd angular-seo-ssr`

2. 添加 Angular Universal 的支持

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';

4. 更新 package.json 步骤中的命令.

在 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"  // 运行构建后的服务器端应用
}

5. 构建和运行应用

要构建和运行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