Angular2 SEOタグと事前レンダリング

Question

APIを使用して動的コンテンツを読み込んでAngular2（Angular 4.4.3）アプリを作成しました。 https://angular.io/guide/set-document-title https://angular.io/api/platform-browser/Meta

そして、私は事前レンダリングサーバを作成するには、このガイドを使用しています：

は、私が（V4に追加しました）タイトルとメタを設定するための公式ドキュメントを使用しているにhttps://blog.pusher.com/make-angular-4-app-seo-friendly/ （スキップ：Expressサーバの作成しますあなたのAngularアプリをSEOフレンドリーにする）

しかし、説明どおりに機能していません。例えば、AppComponent.tsで

export class AppComponent implements AfterViewInit { 

    constructor(public router: Router, 
       private activatedRoute: ActivatedRoute, 
       private titleService: Title) { 
    this.titleService.setTitle("SOME CUSTOM TITLE"); 
    } 

そして、私はページを開いたとき、私は、ブラウザでのタイトルとして設定されますが、ページのソースを開くときに、私はこれを参照することを参照してください。

を私もを使用しています定期的なビルド、およびAOTのビルドが、同じことは、ここにCONFです： のTSconfig-aot.json：

それは見ることができるので、私はいくつかの他の子コンポーネントから可能AppComponentからの場合、またはメタタイトル/説明を設定するにはどうすればよい

{ 
     "compilerOptions": { 
     "target": "es5", 
     "module": "es2015", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "lib": ["es2015", "dom"], 
     "noImplicitAny": true, 
     "suppressImplicitAnyIndexErrors": true, 
     "typeRoots": [ 
      "./node_modules/@types/" 
     ] 
     }, 

     "files": [ 
     "src/app/app.module.ts", 
     "src/main.ts" 
     ], 

     "angularCompilerOptions": { 
     "genDir": "aot", 
     "skipMetadataEmit" : true 
     } 
    } 
tsconfig.app.json 
    { 
     "extends": "../tsconfig-aot.json", 
     "compilerOptions": { 
     "outDir": "../out-tsc/app", 
     "baseUrl": "./", 
     "module": "es2015", 
     "types": [] 
     }, 
     "exclude": [ 
     "test.ts", 
     "**/*.spec.ts" 
     ] 
    } 

ソースコードで、またはGoogleがサイトをクロールするとき

Answer 1

実際にサーバーからのコンテンツの配信に問題がありました。私はNginxで直接コンテンツを提供しようとしましたが、ノードはまずサーバーパックを実行してから、Nginxとプロキシとして接続する必要があります。