JavaScript SEO für Javascript

[-Rayz-]

Hallo,

friedlich und fröhlich arbeite ich so vor mir hin und heute denke ich mir so, wie könnte ich meine Website SEO freundlich programmieren.
Evtl. hätte ich mir das ja vorher überlegen können aber nunja... ist halt nun so. Ich nutze Angular CLI als Front und Laravel als Backend (RESTful)
Sprich ich mach am ende des Tages einen build vom Angular Projekt und kopiere diesen ins public von Laravel etc.

Da das alles ja Javascript Dateien sind, bezweifle ich, dass die Crawler damit etwas anfangen können...?
Was für Möglichkeiten habe ich, um die Seite SEO tauglich zu machen?
Dachte mit Angular express/universell würde das gehen aber das würde ja nur funktionieren, wenn ich kein Backend ala Laravel hätte - wenn ich das richtig verstanden habe-. Zumindest in der CLI wird ja einfach nur ein NodeJs Server erstellt, die Dateien muss ich so oder so ins Laravelprojekt verschieben.

Würde mich über weitere Lösungsvorschläge freuen :-)

PS:
(mein Server unterstützt in dem jetzigen Package kein NodeJs...)

 

[benneq]

Ich versteh dein Problem mit "würde ja nur funktionieren, wenn ich kein Backend ala Laravel hätte" nicht. Was hat das Backend mit dem Frontend zu tun?

Starte die Angular Universal App und liefere sie auf https://SERVER_ADRESSE/ aus. Und die Backend API unter z.B. https://SERVER_ADRESSE/api/ oder als Subdomain https://api.SERVER_ADRESSE/

 

[-Rayz-]

Ich versteh dein Problem mit "würde ja nur funktionieren, wenn ich kein Backend ala Laravel hätte" nicht. Was hat das Backend mit dem Frontend zu tun?

Mit NodeJS als Backend könnte ich das wohl prerendern. Deswegen die Anmerkung.
Angular Universal ist doch NodeJs oder nicht? Das wird halt von meinem Hoster nicht unterstützt. Hab hier keinen Root-Server.

 

[rg88]

Hab hier keinen Root-Server.

Du brauchst dafür mWn keinen Root-Server, aber zumindest einen brauchbaren Hoster. Wenn du nur auf "Billig-Fertigkost" setzt, dann bist eben eingeschränkt in den Möglichkeiten. Ich nehme an, dass du das nicht professionell oder gewinnorientiert betreibst?

 

[benneq]

Ahh. jetzt geht ein Licht auf! Also ja: Für Angular Universal muss dein Server Nodejs ausführen können.
Ansonsten gibt's auch die Möglichkeit Nodejs über PHP zu starten, z.B. mit sowas: https://github.com/niutech/node.php . Ich hab mit dem verlinkten Skript keinerlei Erfahrungen, also keine Garantie für irgendwas.

Alternativ könntest du natürlich auch einen zweiten Server nehmen, und dort eine Weiterleitung zum anderen Server einrichten, sodass einer die API mit PHP bereitstellt und der andere das Frontend mit Nodejs, aber alles über eine Domain erreichbar ist.

Hast du denn mal bei Google geschaut, ob deine Seite überhaupt nicht indiziert wird? Eigentlich sollte der Google Crawler auch mit JS umgehen können: https://www.google.com/search?q=google+crawler+bot+javascript

 

[new Account()]

Evtl. https://blog.strongbrew.io/prerendering-angular-apps/

 

[-Rayz-]

Du brauchst dafür mWn keinen Root-Server, aber zumindest einen brauchbaren Hoster. Wenn du nur auf "Billig-Fertigkost" setzt, dann bist eben eingeschränkt in den Möglichkeiten. Ich nehme an, dass du das nicht professionell oder gewinnorientiert betreibst?

Hab den Server nur kurzfristig um eine Vorschau der Homepage anzubieten. Hatte halt nur darauf geachtet, dass ich Laravel und Angular dort ausführen kann.

@benneq
Google sollte das mittlerweile können hab ich zumindest auch gelesen. Aber das liest sich halt immer so, als wäre das keine richtige Lösung und recht Fehleranfällig.

Hab jetzt einen Laravel Prerender gefunden und schaue mir den noch an. Wenn das nichts ist, werde ich meinen Server halt aufrüsten. Von 2€ auf 5€ im Monat

PS: nodejs mit php starten... klingt interessant aber auf so ein rumgewusel habe ich nicht wirklich lust.

Ergänzung (18. September 2019)

 

[benneq]

Hab jetzt einen Laravel Prerender gefunden und schaue mir den noch an. Wenn das nichts ist, werde ich meinen Server halt aufrüsten. Von 2€ auf 5€ im Monat

Klingt als würdest du mit dem Spaß Geld verdienen. Was jucken dich da 3€? Zumal du das von der Steuer absetzen kannst.

 

[-Rayz-]

Bisher verdiene ich kein Geld damit. Mache das halt Hobby mäßig.
Werde wie gesagt aber erstmal das hier testen:

https://github.com/jeroennoten/Laravel-Prerender

Wobei ich schon Lust auf NodeJs hätte...

 

[heyjan]

Wenn du eh schon Laravel als Backend benutzt würde sich Vue.Js als Frontend anbieten bzw. Nuxt mit eingebautem Prerendering hast du keine Probleme mehr. Die Laravel Community liebt Vue
https://nuxtjs.org/

 

[-Rayz-]

Als ich mit Laravel anfing hatte ich mir natürlich auch Vue angesehen. Ich hatte aber irgendein Problem, Variablen zwischen Views und Components zu tauschen. Genau weiß ich das nicht mehr.. auf jedenfall hatte ich mir noch -Angular angesehen und kam damit besser zurechtt.

