SEO σε SPA και custom web apps: routing, 404 και canonical χωρίς παγίδες
Οι single-page εφαρμογές και τα custom web apps μπορούν να δώσουν εξαιρετική εμπειρία χρήστη. Γρήγορες μεταβάσεις, δυναμικά dashboards, φίλτρα, portals, authenticated περιοχές και πλούσια interactions.
Όταν όμως ένα μέρος της εφαρμογής πρέπει να εμφανίζεται στη Google, το routing και τα status codes δεν είναι λεπτομέρειες. Είναι βασικές προϋποθέσεις για να καταλάβει η μηχανή αναζήτησης τι υπάρχει, τι πρέπει να indexάρει και τι πρέπει να αγνοήσει.
Το λάθος δεν είναι να χρησιμοποιείτε JavaScript. Το λάθος είναι να χτίζετε public SEO pages σαν να είναι μόνο app screens.
Τι κάνει δύσκολο το SEO σε SPA
Σε μια κλασική server-rendered σελίδα, κάθε URL επιστρέφει HTML με περιεχόμενο, title, description, canonical και σωστό status code.
Σε μια SPA, ο server συχνά επιστρέφει το ίδιο shell για πολλά URLs και το περιεχόμενο εμφανίζεται μετά με JavaScript. Αυτό μπορεί να δουλέψει, αλλά δημιουργεί σημεία προσοχής:
- η Google πρέπει να ανακαλύψει τα URLs
- το περιεχόμενο πρέπει να είναι renderable
- τα links πρέπει να είναι πραγματικά links
- τα 404 πρέπει να είναι πραγματικά 404
- τα canonical πρέπει να είναι σταθερά
- τα metadata δεν πρέπει να αλλάζουν αργά ή λάθος
Η Google αναφέρει ότι επεξεργάζεται JavaScript σε φάσεις crawling, rendering και indexing. Αυτό σημαίνει ότι το rendering υπάρχει, αλλά δεν πρέπει να το αντιμετωπίζετε ως άλλοθι για αδύναμη αρχιτεκτονική.
Το routing πρέπει να έχει πραγματικά URLs
Για public σελίδες, αποφύγετε routes τύπου hash όταν θέλετε SEO.
Κακό παράδειγμα:
- /#/services/custom-crm
- /#/products/category/shoes
Καλύτερο παράδειγμα:
- /services/custom-crm
- /products/category/shoes
Το URL πρέπει να είναι καθαρό, crawlable και να αντιστοιχεί σε σελίδα που μπορεί να φορτωθεί απευθείας. Αν ο χρήστης ή η Google ανοίξει το URL από κρύα φόρτωση, δεν πρέπει να σπάει.
Τα links πρέπει να είναι crawlable
Η Google ανακαλύπτει URLs μέσα από links. Αν η πλοήγηση είναι μόνο click handler σε div ή button χωρίς πραγματικό href, μπορεί να δημιουργηθούν προβλήματα ανακάλυψης.
Για public navigation, χρησιμοποιήστε κανονικά anchors:
- σωστό href
- περιγραφικό anchor text
- server fallback για direct visits
- όχι κρυφά URLs μόνο μέσα σε JavaScript state
Σε custom εφαρμογές, δεν χρειάζεται κάθε εσωτερική οθόνη να είναι indexable. Χρειάζεται όμως ό,τι θέλετε να φέρνει οργανική αναζήτηση να είναι τεχνικά ορατό.
Το 404 πρέπει να είναι πραγματικό 404
Ένα συχνό SPA λάθος είναι όλα τα άγνωστα URLs να επιστρέφουν HTTP 200 και μετά να εμφανίζουν μήνυμα «δεν βρέθηκε» μέσα στο app.
Για τον χρήστη φαίνεται εντάξει. Για SEO, μπορεί να δημιουργήσει soft 404 προβλήματα. Η Google προτείνει να χρησιμοποιούνται ουσιαστικά HTTP status codes, όπως 404 για σελίδες που δεν υπάρχουν.
Αν έχετε client-side routing, πρέπει να υπάρχει server ή framework-level χειρισμός για not found pages. Το /products/old-product που δεν υπάρχει δεν πρέπει να μοιάζει τεχνικά με κανονική σελίδα.
Canonical URLs χωρίς αντιφάσεις
Το canonical λέει ποια είναι η κύρια έκδοση μιας σελίδας. Σε SPA ή hybrid εφαρμογές, μπορεί να χαλάσει όταν:
- όλα τα routes έχουν ίδιο canonical
- το canonical αλλάζει μόνο μετά από JavaScript
- τα filtered URLs δείχνουν λάθος κύρια σελίδα
- pages με διαφορετικό περιεχόμενο δείχνουν στο ίδιο canonical
- staging URLs περνούν κατά λάθος σε production
Για SEO pages, το canonical πρέπει να είναι προβλέψιμο, σωστό και διαθέσιμο όσο πιο νωρίς γίνεται στο HTML.
Τι γίνεται με authenticated περιοχές
Πολλά custom web apps έχουν δημόσιες και κλειστές περιοχές.
Παραδείγματα:
- public landing pages
- public service pages
- public blog
- login
- customer portal
- admin dashboard
- reports πίσω από authentication
Δεν πρέπει να προσπαθείτε να κάνετε index τα πάντα. Οι authenticated περιοχές συνήθως πρέπει να είναι εκτός index, με σωστά status codes, noindex όπου χρειάζεται και χωρίς διαρροή ευαίσθητου περιεχομένου σε public HTML.
Το SEO πρέπει να χτίζεται στις public σελίδες που έχουν πραγματική αξία αναζήτησης.
Πώς το κάνει καλά η Ai Foundry
Στην Ai Foundry σχεδιάζουμε ιστοσελίδες και custom εφαρμογές με καθαρό διαχωρισμό ανάμεσα σε public SEO surface και application surface. Αυτό είναι κρίσιμο όταν ένα project συνδυάζει marketing site, blog, landing pages, portal, CRM ή SaaS λειτουργίες.
Φροντίζουμε τα SEO URLs να έχουν σωστά metadata, status codes, canonical, internal linking και renderable περιεχόμενο, ενώ οι κλειστές περιοχές παραμένουν ασφαλείς και λειτουργικές. Έτσι η εφαρμογή δεν θυσιάζει ούτε την εμπειρία χρήστη ούτε την οργανική ορατότητα.
Checklist για SPA SEO
Ελέγξτε τα εξής:
- κάθε public URL ανοίγει απευθείας
- τα links έχουν πραγματικό href
- τα 404 επιστρέφουν 404 status
- τα metadata είναι μοναδικά ανά σελίδα
- το canonical είναι σωστό ανά route
- δεν υπάρχουν hash URLs για SEO σελίδες
- το περιεχόμενο είναι renderable
- οι private περιοχές δεν indexάρονται
- staging ή preview URLs δεν περνούν στο index
- υπάρχει XML sitemap μόνο για χρήσιμες public σελίδες
Συμπέρασμα
Οι SPA και οι custom εφαρμογές μπορούν να είναι SEO-friendly, αρκεί να μη σχεδιαστούν σαν κλειστά app screens όταν πρέπει να έχουν δημόσια ορατότητα.
Το σωστό SEO σε τέτοια projects είναι θέμα αρχιτεκτονικής: URLs, rendering, links, metadata, status codes και canonical πρέπει να είναι συνεπή από την αρχή.
Πηγές για περαιτέρω ανάγνωση: Google Search Central: JavaScript SEO basics, Google Search Central: Search Essentials, Google Search Central: canonical URLs.