Verwenden von node.js zum Bereitstellen von Inhalten aus einer Backbone.js App, um Crawler nach SEO zu durchsuchen

Question

Entweder hat mein Google-Fu mich enttäuscht oder es gibt wirklich nicht zu viele Leute, die das noch tun. Wie Sie wissen, hat Backbone.js eine Achillesferse - es kann den HTML-Code nicht liefern, den es an Seiten-Crawler wie Googlebot rendert, weil sie kein JavaScript ausführen (obwohl Google mit seinen Ressourcen, V8-Engine und der ernüchternden Tatsache, dass JavaScript-Anwendungen sind auf dem Vormarsch, ich erwarte, dass dies eines Tages passieren wird). Mir ist bewusst, dass Google eine Hash-Bang-Workaround-Richtlinie hat, aber das ist einfach eine schlechte Idee. Außerdem verwende ich PushState. Dies ist ein äußerst wichtiges Thema für mich und ich würde erwarten, dass es auch für andere gilt. SEO ist etwas, das nicht ignoriert werden kann und daher nicht für viele Anwendungen da draußen in Betracht gezogen werden kann, die von abhängen.

Geben Sie node.js ein. Ich fange gerade erst an, in diesen Wahn zu geraten, aber es scheint möglich zu haben, dass die gleiche Backbone.js App, die auf dem Klienten existiert, auf dem Server ist, der Hände mit node.js hält. node.js wäre dann in der Lage, html zu rendern, das von der Backbone.js-App gerendert wurde, um Crawler zu durchsuchen. Es scheint machbar, aber ich suche jemanden, der mehr Erfahrung mit node.js oder noch besser hat, jemand, der dies tatsächlich getan hat, um mich diesbezüglich zu beraten.

Welche Schritte muss ich ergreifen, damit ich node.js verwenden kann, um meine Backbone.js-App für Webcrawler bereitzustellen? Außerdem verwendet meine Backbone-App eine API, die in Rails geschrieben ist, was meiner Meinung nach weniger Probleme bereiten würde.

EDIT: Ich habe nicht erwähnt, dass ich bereits eine Produktion App in Backbone.js geschrieben habe. Ich möchte diese Technik auf diese App anwenden.

Answer 1

Grundsätzlich müssen Sie entscheiden, was Sie anbieten: Ist es eine echte App (dh etwas, das als Ersatz für eine dedizierte Desktop-Anwendung dienen könnte), oder ist es eine Präsentation von Inhalten (dh klassisch "Website")? Wenn Sie sich Sorgen um SEO machen, ist es wahrscheinlich, dass es letzteres ist ("Content-Site") und in diesem Fall ist das "Single-Page-App" -Modell nicht geeignet. Sie möchten stattdessen das "progressiv erweiterte Website" -Modell (suchen Sie nach solchen Begriffen wie "unaufdringliches JavaScript", "progressive Verbesserung" und "adaptives Webdesign").

Um ein wenig zu verstärken, "Server sendet nur serialisierte Daten und Client macht alle Rendering" ist nur in der "wahre App" -Szenario geeignet. Für das "Content-Site" -Szenario ist das entsprechende Modell "Server macht Hauptrendering, Client macht es besser und macht ein kleines Rendering, um störende Seitenübergänge zu vermeiden, wenn möglich". Der Einwand, dass progressive Verbesserung bedeutet, "sicherzustellen, dass ein Benutzer sehen kann, bekommt nichts besseres als einen blinden Benutzer, der Text-in-Sprache verwendet", ist übrigens ein Ausdruck von politischem Groll, nicht Wirklichkeit. Progressiv erweiterte Websites können aus der Perspektive eines Nutzers mit einem High-End-Rendering-System so schick sein, wie Sie es möchten.

Answer 2

Ich überlasse es Ihnen zu entscheiden, ob es eine gute Entscheidung ist, Ihre Rendering-Engine auf die Serverseite zu schieben.

Da Nodejs auf V8 (Chrome-Engine) basiert, wird es Javascript wie Backbone.js ausführen. Das Erstellen Ihrer Modelle usw. würde genau so erfolgen.

Die Nodejs-Umgebung fehlt natürlich ein DOM. Das ist also der Teil, den Sie neu erstellen müssen. Ich glaube, das populärste Modul ist:

https://github.com/tmpvar/jsdom

Sobald Sie ein zugängliches DOM api in NodeJS haben, einfach Sie seinen Knoten bauen, wie Sie es für einen typischen Browser-Client (vielleicht mit jQuery) und reagieren auf Serveranfragen mit gerenderten HTML (über $ ("myDOM") .html() oder ähnlich).

Answer 3

Ich glaube, Sie können eine Fallbackstrategie Typ Ansatz nehmen. Überlegen Sie, was passieren würde, wenn JavaScript deaktiviert ist und ein Link auf vs js geklickt wird. Alles, was Sie auf Ihrer Seite tun, das gecrawlt werden kann, sollte eine vernünftige Ausweichprozedur haben, wenn Javascript deaktiviert ist. Ihre Links sollten immer die Verbindung zum Server als href haben, und die Standardaktion sollte mit Javascript verhindert werden.

