2017-04-02 11 views
11

Ich arbeite an Angular2-basierten Web-App. Ich habe Angular CLI verwendet, um App zu generieren und sie dann für Prod zu erstellen. Ich habe Website auf AWS S3 & Cloudfront gehostet. Wenn ich das Tool "Fetch as Google" vom Webmaster verwende, wird nur Loading... angezeigt.Angular2 App: Fetch, da Google den Seiteninhalt nicht lädt

enter image description here

nicht in der Lage Googlebot meine Website zu kriechen?

+0

Ist Ihre Website nur für den Frontend-Betrieb? Wenn Sie kein Backend für die Datei haben, könnte dieses Problem auftreten. –

+0

Ich habe Angular2 für Front-End verwendet und wird über AWS Cloudfront bedient. Back-End ist Nodejs und gehostet auf verschiedenen Sub-Domäne. Die Angular2-App macht API-Anfragen an die nodejs-App, um Inhalte zu rendern. –

+0

Wird Ihr Frontend von einem beliebigen Backend bedient? oder ist es ein blanker index.html der auf deiner domain sitzt? –

Antwort

10

hatte ein ähnliches Problem. Ich glaube, Google-Bot unterstützt kein modernes JS. Ich einfach alle Beilagen von angular.io siehe https://angular.io/docs/ts/latest/guide/browser-support.html empfohlen aktiviert und im Skript-Header hinzugefügt:

<script src=https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js</script> 

Wenn Sie wirklich brauchen alle von ihnen Ich bin nicht sicher, aber ich brauche die Unterstützung für ältere IE sowieso.

Wenn dies für alle SearchBots funktioniert, ist sehr unklar, wenn Sie sie unterstützen müssen, können Sie versuchen https://prerender.io/. Aber sie sind auch nur in der Lage, es mit den Unterlegscheiben zu rendern

Hoffe, das hilft.

+0

Dies endete als Lösung für mein Problem. Ich kann Ihnen nicht genug dafür danken, dass Sie diese Lösung geteilt haben. Ich habe den cdn-Link benutzt, den du geteilt hast, aber ich bin gespannt, wie du "alle von angular.io empfohlenen Shims aktiviert hast". Kannst du das ein bisschen erklären? –

+1

Also ich denke, das bedeutet, die CDN ist ausreichend, um das Problem zu lösen? Nun, in Ihrem angular.io-Projekt sollte es eine Datei namens "polyfills.ts" geben, in der alle Shims von https://angular.io/docs/ts/latest/guide/browser-support.html auskommentiert sind. Ich entfernte diese Kommentare für alle Klassen, die etwas mit IE zu tun hatten. Welches wären die ganzen Kern-js/es6/*, die Web-Animationen-js und classlist.js. Hofft, das hilft – Krosan

+0

Ich habe das gleiche Problem mit Googlebot nicht in der Lage, meine eckige 4 Website mit "fetch as google" zu rendern. Es kehrte leer zurück, egal was ich versuchte. Die Lösung hier mit incl. Shim, hat das Problem für mich gelöst. Überlegen Sie, ob dies die akzeptierte Antwort ist. – brinch

2

Da Ihr Frontend von keiner serverseitigen Sprache bedient wird, empfehle ich die Verwendung von Angular2-Universal, um eine statische HTML-Site beim ersten Laden zu bedienen.

Sie können ihre quickstart Anleitung auschecken und es funktioniert ziemlich schnell.

+2

Soll der Googlebot nicht darstellen, was ein normaler Benutzer im Browser sieht? –

+0

@NileshG Ja, und ein normaler Benutzer sieht genau das, einen anfänglichen Ladebildschirm. –

+0

ja, ich würde eine universelle Seite bevorzugen. Es ist jedoch einfach nicht wahr, dass es nur damit arbeitet. Siehe meine Antwort oben. – Krosan

Verwandte Themen