Google Crawling Links in AngularJS-Anwendung

Question

Ich habe eine AngularJS-Anwendung, die in Websites von Drittanbietern injiziert wird. Es injiziert dynamischen Inhalt in ein div auf der 3rd-Party-Seite. Google indiziert diesen dynamischen Content erfolgreich, scheint jedoch keine Crawlerseiten innerhalb des dynamischen Contents zu sein. Die Links wäre so etwas wie dies in den dynamischen Inhalt aussehen:

<a href="http://www.example.com/support?title=Example Title&titleId=12345">Link Here</a> 

Ich verwende Abfrageparameter für die Links nicht auf eine tatsächliche URL-Struktur wie:

http://www.example.com/support/title/Example Title/titleId/12345 

Ich habe die Abfrageparameter zu verwenden, Ich möchte nicht, dass die Website von Drittanbietern ihre Webserver-Konfiguration ändern muss, um nicht gefundene URLs umzuleiten. entsprechend

Wenn die Verbindung, die ich verwende, um den $ locationService geklickt wird die URL in dem Browser zu aktualisieren und dann antwortet mein Winkel Anwendung. Hauptsächlich zeigt es nur den relevanten Inhalt basierend auf den Abfrageparametern, setzt den Seitentitel und die Metabeschreibung.

Viele der Artikel, die ich gelesen habe die Route Provider in AngularJS und Vorlagen verwenden, aber ich bin nicht sicher, warum dies einen Unterschied zu dem Crawler machen würde?

Ich habe gelesen, dass Google URLs mit Abfrageparameter als separate Seiten betrachten sollte so glaube ich nicht, dass das Problem sein sollte: https://webmasters.googleblog.com/2008/09/dynamic-urls-vs-static-urls.html

Das einzige, was ich versucht habe, nicht eine Sitemap mit sind 1. die Bereitstellung die URLs, die die Abfrageparameter haben, und 2. statische Links von anderen Seiten zu den dynamischen Links hinzufügen, um Google beim Auffinden dieser Seiten zu helfen.

Jede Hilfe, Ideen oder Erkenntnisse würden sehr geschätzt werden.

Answer 1

Der Web-Crawler mit einer höheren Priorität ausgeführt werden könnte als die AngularJS Interpretation Ihrer dynamischen Links, wie die Web-Crawler lädt die Seite. Unter Verwendung von ng-href wird die Interpretation der dynamischen Verknüpfung mit einer höheren Priorität ausgeführt. Hoffe, es funktioniert!

Answer 2

Wenn Sie URLs mit # verwenden, wird nichts nach dem Hash in der URL an Ihren Server gesendet. Da JavaScript-Frameworks den Hash ursprünglich als Routing-Mechanismus verwendeten, ist dies ein Hauptgrund, warum Google dieses Protokoll erstellt hat.

Ändern Sie Ihre URLs auf #! anstatt nur # zu verwenden. .

angular.module ('myApp') config ([
'$ locationProvider', Funktion ($ locationProvider) { $ locationProvider.hashPrefix() '!'; } ]);

Answer 3

Dies ist, wie Google und bing die Ajax-Aufrufe behandeln.

Die documentation wird hier erwähnt.

Die Übersicht wie in der Dokumentation erwähnt ist als

