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

Posted 2023-03-07

【中文标题】使用 Angular Universal 对动态生成数据的 SEO 支持

【英文标题】：SEO support for dynamic generated data using Angular Universal

【发布时间】：2018-01-01 19:15:33

【问题描述】：

我们在工作中刚刚开始重新构建我们的应用程序，因此我们需要对我们将使用 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 进行 s-s-r（服务器端渲染）。

这是我的server.ts的sn-p

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!`);
);

【问题讨论】：

Google 已弃用 AJAX escaped_fragment 快照抓取，并且很快将不再支持它：developers.google.com/webmasters/ajax-crawling/docs/learn-moreGoogle 在抓取使用 javascript 的网站方面做得更好，然而，单页应用程序，尤其是 Angular 应用程序对搜索引擎不太友好。如果您想要好的 SEO，请放弃您的 SPA，转而使用对搜索引擎更友好的平台。

@StephenOstermiller 但这是否意味着您说不要使用 Angular？我们不能通过 SPA 实现相同数量的 SEO（使用 Angular Universal）吗？

SPA 对 SEO 非常不利。特别是角。 Googlebot 似乎更好地抓取 react.js 网站。但即便如此，谷歌是唯一可以处理它们的搜索引擎。 Bing、Yandex 和百度仍然完全不解析 JS。

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