Question

我们刚刚开始重新构建我们的应用程序，所以我们需要SEO支持单页面应用程序，我们将使用Angular 2/4构建。

基于互联网上的R＆amp; D，我们发现angular universal非常酷。它解决了我们对静态数据的服务器端呈现以及称为数据的AJAX的问题。

但是这个ajax调用数据只有在组件开始时调用服务时才能使用（更准确地说是在NgInit中）。但是当我们进行更改时，例如搜索某些产品时，动态生成的数据将无法在视图页面源中使用，因此它也不适用于谷歌机器人或其他爬虫。

Angular Universal在这里提供a simple example with server side rendering。

如果有人这样做过，请尝试回答。

如果没有人将其标记为主题或垃圾邮件，那将会很棒，因为我在SO中看到了很多问题，但没有一个问题在这里回答我的问题。

很少有工作

Node Version  
8.2.1  
NPM version  
5.3.1  
Angular 4.2  

Angular Cli   
1.0.3  

os: linux x64

使用NodeJS进行SSR（服务器端渲染）。

这是我的server.ts

的摘录

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { platformServer, renderModuleFactory } from '@angular/platform-server'
import { enableProdMode } from '@angular/core'
import { AppServerModuleNgFactory } from '../dist/ngfactory/src/app/app.server.module.ngfactory'
import * as express from 'express';
import { readFileSync } from 'fs';
import { join } from 'path';

const PORT = 3000;

enableProdMode();

const app = express();

let template = readFileSync(join(__dirname, '..', 'dist', 'index.html')).toString();

app.engine('html', (_, options, callback) => {
  const opts = { document: template, url: options.req.url };

  renderModuleFactory(AppServerModuleNgFactory, opts)
    .then(html => callback(null, html));
});

app.set('view engine', 'html');
app.set('views', 'src')

app.get('*.*', express.static(join(__dirname, '..', 'dist')));

app.get('*', (req, res) => {
  res.render('index', { req });
});

app.listen(PORT, () => {
  console.log(`listening on http://localhost:${PORT}!`);
});

Answer 1

为那些正在经历同样问题的人提供答案。

在这个问题中我遇到了获取动态生成数据的查看源的问题，我当时正在开发一个电子商务网站，所以当用户进行一些过滤时，动态生成的数据没有被抓取，我做的是我改变了过滤器页面的网址，现在如果谷歌确实要抓取我的网页，它会在源代码中获取最新的真实数据。

示例：如果我的网址是www.shop.com/dresses并且我做了一些过滤，那么网址现在就像这样

www.shop.com/dresses?perPage=20&colour=ivory,coral&offers=51.0-70.0&priceRanges=500,1000&internationaldelivery=IN&page=1

此处还添加@ Stephen的评论关于SPA的SEO

Google已弃用AJAX escaped_fragment快照抓取功能，很快就不会支持它：developers.google.com/webmasters/ajax-crawling/docs/learn-more Google在抓取使用网站方面做得更好JavaScript，但单页应用程序，尤其是Angular应用程序并不是非常适合搜索引擎。如果您想要优秀的SEO，请放弃您的SPA以获得更多搜索引擎友好平台。

SEO使用Angular Universal支持动态生成的数据

1 个答案: