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

Question

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

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

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

Angular Universal 在此处提供a simple example with server side rendering。

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

如果没有人将其标记为题外话或垃圾邮件，那就太好了，因为我在 SO 中看到了很多问题，但其中 none 在这里回答了我的问题。

几乎没有解决方法

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，现在如果 google 确实想要抓取我的页面，它将在源中获取最新和真实的数据。

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

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

SEO support for dynamic generated data using Angular Universal

seo

node.js

angular-universal

angular