VueJS και SEO

[flienky]

Καλησπέρα παιδια, 

Εχω φτιάξει ενα single page application με το VueJS (και vue-router, vuex). Το application τρέχει κανονικά μέσω browser αλλά οι μηχανές αναζήτησης δεν κάνουνε render το application και μένω μόνο με μια κενή σελίδα. 

 

Δηλαδή, όταν πάω στο google webmaster tools -> fetch as google -> fetch and render για να δω το πως βλεπει το googlebot την ιστοσελίδα, βλέπω πως ειναι ενα κενό πράγμα, μια κενή σελίδα και σαν source code ειναι απλά το template. Στο "How googlebot sees your webpage" screenshot αλλά και στο "how a user with a browser sees your webpage" screenshot ειναι πάλι κενό

 

Στον browser τρέχει κανονικα, οπότε η google ειναι λάθος. 

 

Απο αρκετό research, διαπίστωσα πως η εναλλακτική μέχρι το 2015 ειναι να κάνεις serve μια static html version της ιστοσελιδας σου όπου εχει γινει render όλη η javascript, το prerender.io κάνει αυτό. 

 

Αλλά μετα το τέλος του 15, η Google είπε πως μπορεί να κανει render κανονικά την JS "σαν να ειναι απο browser".

 

Στο ιντερνετ, υπάρχουν πολλοι που αντιμετωπίζουν παρόμοια προβλήματα και άλλοι λενε πως παίζει κομπλε (το ιδιο και σε angular και react).

 

Σας έχει τύχει τίποτα τέτοιο? Ποσο μαλλον και με VueJS. Τι κάνατε;

 

[Predatorkill]

Μια ειναι η λυση: (σου ευχομαι καλο refactoring )

https://ssr.vuejs.org/en/

 

Παντως αναρωτιεμαι αφου η google προμοταρει angular γιατι δεν αλλαζει τα bot της να περιμενουν εφοσον πια στο index λεει και ποια version angular τρεχεις...

 

Οταν βγηκε η 2 (stable) το ssr εφαγε nerf, τωρα με τη 4 το φτιαξανε αλλα ολοι οσοι εφτιαξαν κατι σε 2 τον εχουν πιει κανονικα.

[flienky]

Το εχω δει με το ssr αλλα τι να το κανω, αν ηταν να κανω server side rendering θα το εκανα και με laravel brade για αυτο του εριξα ακυρο απο την αρχη. Και στα tutorials κανενας ρε να πει ΝΑ ΞΕΡΕΙΣ ΑΝ ΤΟ ΦΤΙΑΞΕΙΣ ΘΑ ΕΧΕΙΣ ΤΑ ΤΑΔΕ ΠΡΟΒΛΗΜΑΤΑ ΣΤΟ ΣΕΟ.

 

Πιστευω ομως πως κατι εχω κανει εγω λαθος, δεν μπορει ρε παιδια δεν μπορει 2017 και τα spa να μην γινονται crawled κανονικα.

 

Αυτος εδω πχ https://tolks.io/#!/,ειναι με Vuejs, και ειναι crawled κανονικα. Βεβαια, υπαρχει το #! στο url, που μήπως υποδηλώνει οτι χρησιμοποιει την deprecated _escape_fragment_ τεχνική που είπα στο πρωτο ποστ (δηλαδη κανει serve static html που εχει γινει parsed η Vuejs)?

[Predatorkill]

Αυτο το ειδες απο το λινκ πιο πανω;

 

SSR vs Prerendering

 

If you're only investigating SSR to improve the SEO of a handful of marketing pages (e.g. /, /about, /contact, etc), then you probably want prerendering instead. Rather than using a web server to compile HTML on-the-fly, prerendering simply generates static HTML files for specific routes at build time. The advantage is setting up prerendering is much simpler and allows you to keep your frontend as a fully static site.

 

If you're using Webpack, you can easily add prerendering with the prerender-spa-plugin. It's been extensively tested with Vue apps - and in fact, the creator is a member of the Vue core team.

[flienky]

Ναι το ειδα, αλλα ουσιαστικά ειναι για static σελίδες και όχι για δυναμικές που αλλάζουν ανάλογα με το ποιος τις βλέπει. 

 

Άρα δεν γινεται να μπει στο app μου. 

 

Θα παίζω με prerender.io να δω τι θα γινει. Εχω φαει μεγάλη ξενερα τωρα.

[Επισκέπτης]

Το θέμα είναι λίγο πιο περίπλοκο. Το Googlebot μπορεί να εκτελέσει JavaScript αλλά δεν το κάνει πάντα γιατί απαιτεί πολλά resources (ναι, ακόμα και για τα δεδομένα της Google).  Οπότε δύο λύσεις υπάρχουν. Είτε φτιάχνεις μια static εκδοχή μόνο για SEO λόγους, είτε κάνεις υπομονή σε επόμενο parsing να περάσει με headless browser (αλλά κανείς δεν μπορεί να σου εγγυηθεί αν και πότε θα συμβεί αυτό).

[flienky]

Κοινως, η πιο αποτελεσματικη λυση ειναι να χρησιμοποιήσεις prerender.io. 

 

Η static εκδοχη θα χρειαστει δουλεια και τα έξαδα θα εκτιναστούν. Το ssr ειναι και αυτο μια λύση αλλα εγω δεν θα την προτιμουσα.

 

Αν καποιος εχει καμια αλλη εκδοχη ας την πει.