Γωνιακή γενική εναντίον Prerender.io

Εάν είστε γωνιακός προγραμματιστής, γνωρίζετε ότι η SEO είναι μια τριχωτή κατάσταση. Και αν είστε σαν εμάς, πιθανώς η Google έψαξε σε δύο βασικές λύσεις. Σε αυτό το άρθρο, θέλουμε να σπάσουμε αυτό το θέμα σε πόσο σύνθετη είναι κάθε διαδικασία και πόσο αποτελεσματική είναι. Σημειώστε ότι όλα αυτά βασίζονται στις εμπειρίες μας. Αν νομίζετε διαφορετικά, μπορείτε να επικοινωνήσετε μαζί μας!

1. Γωνιακή Universal

Τεκμηρίωση: https://angular.io/guide/universal
Πολυπλοκότητα: 7/10
Αποτελεσματικότητα: 6/10

Στην περίπτωση χρήσης μας, δεν χρησιμοποιήσαμε ένα γωνιακό καθολικό εκκινητή. Είχαμε ήδη χτίσει την ιστοσελίδα μας χωρίς ένα (έργο γωνίας 7). Και παρόλο που η διαδικασία δεν είναι πολύ μεγάλη για να ενσωματωθεί στο υπάρχον γωνιακό σας έργο, χρειάζεται σίγουρα χρόνος για να καταλάβετε τι συμβαίνει. Για να βγάλετε μια εξήγηση, το Angular Universal δημιουργεί δύο εκδόσεις της αίτησής σας. Μία που είναι η εφαρμογή "διακομιστή" που δίνει τις σελίδες σας σε στατικό html. Αυτό συμβαίνει πρώτα και είναι αυτό που bots SEO θα τραβήξει από. Η άλλη έκδοση είναι η εφαρμογή "πρόγραμμα περιήγησης". Αυτή είναι η κανονική σας δυναμική και πλήρως λειτουργική γωνιακή εφαρμογή. Το Universal ανακατευθύνει την εφαρμοσμένη εφαρμογή με την εφαρμογή περιήγησής σας μετά την ολοκλήρωση της φόρτωσης. Έτσι, μπορεί να παρατηρήσετε ελαφρύ τρεμόπαιγμα, ειδικά σε βραδύτερες ταχύτητες.

Δεδομένου ότι πρόκειται για ένα άρθρο κυρίως για το γιατί να χρησιμοποιούμε το ένα πάνω στο άλλο, δεν θα γράφουμε πάρα πολύ κώδικα. Ανατρέξτε στον σύνδεσμο docs που παρέχεται παραπάνω.

Ωστόσο, θέλουμε να σχολιάσουμε τα θέματα που αντιμετωπίσαμε και τα πράγματα που έπρεπε να κάνουμε για να τα αντιμετωπίσουμε:
1. Προσθέστε τις δέσμες ενεργειών που σας προτείνει ο doc στο package.json. Η τοποθέτησή του στο στόχο του διακομιστή angular.json θα προκαλέσει σφάλμα.
2. Για το αρχείο server.ts, όταν εισάγετε το AppServerModuleNgFactory, αποκτήστε το από το αρχείο './dist/server/main' σας, όχι το αρχείο ./dist/server/main.bundle '
3. Εάν χρησιμοποιείτε το SCSS για το έργο σας, βεβαιωθείτε ότι έχετε προσθέσει αυτό το απόσπασμα κάτω από τον στόχο server angular.json. Διαφορετικά, θα ρίξει λάθη κατά την κατασκευή του στόχου διακομιστή.

"stylePreprocessorOptions": {"includePaths": ["src / scss"])

4. Επίσης, βεβαιωθείτε ότι έχετε διπλό έλεγχο των διαδρομών εξόδου σας για τον κανονικό σας στόχο για την κατασκευή και το στόχο διακομιστή. Η διαδρομή εξόδου build πρέπει να είναι σαν dist / project-name / browser και η διαδρομή εξόδου του διακομιστή θα πρέπει να είναι σαν dist / project-name / server

Αφού ολοκληρώσαμε, θα μπορούσαμε να δούμε ολόκληρο τον κώδικα της σελίδας μας από την "Προβολή πηγής σελίδας" στο Chrome. Επίσης, ενσωματώσαμε δυναμικές μετα-ετικέτες (χρησιμοποιώντας την υπηρεσία meta) για το έργο μας και μπορούμε να τις δούμε κατά την επιθεώρηση της σελίδας μας. Τώρα λοιπόν εδώ είναι τα πλεονεκτήματα και τα μειονεκτήματα μετά την ανάπτυξη του δικτυακού μας τόπου και την ευρετηρίαση των σελίδων μας στο Google:

