角度ユニバーサルを使用して動的に生成されたデータのSEOサポート

Question

私たちはアプリケーションの再構築を開始したばかりなので、Angular 2/4で構築する単一ページアプリケーションのSEOサポートが必要です。

インターネット上のR & Dに基づいて、angular universalはかなりクールです。これは、AJAXと呼ばれる静的データのサーバーサイドレンダリングの問題を解決します。

しかし、このajaxは、コンポーネントの開始時に（NgInitでより正確に）サービスが呼び出されているときにのみ利用可能となっていました。しかし、いくつかの製品を検索するような変更を加えると、動的に生成されたデータはビューページのソースで利用できなくなり、Googleのボットやその他のクローラでも利用できなくなります。

角度ユニバーサルはa simple example with server side renderingを提供します。

誰かがこれをやったことがある方は、試してみてください。

だから私は多くの質問を見たので誰もそれをトピックやスパムとしてマークしていないと素晴らしいですが、誰も自分の問題に答えません。

ほとんどの仕事は周り

Node Version 
8.2.1 
NPM version 
5.3.1 
Angular 4.2 

Angular Cli 
1.0.3 

os: linux x64 

SSR（サーバ側のレンダリング）のためNodeJSを使用します。

はここだけで、同じ問題を通過している人々のための答えを出すために私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は次のようにSEOのSPAの

Googleが推奨していませんAJAXについてはこちらスティーブンさんのコメント@追加することも

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

を見て、私はいくつかのフィルタリングを行っている場合escaped_fragmentスナップショットのクロールはすぐにはサポートされません：developers.google.com/webmasters/ajax-crawling/docs/learn-more GoogleはJavaScriptを使用するサイトをクロールできるようになりましたが、特にシングルページアプリケーション角度のあるものはあまり検索エンジンにはあまり適していません。あなたが良いSEOをしたい場合は、より多くの検索エンジンフレンドリーなプラットフォームのためにあなたのSPAを放棄してください。