Erstellen Sie statische SEO-Seiten für AngularJS + Spring MVC Website

8

Ich habe ein Projekt mit Spring MVC + AngularJS. Alle Daten sind dynamisch. Habe eine große Datenbank mit Orten in dieser App.

Für SEO-Zwecke muss eine statische Seite für jeden Standort generieren und auf SEO-freundliche URLs setzen (z. B. / localhost / path1 / path2 / here-is-very-friendly-name )

Was ist der beste Weg, um es zu erstellen?

Sollte ich nur eine Seite separat generieren und sie in einen separaten Ordner von der Haupt-App (wenn ja, was ist der beste Weg, um es zu machen), oder ich kann Spring / Angular dafür verwenden?

(für weitere Informationen) Das Objekt für jeden Standort enthält id , name , latitude , longtitude , address , district , city , country .

    
user1935987 22.06.2016, 04:58
quelle

4 Antworten

7

Eigentlich ist es meine Angular / SEO Erfahrung.
Sie müssen viele Änderungen vornehmen!

1) Entfernen von # von URL

%Vor%

2) Überprüfen Sie Ihr MVC-Routing

Bis jetzt hatten Sie vielleicht einen HomeController, um index.cshtml zurückzugeben und Ihre Angular App hochzufahren.
Nach dem Entfernen von # von Angular Routing müssen Sie MapRoute für alle Ihre Routen setzen.
Da in dieser Situation das erste Mal versucht wird, Routen wie www.site.com/any_route Angular App noch nicht zu laden, versucht es die Seite von MVC Routing zu bekommen. Aber danach macht $routeProvider seine Pflichten.

3) Verwenden Sie MVC-Variablen für Meta-Tags

Um eine bessere Indexierung zu erreichen und mit Crawlern und Bots befreundet zu sein, müssen wir MVC-Variablen verwenden, um Website-Meta-Tags zu initialisieren.
Wenn Sie Ihren Seitentitel durch Angular-Bindungen wie <title>{{title}}</title> festlegen, wenn Sie Ihre Seite über soziale Netzwerke teilen möchten, sehen Sie {{title}} , weil soziale Netzwerke keine Websites darstellen können.

%Vor%

4) Ersetzen Sie die Winkelbindung für Meta-Tags

Unsere App ist SPA, also sind wir nach dem Laden von Angular nicht mehr in MVC playground. Wir müssen Angular-Variablen durch MVC-Variablen ersetzen.

%Vor%

5) Verwenden Sie JSON-lD für dynamische Inhalte

Wenn Sie mit SCHEMA.org vertraut sind, sollten Sie besser JSON-LD anstelle von anderen verwenden, da Suchmaschinen-Bots% s erfassen und analysieren können. co_de% s, das nach dem Laden der Seite dynamisch eingefügt wurde.
Sie müssen <script type="application/ld+json"></script> überprüfen, um den Typ zu finden, der Ihrer Datenstruktur am nächsten kommt.
Zum Beispiel ist es meine Firma json-ld:

%Vor%     
MeTe-30 29.06.2016 09:16
quelle
1

Haben Sie Tools wie SEO.js ( Ссылка ) und prerender.io ( Ссылка ). Hast du das probiert?

    
Shankar P S 24.06.2016 15:57
quelle
1

Ich habe es nicht selbst ausprobiert, aber PhantomJs wäre wahrscheinlich die beste Option, um dies tun zu können.

Sie benötigen ein Wörterbuch der Endpunkte, die Sie rendern möchten, und ihre entsprechenden statischen Dateipfadnamen. Sie würden dann über jeden Endpunkt iterieren, den angegebenen Pfad mit PhantomJS rendern und dann die Ausgabe in der statischen Datei speichern.

Nach dem, was ich aus Ihrer Frage entnehme, haben Sie diese Pfade noch nicht am Front-End in Ihrer eckigen App verwendet? Wenn dies der Fall ist, würde ich sagen, dass die andere Option darin besteht, sie serverseitig nur über Spring darzustellen.

Das Problem hierbei ist, dass eckige nicht mit Isomorphie (client- und serverseitiges Rendering) erstellt wird. Jedes richtige Rendering, das Sie auf der Serverseite durchführen möchten, die noch nicht erstellt wurde, ist die beste Möglichkeit Spring zu verwenden, um es zu rendern.

Eine weitere Option ist die Aktualisierung auf Angular2, das isomorph mit Hilfe von Universalwinkel ist. Wenn Spring nicht zum Rendern verwendet wird und nur als API für Ihre App dient, funktioniert diese Option gut.

    
Ian Belcher 30.06.2016 09:18
quelle
0

Ich habe das nicht in Java gemacht, aber C #, bitte benachrichtigen Sie mich, wenn Sie es in Java machen lassen:

Ich habe diesen Code über phantomJs gefunden und:

Wie unser Freund sagte, haben wir den html5-Modus aktiviert, wir schreiben alle URLs in C # mit der neuen Engine von IIS neu, ich behalte eine spezifische Regel für google request, die mit bestimmten Abfrageparametern geliefert wurde (konnte nicht gefunden werden) net und nicht viel Zeit bis zur Arbeit). also leite ich sie auf diese spezifische Seite um, ich lese die umgeleitete URL, übertrage sie und führe sie auf phantomJS aus und warte darauf, dass das Ergebnis zurückkommt (ich muss wissen, wie man einen Prozess ausführt und das Konsolenresultat zurücknimmt), dann wir entfernten das ng-app-Attribut aus der Anwendung und übergaben die rohe Seite an den Google-Crawler (wir haben zwei Arten von Weiterleitungscode, nur einer von ihnen funktionierte, zuletzt bis dahin, einer ist permanent und anderer ich vorübergehend). Die Seite für sich selbst ist so unhöflich anzuschauen, aber googeln Sie nur auf Ihr Schema und Ihre Struktur, so dass alles damit zu finden ist.

Es ist lange her, dass ich nicht in Java war, also kann ich es nicht implementieren, ich bekomme nur wenig Wissen über den Frühling zurück, also werde ich es begrüßen, wenn Sie mich über ein Update benachrichtigen.

    
deadManN 14.01.2017 03:34
quelle

Tags und Links