Πλεονεκτήματα
- Όλες οι σελίδες μας μπορούσαν να αναζητηθούν στο Google
- Τα bots της Google κατάφεραν να τραβήξουν κείμενο από τις σελίδες μας

Μειονεκτήματα
- Το κείμενο που τραβήξατε με τα bots της Google ήταν τυχαίο κείμενο από τις σελίδες μας (όπως τα ονόματα των συνδέσμων, τα στοιχεία στο υποσέλιδο, οι άλλες περιγραφές στις εικόνες, το κείμενο κτλ.)
- Αν προσπαθείτε να εξυπηρετήσετε προσαρμοσμένες διαδρομές express, θα έχετε πρόβλημα. Οι πιθανότητες είναι καλύτερα να περιστρέψετε μια άλλη παρουσίαση διακομιστή για τις προσαρμοσμένες διαδρομές σας.

2. Prerender.io

Τεκμηρίωση: https://prerender.io/documentation
Πολυπλοκότητα: 2/10
Αποτελεσματικότητα: 7/10

Πριν δοκιμάσουμε το γωνιακό Universal, δοκιμάσαμε το Prerender.io. Αυτό είναι σίγουρα η διαδρομή με το LEAST ποσό της ταλαιπωρίας. Για να το εφαρμόσετε με τρόπο που να λειτουργεί με το Google και το bing bots, απαιτούνται μόνο αρκετές γραμμές κώδικα και η εγγραφή στον ιστότοπό τους για ένα διακριτικό. Και σε αυτό το παράδειγμα, χρησιμοποιούμε ένα διακομιστή Express Node:

var prerender = απαιτήστε ('prerender-node'). set ('prerenderToken', 'YOUR_TOKEN');
prerender.crawlerUserAgents.push ('googlebot');
prerender.crawlerUserAgents.push ('bingbot');
prerender.crawlerUserAgents.push ('yandex');
app.use (prerender);

Αν χρησιμοποιείτε το Express / Node, βεβαιωθείτε ότι έχετε τη γραμμή app.use (prerender) επάνω από το express.static middleware που μπορεί να εξυπηρετεί τον κεντρικό σας κατάλογο.

Με το prerender.io, θα κάνει ουσιαστικά το ίδιο πράγμα με το universal. Θα αποθηκεύσει σε προσωρινή μνήμη ένα στατικό html από τις σελίδες σας και θα τους εξυπηρετήσει μέχρι τα bots της Google κατά την ανίχνευση μέσω του ιστότοπού σας.

Έτσι είναι πολύ εύκολο και λειτουργεί καλά με SPA, αλλά ήταν αποτελεσματικό;

Πλεονεκτήματα
- Πολύ γρήγορη ρύθμιση
- Η δωρεάν έκδοση μπορεί να αποθηκεύσει μέχρι και 250 σελίδες
- Τα αποτελέσματα αναζήτησης Google για τις σελίδες μας είναι όλα σύμφωνα με την περιγραφή που θέσαμε στην υπηρεσία meta

Μειονεκτήματα
- Όταν ακούγονται 250 δωρεάν σελίδες, η προσωρινή αποθήκευση μπορεί να πραγματοποιηθεί σε πολλαπλές εκδόσεις της διεύθυνσης URL σας (χρησιμοποιώντας τον ιστότοπό μας ως παράδειγμα) https://www.brewcrewlabs.com και https://brewcrewlabs.com. Το επόμενο επίπεδο είναι 20.000 σελίδες για $ 15 / μήνα.

3. Η ετυμηγορία

Η ετυμηγορία είναι ότι το γωνιακό καθολικό δεν είναι ακόμα έτοιμο. Αν και μπορεί να υπάρχουν πράγματα που θα μπορούσαμε να εξετάσουμε για να οξύνουμε το SEO μας, το Prerender.io είναι απλά πιο απλό και αποτελεσματικό. Αν δεν σκέφτεστε να δημιουργείτε μια αφθονία σελίδων κάθε εβδομάδα, το Prerender.io μπορεί να είναι η λύση για εσάς. Παρόλο που το γωνιακό καθολικό λειτουργεί με διάφορους τρόπους, απαιτεί περισσότερη εργασία στο πόδι ώστε να δουλεύει στο ίδιο επίπεδο με το Prerender.io. Ίσως απλά δεν γνωρίζουμε τη μυστική σάλτσα στο γωνιακό Universal - αν το κάνετε, παρακαλώ μας ενημερώστε για την εμπειρία σας!

Ελπίζω ότι αυτό το άρθρο βοήθησε οποιονδήποτε άλλον σε παρόμοια κατάσταση!