Der Crawler folgt eine ziemlich AJAX URL findet (, das heißt, eine URL, die ein #! Hash-Fragment). Es fordert dann den Inhalt für diese URL von Ihrem Server in einer leicht modifizierten Form an. Ihr Webserver gibt den Inhalt in Form eines HTML-Snapshots zurück, der dann vom Crawler verarbeitet wird. Die Suchergebnisse zeigen die ursprüngliche URL.

Schritt für Schritt Anleitung wird in der Dokumentation angezeigt.

Seit der Angular JS für den Client Side entworfen so müssen Sie Ihren Webserver konfigurieren, dass ein kopflos HTML-Browser rufen Ihre Webseite zuzugreifen und einen Hash-Bang url liefern welches an die spezielle Google URL gegeben wird.

Wenn Sie Hash-Bang-URL verwenden dann müssten Sie die WinkelAnwendung instruieren, sie zu benutzen, anstatt regulären Hash-Werte

App.config(['$routeProvider', '$locationProvider', function($routes, $location) { 

    $location.hashPrefix('!'); 

    $routes.when('/home',{ 
     controller : 'IndexCtrl', 
     templateUrl : './pages/index.html' 
}); 

als here im Codebeispiel erwähnt

Wenn Sie jedoch Hashtag url nicht benutzen wollen, aber immer noch die Google des html Inhalt informieren wollen aber trotzdem die Google informieren, dann können Sie diese Meta-Tag als this

<meta name="fragment" content="!" /> 

verwenden

und dann die Winkel konfigurieren die HTMLURL zu gebrauchen

angular.module('HTML5ModeURLs', []).config(['$routeProvider', function($route) { 
    $route.html5Mode(true); 
}]); 

und dann je nachdem, welche Methode über das Modul installiert werden

var App = angular.module('App', ['HashBangURLs']); 
//or 
var App = angular.module('App', ['HTML5ModeURLs']); 

Jetzt benötigen Sie einen Headless Browser zu Zugriff auf die URL Sie phantom.js verwenden können, um den Inhalt der Seite zum Herunterladen, die javascript laufen und dann geben Sie den Inhalt in eine temporäre Datei.

Phantomrunner.js die jede URL als Eingabe nimmt, lädt und analysiert die HTML in DOM und überprüft dann den Datenstatus.

-Test jeder Seite mit der Funktion definiert here

SiteMap kann auch als auch in diesem example

Die beste Eigenschaft gezeigt hergestellt werden Sie Suchkonsole überprüfen Sie Ihre Website verwenden können url mit

Google search console

Voll Zuschreibung geht auf die Website und die genannten Verfassers in diesem site

.

UPDATE 1

Ihr Crawler braucht die Seiten als -

- com/ 
- com/category/ 
- com/category/page/ 

standardmäßig jedoch Angular-Sets Ihren Seiten als solche:

- com 
- com/#/category 
- com/#/page 

Ansatz 1

Hash Knall erlaubt Angular die HTML-Elemente zu wissen, mit JS zu injizieren, die vor dem wie erwähnt getan werden kann, aber da es depericated war daher die andere Lösung wäre die folgende

sein

Konfigurieren des $locationProvider und die Basis für die relative Links

einzurichten

• können Sie die $locationProvider verwenden, wie in diesen docs erwähnt und stellen Sie die html5mode auf true

  $ locationProvider.html5Mode (wahr);

Auf diese Weise können Winkeländerung das Routing und die URLs der Seiten, ohne die Seite zu aktualisieren

• Stellen Sie die Basis und Kopf des Dokuments als <base href="/">

Die $ location Service wird automatisch auf die hashbang-Methode für Browser zurückgreifen, die die HTML5-History-API nicht unterstützen.

Voll Zuschreibung geht an die page und der author

auch dort zu erwähnen sind auch noch einige andere Maßnahmen und Tests, die Sie sich kümmern kann als document in diesem erwähnt

Answer 4

Dies, weil Google-Crawler geschieht sind nicht in der Lage, das statische html von Ihrer URL zu erhalten, da Ihre Seiten dynamisch mit Javascript gerendert werden, können Sie erreichen, was Sie wollen, indem Sie folgendes verwenden:

Seit #! ist veralte, können Sie Google mitteilen, dass Ihre Seiten mit JavaScript gemacht werden durch den folgenden Tag in Ihrem Header mit

<meta name="fragment" content="!"> 

auf die oben genannten Tag Google-Bots zu finden wird wie

Ihre Urls mit dem _escaped_fragment_ Abfrageparameter vom Server anfordern

http://www.example.com/?_escaped_fragment_=/support?title=Example Title&titleId=12345 

Dann müssen Sie Ihre ursprüngliche uRL aus dem _escaped_fragment_ auf Ihrem Server neu zu erstellen, und es wird wie dieser wieder aussehen

http://www.example.com/support?title=Example Title&titleId=12345 

Dann müssen Sie das statische HTML an den Crawler für diese URL liefern. Sie können dies mit einem Headless-Browser tun, um auf die URL zuzugreifen. Phantom.js ist eine gute Option, um Ihre Seite mit dem Javascript zu rendern und dann den Inhalt in eine Datei zu geben, um einen HTML-Snapshot Ihrer Seite zu erstellen. Sie können den Snapshot auch auf Ihrem Server speichern, um weiter zu crawlen. Wenn Google Bots besuchen, können Sie den Snapshot direkt bereitstellen, anstatt die Seite erneut zu rendern.