Ich würde nicht sagen, das ist die Verantwortung des Backbone notwendigerweise. Ich meine, die einzige Sache, die Backbone Ihnen dabei helfen kann, ist die Änderung Ihrer URL, wenn sich die Seite ändert, und dass Ihre Modelle/Sammlungen sowohl Client- als auch Serverseite sind. Die Ansichten und Router, die ich glaube, wären streng Client-Seite.

Was Sie tun können, ist, machen Sie Ihre Jade-Seiten und teilweise renderbar von der Client-Seite oder Server-Seite mit oder ohne Inhalte injiziert. Auf diese Weise kann die gleiche Seite in jeder Weise gerendert werden. Das heißt, wenn Sie einen großen Teil Ihrer Seite ersetzen und die URL ändern, dann kann der HTML-Code, den Sie erfassen, von der gleichen Vorlage stammen, als ob jemand direkt auf diese Seite gegangen wäre.

Wenn Ihr Server eine Anfrage empfängt, sollte er Sie direkt zu dieser Seite führen, anstatt den Haupteinstiegspunkt und das Lade-Backbone zu durchlaufen und die Seite so zu manipulieren, dass der Benutzer mit der URL vorgeht .

Ich denke, Sie sollten dies erreichen können, indem Sie Dinge in Ihrer App ein wenig umstellen. Kein echtes Umschreiben, nur eine gute Menge bewegender Dinge. Möglicherweise müssen Sie einen Controller schreiben, der Ihnen HTML-Dateien mit injiziertem oder nicht injiziertem Inhalt liefert. Dies dient dazu, Ihrer Backbone-Anwendung den HTML-Code zu geben, der für die Kopplung mit den Daten der Modelle erforderlich ist. Wie ich schon sagte, können die gleichen Vorlagen verwendet werden, wenn Sie diese Links direkt über die in express/node.js definierten Router treffen.

Answer 4

Dies ist auf meiner ToDo-Liste von Dingen, die mit unserer App zu tun haben: Node.js analysieren den Backbone Routen (gespeichert im Speicher, wenn die App startet) und zumindest dienen die Hauptseiten Vorlage auf geraden HTML-alles mehr wäre wahrscheinlich zu viel Overhead/Verarbeitung für die BE, wenn Sie in Betracht ziehen, Tausende von Benutzern Ihre Website zu schlagen.

Ich glaube Backbone-Apps wie AirBnB tun es auch so, aber nur für Roboter wie Google Crawler. Sie brauchen diese Situation auch für Dinge wie Facebook Likes, da Facebook einen Crawler aussendet, um Ihre og Tags zu lesen.

Answer 5

Zunächst möchte ich einen Haftungsausschluss hinzufügen, dass ich denke, dass die Verwendung von node.js eine schlechte Idee ist. Zweiter Disclaimer: Ich habe ähnliche Hacks gemacht, aber nur für automatisierte Tests, nicht für Crawler.

Mit dem aus dem Weg, lass uns gehen. Wenn Sie Ihre clientseitige Anwendung auf dem Server ausgeführt wird, werden Sie müssen die Browser-Umgebung auf dem Server erstellen:

1. Ganz offensichtlich sind Sie nicht das DOM (Document Object Model) - im Grunde des AST über Ihrem geparsten HTML-Dokument. Die Lösung von node.js hierfür ist jsdom.

2. Das wird jedoch nicht ausreichen. Ihr Browser stellt auch BOM (Browser Object Model) zur Verfügung - Zugriff auf Browserfunktionen wie zum Beispiel history.pushState. Hier wird es schwierig. Es gibt zwei Möglichkeiten: Sie können versuchen, phantomjs oder casperjs zu biegen, um Ihre App zu starten und dann den HTML-Code davon abzukratzen. Es ist fragil, da Sie einen riesigen WebKit-Browser mit ausgeschnittenen UI-Teilen ausführen.

3. Die andere Option ist Zombie - die leichte Neuimplementierung der Browserfunktionen in Javascript ist. Laut der Seite unterstützt es pushState, aber meine Erfahrung ist, dass die Browser-Emulation noch lange nicht abgeschlossen ist - aber probiere es aus und sieh, wie weit du kommst.

Answer 6

Arbeitslösung ist Backbone überall https://github.com/Morriz/backbone-everywhere zu verwenden, aber es zwingt Sie Knoten als Backend zu verwenden.

Eine andere Alternative ist die Verwendung der gleichen Vorlagen auf dem Server und Front-End. Front-End lädt Moustache-Vorlagen mit dem Text-Plugin require.js, und der Server rendert die Seite auch mit den gleichen Moustache-Vorlagen.

Eine weitere Ergänzung besteht darin, Bootstrap-Moduldaten im JavaScript-Tag als JSON-Daten zu rendern, die sofort von Backbone zum Auffüllen von Modellen und Sammlungen verwendet werden.