Μια καφετέρια που τη βρίσκεις

Το πρόβλημα

Το site είναι React single-page app, που σημαίνει ότι το περιεχόμενο υπάρχει μόνο αφού τρέξει η JavaScript. Οι περισσότερες μηχανές απαντήσεων AI και αρκετοί crawlers δεν την τρέχουν ποτέ, οπότε γι' αυτούς η σελίδα ήταν ουσιαστικά κενή. Επιπλέον, η επιχείρηση είναι πραγματικά δίγλωσση, και οι πλατφόρμες delivery από τις οποίες εξαρτάται ήθελε η καθεμία τον σύνδεσμό της.

Τι έχτισα

• ›Ένα crawlable fallback γραμμένο απευθείας στο index.html, με τη διεύθυνση, τα τηλέφωνα, το ωράριο και μια σύνοψη του μενού στα ελληνικά και στα αγγλικά. Το React το αντικαθιστά κατά τη φόρτωση, οπότε οι επισκέπτες δεν το βλέπουν ποτέ και οι crawlers πάντα.
• ›Το fallback περιορίζεται σκόπιμα σε στοιχεία που δεν αλλάζουν. Οι τιμές βρίσκονται σε ένα σημείο μέσα στην εφαρμογή και δεν αντιγράφονται στο HTML, γιατί μια ξεπερασμένη τιμή είναι χειρότερη από καμία τιμή.
• ›Schema CafeOrCoffeeShop με πραγματικό ωράριο, γεωγραφικές συντεταγμένες και ταχυδρομική διεύθυνση, ώστε η μηχανή αναζήτησης να ξέρει τι είναι η επιχείρηση αντί να το μαντεύει από τις λέξεις της σελίδας.
• ›Είναι στιλιζαρισμένο στη μαύρη και κρεμ παλέτα της επωνυμίας αντί να μείνει άστυλο, αφού είναι στην οθόνη για τη στιγμή πριν φορτώσει το React και ένα λευκό φλας θα έμοιαζε με χαλασμένη σελίδα.
• ›Οι σύνδεσμοι παραγγελίας προς e-food, Wolt και Box βρίσκονται και αυτοί στο crawlable στρώμα, ώστε οι δρόμοι που όντως φέρνουν παραγγελίες να μην είναι ποτέ πίσω από JavaScript.

Πού βρίσκεται

Χτισμένο με

• React
• Vite
• JavaScript
• Tailwind
• Schema.org
• Bilingual