Angular 4 SEO 与 Nginx 和 Docker答案

【问题标题】：Angular 4 SEO with Nginx and DockerAngular 4 SEO 与 Nginx 和 Docker
【发布时间】：2018-06-15 13:03:50
【问题描述】：

我有一个关于 Angular 4 的 SEO 的相当普遍的问题。我阅读了有关抓取 SPA 的问题，而另一方面，有人声称 Google 根本没有问题。在我使用基于 Nginx 和 Docker 的生产设置的背景下，我想知道从什么开始最好的策略。我想回答以下问题：

1)我听说过 Angular Universal 用于服务器端渲染，但是我猜这种方法必然要使用 express-server 包？我使用 Nginx，它对生产有影响吗？我将如何使用 docker 进行设置？

2) 另外，我听说可以将prerender 与 Nginx 和 Docker 一起使用（预渲染器仅用于爬虫）。这适合Angular 4吗？在我看来，这将是最直接的方式......

3) 是否需要预渲染页面？当今 SEO 的主要驱动力是什么？谷歌真的有能力抓取 SPA 吗？ AFAIK，元标记不再有那么大的影响....

谢谢大家

【问题讨论】：

这个问题似乎离题了，因为它不在帮助中心所述的讨论范围内。

标签： angular nginx seo prerender

【解决方案1】：

Angular Universal 不一定要表达，你可以渲染到任何你想要的输出（文件、流等）。

这里是一个直接渲染到文件的例子：

import 'reflect-metadata';
import 'zone.js/dist/zone-node';
import { renderModuleFactory } from '@angular/platform-server';
import { enableProdMode } from '@angular/core';
import { join } from 'path';
import { readFileSync, writeFileSync, mkdirSync } from 'fs';

enableProdMode();

const DIST_FOLDER = join(process.cwd(), 'dist');

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


renderModuleFactory(AppServerModuleNgFactory, { document: template, url: '/' })
  .then(html => {
    writeFileSync(join(DIST_FOLDER, 'browser', 'index.html'), html);
   }
);

生成的 index.html 包含 HTML，否则会在浏览器中生成角度，并且搜索爬虫比必须自己呈现页面更容易获取。尽管谷歌很可能有能力做到这一点，但其他人却没有——而且您的网页排名将受到您网站的抓取效率的影响。

【讨论】：