Angular2 中如何优化 SEO 效果-JavaScript中文网-JavaScript教程资源分享门户

随着现代化 Web 应用程序的兴起，单页应用程序（Single Page Application，SPA）已成为构建 Web 应用程序的首选方法之一。然而，SPA 的一个主要问题是不利于搜索引擎优化（Search Engine Optimization, SEO），导致 Web 应用程序在搜索引擎上的排名较低。现在，Angular2 已经成为一个流行的前端框架，本文将探讨如何优化 SEO 在Angular2 中的效果。

为什么 Angular2 在 SEO 方面存在问题？

在众所周知，Angular2 是一个使用 JavaScript 或 TypeScript 编写的客户端应用程序框架。Angular2 应用程序是 SPA，通过路由映射到 URL，它不会在每个页面加载时返回新的 HTML文档。相反，应用程序会更新浏览器的现有 HTML 组件模板，从而更新用户界面。这种技术被称为客户端渲染（Client-Side Rendering, CSR）。

但是，由于 Angular2 应用程序是由 JavaScript 或 TypeScript 编写的，并在客户端渲染过程中动态生成 HTML，因此搜索引擎无法获取到应用程序中的内容，无法为这种类型的 Web 应用程序分配有意义的排名。

如何优化 SEO 在 Angular2 中的效果

为了优化 SEO 的效果，可以采取以下步骤。

使用服务端渲染（Server-Side Rendering, SSR）

SSR 的主要思想是在请求到达服务器时将 HTML 渲染在服务器端。这意味着搜索引擎可以从 HTML 中获取应用程序的内容，从而为其分配有意义的排名。为了实现 SSR，需要使用 Angular2 Universal 库。

下面是一个简单的应用程序使用 Angular2 Universal 的示例。

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ServerModule } from '@angular/platform-server';
import { AppComponent } from './app.component';
@NgModule({
  imports: [BrowserModule, ServerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

// main.server.ts
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
import { renderModuleFactory } from '@angular/platform-server';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';

enableProdMode();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const app = express();

const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');

app.engine('html', (_, options, callback) => {
  renderModuleFactory(AppServerModuleNgFactory, {
    document: template,
    url: options.req.url,
    extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
  }).then(html => callback(null, html));
});

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(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

利用 Angular Meta Tags 库

Angular Meta Tags 库提供了一个指令，可以用来生成 HTML 元数据。这包括标题、描述和关键字等。搜索引擎可以使用这些元数据来更好地理解页面内容，从而为其分配有意义的排名。

下面是一个利用 Angular Meta Tags 库生成元数据的示例。

<app-root>
  <meta name="description" content="This is an Angular2 sample application." />
  <meta property="og:title" content="My Sample Application" />
  <meta property="og:image" content="http://www.mysite.com/image.png" />
</app-root>

增加页面可访问性

搜索引擎标记页面上的内容的方式是通过查看 HTML 元素及其属性并使用它们来判断其内容。如果某些元素因技术问题而未能添加到HTML文档中，那么搜索引擎将无法向其分配排名，这将对SEO产生负面影响。

因此，除了确保 Angular2 应用程序的内容可以被搜索引擎索引外，还需要确保始终可访问。例如，确认您的应用程序在不支持 JavaScript或 CSS 的浏览器上仍然可以正常工作。确保 HTML 元素的属性在页面上正确地使用，并使用供屏幕阅读器使用的 ARIA 标志（Accessible Rich Internet Applications Suite）。

优化应用程序性能

SEO 受到很多因素的影响，其中之一是应用程序的性能。如果应用程序的性能不佳，则搜索引擎越来越不愿意将其排名较高。因此，优化应用程序的性能对SEO至关重要。

下面是一些优化 Angular2 应用程序性能的技巧：

确保应用程序只加载必要的资源。
启用 gzip 压缩来减小应用程序的传输大小。
使用服务工作器缓存一些常用的资源。

总结

SEO 对于任何 Web 应用程序都至关重要，而 Angular2 应用程序也是如此。一个优化的 Angular2 应用程序可以为您提供更好的排名和更高的流量。通过使用服务端渲染，生成元数据，增加页面可访问性和优化应用程序性能等技术，可以优化SEO的效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/659270a3eb4cecbf2d73c8cb