Das ist halt nun das erste "Hobbymäßige" Projekt wo ich eine Datenbank brauche. Sonst habe ich eigentlich nur Contentpages.
Nur für ein Projekt sich jetzt in Vue reinfuchsen lohnt sich nicht so ganz :-) der Mehrwert ist da halt gering und der Zeitaufwand doch recht groß die ganzen Angular Sachen in Vue zu schreiben. Aber danke dir für den Link. Vielleicht komm ich da beim nächsten Projekt mal drauf zurück :-)

Ergänzung (18. September 2019)

..... kann nun NodeJS ausführen

also würde ich nun Angular Universal/Express nutzen und den Build 1 zu 1 auf den Server laden. Dann erstelle ich noch einen Unterordner wo dann das Laravel Projekt reinkommt mit dem Unterschied, dass ich hier dann nicht mehr mein Angular Projekt ins Public kopieren muss.

Update vom Server läuft noch. Also teste ich es wohl erst morgen.



Wobei ich mich gerade frage, wieso ich überhaupt noch Laravel nutzen sollte...?

 

[HorstSch87]

Wenn du die Webseite nicht 24/7 online halten willst, sondern nur ab und zu mal ne Vorschau anbieten möchtest, könntest du dir mal die Hetzner Cloud ansehen.
Da kannst du dir ab 0.5 Cent pro Stunde (je nach Leistung) einen Server konfigurieren und den dann nur so lange nutzen wie du ihn brauchst. Dürfte für dich eigentlich ideal sein - du bekommst root Zugriff und bist nicht an die Möglichkeiten deines Hosters gebunden.

 

[-Rayz-]

Danke aber ich finde den Server ganz praktisch um auch mal private Files zu tauschen.

Einzig wo ich mir aber nun doch unschlüssig bin ist, wenn ich eine Seite mit SEO programmieren will.. wieso sollte ich den ganzen Stress mit Angular Universal machen?
Die Routen müssen angepasst werden, Locale/Sessionstorage funktioniert nicht mehr...
Vielleicht sollte ich doch auf Laravel / Vue springen. Zumindest wenn es um SEO geht.

 

[benneq]

Was muss an den Routen angepasst werden? Die bleiben genau so wie sie vorher auch waren.
Und Local- und Sessionstorage funktioniert weiterhin. Nur halt nicht beim Rendern auf dem Backend - was ja vollkommen logisch ist. Das ist aber bei anderen Web Frameworks nicht anders.

 

[-Rayz-]

Wegen den routes da waren meine Informationen nur veraltet:
'Lazy loading is not yet supported, but coming very soon. Currently lazy loaded routes aren't available for prerendering '

Bei mir funktioniert der Storage auf jedenfall nach dem ssr build nicht mehr. Klar ist es logisch das der nicht mehr funktioniert. Zumindest in dem sinne gefällt mir das Server Rendering nicht.

 

[benneq]

Naja, aber Vue hilft dir da auch nicht weiter. Der Storage liegt im Browser und gerendert wird auf dem Server.

Da solltest du dir lieber mal die Frage stellen, was denn wichtiges im Storage gespeichert werden muss? Da steht doch höchstens ein Remember Me Token drin. Alles andere kann man in einer Datenbank auf dem Server speichern.
Und ein Crawler Bot hat eh keine Authentifizierung und entsprechend auch kein Remember Me Token.

Ansonsten gibt noch folgende 2 Alternativen:
1. Browser schickt den Inhalt des Localstorage an den Server für's SSR.
2. Du beschränkst das SSR auf Clients, die sich als Crawler zu erkennen geben.

 

[-Rayz-]

Ich habe halt den aktuellen Stand vom Warenkorb im Storage gespeichert.
Muss diesen halt nun in der Session bzw. in der DB hinterlegen.

Mehr ist es gar nicht :-)

 

[benneq]

Der Warenkorb in der DB ist eh schlauer. Am Besten mit Event Sourcing. Dann kannst du nach Monaten mal analysieren, welche Produkte gern in den Warenkorb gepackt und wieder rausgenommen werden. Und falls kein ähnliches Ersatzprodukt stattdessen gekauft wurde, kannst du ihnen dann Werbung für dieses Produkt anzeigen bis sie es endlich kaufen

Und der wahre Grund für die Benutzung einer DB: Ich kann Apples Continuity benutzen und einfach auf dem Smartphone weiter Shoppen ohne mir den Inhalt meines Warenkorbs merken zu müssen.

 

[-Rayz-]

Na das ist nur eine sehr kleine Seite. Man kann auch nichts kaufen, nur mieten bzw. erstmal reservieren. Kommt der Vertrag zustande muss ich das natürlich im Kalender hinterlegen, dass das Objekt in dem Zeitraum nicht verfügbar ist.

Mehr bietet die Seite nicht. Gibt auch keine Anmeldung. Am Ende gibt man seine E-Mail ein, es gibt eine Bestätigung und der Rest wird dann vor Ort geklärt.

Ohne vorherige Anmeldung kann ich einen Warenkorb halt nicht zuordnen.... sobald der PC gewechselt wird.

 

[benneq]

Dann schmeiß den LocalStorage komplett raus. Und speicher die Daten in irgendeiner Variable im JavaScript.

Oder du benutzt sowas: https://medium.com/@zainzafar/localstorage-with-angular-universal-2a111fb4af72
Damit kannst du in deinem Code erkennen, ob gerade SSR gemacht wird, oder im Browser gerendert wird.