node.js - SEO 支持使用 Angular Universal 动态生成的数据

Question

我们的工作刚刚开始重新构建我们的应用程序，因此我们需要为我们将使用 Angular 2/4 构建的单页应用程序提供 SEO 支持。

根据网上的研发我们发现angular universal很酷。它解决了我们在服务器端呈现静态数据以及 AJAX 调用数据的问题。

但是这个 ajax 调用的数据只有在组件开始时调用服务时才可用(更准确地说，在 NgInit 中)。但是，当我们进一步进行更改(例如搜索某些产品)时，动态生成的数据将无法在查看页面源中使用，因此它也无法用于 google bot 或其他抓取工具。

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

只是为遇到同样问题的人提供答案。

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

示例:如果我的 URL 是这个 www.shop.com/dresses 并且我做了一些过滤，所以 url 现在看起来像这样

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，转而使用对搜索引擎更友好的平台。