Οι υποχρεώσεις του web developer είναι πιο ευρύτερες από την σχεδίαση και την ανάπτυξη μιας εφαρμογής. Επιπλέον θα πρέπει να προσθέσει τις σωστές δυνατότητες, ώστε οι χρήστες θα μπορέσουν την αξιοποιήσουν.
Η δυνατότητα του SEO είναι κάτι που ανήκει σε αυτή την κατηγορία.
Αν θέλετε οι η εφαρμογή σας να λειτουργεί καλά στις μηχανές αναζήτησης, η ενσωμάτωση τεχνικών SEO κατά την ανάπτυξη της εφαρμογής είναι το αναγκαίο κακό για κάθε web developer.
Με αυτό τον βασικό οδηγό SEO για Web developer θα παρουσιαστούν οι τελευταίες τεχνικές SEO που θα πρέπει να χρησιμοποιήσετε κατά την ανάπτυξη εφαρμογών, σε λιγότερο από 10 λεπτά.
Ξεκινάμε, για όσους δεν γνωρίζουν το θέμα SEO, πάμε με τα βασικά.
Τι είναι το SEO, και γιατί το χρειαζόμαστε;
SEO σημαίνει Search Engine Optimization (Βελτιστοποίηση για τις Μηχανές Αναζήτησης). Ο όρος αντικατοπτρίζει τι ακριβώς είναι το SEO.
Όταν γράφουμε κάποιες λέξεις αναζήτησης το πλαίσιο του πλοηγού, η μηχανή αναζήτησης πρέπει να αποφασίσει πως θα εμφανίσει τα αποτελέσματα, ποιες ιστοσελίδες θα είναι στις πρώτες 10, και ποιες θα είναι οι επόμενες.
Αν ψάχνετε να προσελκύσετε χρήστες που ψάχνουν για παρόμοιο περιεχόμενο για αυτό που προσφέρετε, το να βρεθείτε στην κορυφή των αποτελεσμάτων είναι το καλύτερο στοίχημα για να επισκεφθούν οι χρήστες τον ιστότοπο σας.
Οι αλγόριθμοι των μηχανών αναζήτησης χρησιμοποιούν δεδομένα τα οποία έχουν αποθηκεύσει για κάθε σελίδα ώστε να αποφασίσουν ποια ιστοσελίδα παρέχει το πλησιέστερο περιεχόμενο στην αναζήτηση των λέξεων κλειδιών του χρήστη.
Επιπρόσθετα στο περιεχόμενο της ιστοσελίδας, οι αλγόριθμοι αξιολόγησης προτιμούν να εμφανίζουν ιστότοπους οι οποίοι προσφέρουν το καλύτερο περιβάλλον χρήστη (UI) στην κορυφή των αποτελεσμάτων.
Συνδυασμός των δύο απαιτούμενων, είναι η ανάγκη για τους web developers να ακολουθήσουν τις αρχές SEO κατά την ανάπτυξη.
Ως web developer, έχει ευθύνη για την τεχνική πλευρά του SEO, η οποία απαιτεί μερικές αλλαγές κώδικα, προσθήκες και επεμβάσεις για βελτιστοποίηση.
Τώρα που τα βασικά καλύφθηκαν ας συνεχίσουμε με τις βασικές συμβουλές SEO.
Προσθήκη σχετικών HTML meta tags
Οι μηχανές αναζήτησης θα κοιτάξουν σε συγκεκριμένες HTML Tags (ετικέτες) σε κάθε σελίδα γιια να αναγνωρίσουν τον τύπο του περιεχομένου που προσφέρουν. Οι δύο πιο σχετικές πιο σχετικές ετικέτες (tags) για το SEO είναι title και description.
Αν γράφετε τον κώδικα των meta tags του ιστότοπου σας μόνοι σας, θα πρέπει να λάβετε υπόψη τον αναγκαίο ρόλο αυτών των ετικετών.
Τι είναι οι λέξεις κλειδιά (keywords);
Στους όρους μηχανής αναζήτησης, λέξεις κλειδιά είναι οι φράσεις που χρήστες γράφουν στο πλαίσιο αναζήτησης στον πλοηγό.
Για να προσελκύσετε τους χρήστες των μηχανών αναζήτησης στον ιστότοπο σας, πρώτα θα χρειαστεί να αναγνωρίσετε τις λέξεις κλειδιά που οι χρήστες ψάχνουν για να βρουν παρόμοιο περιεχόμενο με αυτό που προσφέρετε.
Μόλις αναγνωρίσετε τις μηχανές αναζήτησης τις σχετικές λέξεις κλειδιά, θα πρέπει να τις χρησιμοποιήσετε στον περιεχόμενο των ιστοσελίδων.
Τα πιο σημαντικά σημεία είναι για χρήση των keywords είναι η ετικέτα του τίτλου της ιστοσελίδας και η ετικέτα Η1.
Θα πρέπει επίσης να χρησιμοποιήσετε τις λεξεις κλειδιά με σε H2 και άλλες κεφαλίδες και παραγράφους. Παρόλο, που θα έχουν μικρότερο αντίκτυπο στον αλγόριθμο των μηχανών αναζήτησης από τα πρώτα που ανάφερα.
Θα πρέπει να είστε προσεχτικοί για την υπερβολική χρήση των λέξεων κλειδιά σε κάθε ιστοσελίδα. Αν οι μηχανές αναζήτησης δουν υπερβολική χρήση των λέξεων κλειδιών ως προσπάθεια να παραπλανήσουν τις μηχανές αναζήτησης, και βάλουν ποινή (και πέσετε ή δεν εμφανίζεται ο ιστότοπος σας στα αποτελέσματα).
Ποια είναι η σωστή αναλογία λέξεων και λέξεων-κλειδιών (keywords); Είναι η ερώτηση του ενός εκατομμυρίου. Είναι κάτι που μηχανές αναζήτησης κρατούν κλειστά τα χαρτιά τους.
Σημείωση: Γενικά υπάρχει μια σύγχυση, με τις λέξεις-κλειδιά (keywords) και τις ετικέτες. Πολλές φορές κάτω από άρθρα θα δούμε κάποιες λέξεις οι οποίες είναι σχετικές με το άρθρο, αυτό είναι οι Ετικέτες (tags) που χρησιμοποιεί το WordPress, και είναι κάτι σαν κατηγοριοποίηση, ή να το πω καλύτερα οι ετικέτες που βάζουμε έξω από συρτάρια, για να ξέρουμε τι έχει μέσα. Παλιότερα υπήρχαν ετικέτες και στον κώδικα, με την μορφή
<meta name=”keywords” content=”μπλε, ειδήσεις, δωρεαν, κίτρινο, θάλασσα, ελλάδα, Greece”>
Αυτό πλέον έχει καταργηθεί, και αγνοείται από τις μηχανές αναζήτησης, γιατί πολλοί web developers, έκαναν κακή χρήση, και έβλεπαν ποιος ιστότοπος βγαίνει πρώτος, και αντέγραφαν τις λέξεις-κλειδιά, και τις έβαζαν και στο δικό τους ιστότοπο. Το χειρότερο βέβαια ήταν, πάρα πολλές φορές δεν είχαν σχέση με το περιεχόμενο. Οι μηχανές αναζήτησης εξελίχθηκαν, και διαβάζουν το κείμενο, το περιεχόμενο, προσπαθούν να προσομοιώσουν πως διαβάζει ένας άνθρωπος, και τις λέξεις κλειδιά τις εντοπίζουν από το περιεχόμενο και όχι από τις ετικέτες που θα βάλουμε εμείς.
Title tag (Ετικέτα τίτλου)
Η πιο αποδοτική θέση για να προσθέστε τις λέξεις κλειδιά είναι η ετικέτα τίτλου (title tags) στην αρχή. Αν αυτό δεν είναι δυνατό, χρησιμοποιήστε την λέξη κλειδί οπουδήποτε μέσα στον τίτλο.
Ένας καλά βελτιστοποιημένος τίτλος ετικέτας δεν θα πρέπει να είναι μεγαλύτερος από 60 χαρακτήρες, συμπεριλαμβανομένου και των κενών και ειδικών χαρακτήρων
<title>Introduction to SEO for beginners</title>
Meta Description Tag (Ετικέτα περιγραφής)
Οι ετικέτες περιγραφής (description tags) δεν έχουν σημαντικό βάρος στο αποτέλεσμα στον αλγόριθμο αξιολόγησης. Αλλά μιας και το παρέχετε είναι πως εμφανίζετε στο SERP για να πάρουν μια ιδέα οι χρήστες για το περιεχόμενο της ιστοσελίδας, θα πρέπει να γραφεί έτσι ώστε να προσελκύσουν να κάνουν κλικ οι χρήστες στην ιστοσελίδα σας.
<meta name="description" content="A short description that describes the content in the web page">
Robots.txt file και robots meta tags
Η χρήση του αρχείου robots.txt είναι να πει στις μηχανές αναζήτησης να μην ευρετηριάσουν σελίδες που καθορίζονται μέσα σε αυτό το αρχείο. Συνήθως, η αποτροπή των ανιχνευτών για κάποια συγκεκριμένη σελίδα είναι για να σταματήσουν τα αιτήματα των ανιχνευτών ώστε να γίνεται υπερβολική χρήση του διακομιστή (server). Κάντε το αυτό μόνο αν η μείωση των αιτημάτων που στέλνονται στο διακομιστή είναι κρίσιμο για την ταχύτητα και απόδοση του ιστότοπου.
Επίσης μπορείτε να εμποδίσετε την ανίχνευση μην σημαντικών σελίδων στον ιστότοπο σας.
Μπορείτε να χρησιμοποιήσετε επίσης να χρησιμοποιήσετε το αρχείο robots.txt ώστε να αποτρέπει σελίδες από την καταχώρηση στο ευρετήριο στη Google ή άλλες παρόμοιες μηχανές αναζήτησης. Αυτό βέβαια δεν είναι εντελώς εφικτό. Αν υπάρχει άλλη σελίδα που συνδέεται με την συγκεκριμένη σελίδα, τότε πάλι θα ευρετηριοποιηθεί.
Αν θέλετε να αφαιρέσετε μια σελίδα από την καταχώρηση μια για πάντα, προσθέστε το noindex στο robots meta tags στον HTML κώδικα
<meta name="robots" content="noindex">
Σύνδεσμοι Follow και nofollow
Ένας ανιχνευτής μηχανής αναζήτησης ανιχνεύει τις συνδεδεμένες σελίδες μέσα σε μια σελίδα που επισκέπτεται. Μερικές φορές, μπορεί αν θέλετε να αποτρέψετε μια συνδεδεμένη σελίδα να συσχετισθεί με τον ιστότοπο σας ή να μην ανιχνευθεί από την συγκεκριμένη σελίδα. Σε αυτές τις περιπτώσεις, θα πρέπει αν προσθέσετε την λέξη nofollow ως τιμή στο rel χαρακτηριστικό.
<a href="https://example.com" rel="nofollow">
Δομημένα δεδομένα (Structured Data)
Ίσως θα έχετε δει, πως μερικές φορές, τα αποτελέσματα αναζήτησης εμφανίζονται με συγκεκριμένη μορφή. Για παράδειγμα, αν αναζητήσετε στο google «συνταγη για μελομακαρονα», η σελίδα αποτελεσμάτων θα εμφανίσει ειδικές κάρτες με συνδέσμους σε διαφορετικές σελίδες συνταγών.
H google όπως και οι περισσότερες μηχανές αναζήτησης, χρησιμοποιούν τα δομημένα στοιχεία σε μια ιστοσελίδα ώστε τα λαμβανόμενα δεδομένα να εμφανιστούν με ειδικό τρόπο όπως τον παραπάνω.
Το λεξικό που χρησιμοποιείται για τα δομημένα δεδομένα είναι σχεδόν ίδιο με αυτό που ορίζεται στο schema.org. Παρόλο αυτό θα πρέπει να έχετε ως οδηγό την τεκμηρίωση των μηχανών αναζήτησης για την ακριβή μορφή που αποδέχεται από αυτές. Αν βελτιστοποιείτε τον ιστότοπο σας για την Google, μπορείτε να δοκιμάσετε και επιβεβαιώσετε τα δομημένα δεδομένα στο Google’s Rich Results Test .
Τώρα, ας δούμε πως μπορούμε να χρησιμοποιήσουμε τα δομημένα δεδομένα στις ιστοσελίδες μας ώστε να παρέχουμε τις σωστές πληροφορίες στην Google για τον περιεχόμενο τους.
Αν ο ιστότοπο σας είναι μια σελίδα συνταγών, μπορείτε να χρησιμοποιήσετε τα ακόλουθα δομημένα δεδομένα, γραμμένα σε μορφή JSON-LD, να παρέχετε το όνομα, τον συντάκτη, αξιολογήσεις και άλλα σχετικά δεδομένα για την συνταγή.
<html>
<head>
<title>Italian Pasta Recipe</title>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "Italian Pasta Recipe",
"author": "Jane Smith",
"image": "https://cdn.pixabay.com/photo/2016/12/26/17/28/food-1932466_960_720.jpg",
"description": "An easy Italian pasta recipe.",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.5",
"reviewCount": "123",
"bestRating": "5",
"worstRating": "3"
},
"prepTime": "PT30M",
"totalTime": "PT1H",
"recipeYield": "4",
"nutrition": {
"@type": "NutritionInformation",
"calories": "430 calories"
}
}
</script>
</head>
<body>
</body>
</html>
Επιπλέον του τύπου Recipe, η Google παρέχει χρήσιμους άλλους τύπους που περιλαμβάνουν Article, FAQ, Book, JobPosting και Local Busines. Δείτε την τεκμηρίωση Google’s developer documentation για να βρείτε περισσότερες λεπτομέρειες για τους διαφορετικούς τύπους μορφών δομημένων δεδομένων και τύπους περιεχομένων.
Ταχύτητα φορτώματος Σελίδας
Η ταχύτητα φορτώματος μια σελίδας είναι μία από κύριες πτυχές που βελτιώνει την εμπειρία χρήσης στους χρήστες.
Το 2018 μια έρευνα που διενεργήθηκε από την Google αποκάλυψε ότι η πιθανότητα να φύγει ένας επισκέπτης αυξήθηκε κατά 32% όταν ο χρόνος φορτώματος κυμάνθηκε από 1 ως 3 δευτερόλεπτα και αυξήθηκε κατά 90% όταν η ταχύτητα κυμάνθηκε από 1 έως 5 δευτερόλεπτα.
Εξαιτίας της σημασίας της ταχύτητας φορτώματος στην εμπειρία χρήστη, η Google ξεκίνησε να την χρησιμοποιεί ως παράγοντα αξιολόγησης στον αλγόριθμο αξιολόγησή της. Τώρα, η αύξηση φορτώματος της σελίδας σας είναι η αιτία για να αξιολογηθεί υψηλότερα (χειρότερα) στην σελίδα αποτελεσμάτων της Google.
Όσο βασικό είναι να κάνετε τις σελίδες σας να φορτώνουν γρηγορότερα, είναι επίσης βασικό να κάνετε τους χρήστες να νιώθουν ότι φορτώνει γρηγορότερα. Θα πρέπει να μειώσετε τον χρόνο που κάνει να φορτώσει κάποιο περιεχόμενο για να κρατήσετε την προσοχή των χρηστών μέχρι να φορτωθεί ολόκληρο το περιεχόμενο στο υπόβαθρο και κάνει τους χρήστες να νιώθουν ότι η σελίδα φορτώνει γρηγορότερα.
Το Google Lighthouse είναι καταπληκτικό εργαλείο που μετρά την απόδοση του ιστότοπου σας. Η βαθμολογία αξιολόγησης του είναι βασισμένη μόνο στην ταχύτητα της τρέχουσας σελίδας κάτω από ιδανικές συνθήκες. Μετρά πως αποδίδει ακόμη και κάτω από κακές συνθήκες 3G συνδέσεις. Το Lighthouse είναι εκπληκτικό εργαλείο και αξίζει τον κόπο η χρήση του ώστε να δείτε πως θα λειτουργεί ο ιστότοπος σας στους χρήστες.
Μπορείτε χρησιμοποιήσετε διαφορετικούς τύπους προσέγγισης για να βελτιώσετε την ταχύτητα που φορτώνει ο ιστότοπος και οι επιμέρους ιστοσελίδες του.
- Minify CSS, Javascript, και HTML
- Μείωσης του αριθμού ανακατευθύνσεων (Reduce the number of redirects)
- Χρήση του browser caching
- Βελτίωση του μεγέθους των εικόνων (Optimize image sizes)
- Χρήση της τεχνικής lazy loading
- Χρήση του Google’s Accelerated Mobile Page (AMP)
Φιλικό προς τις κινητές συσκευές (Mobile Friendliness)
Πλέον το περισσότερο διαδικτυακό περιεχόμενο είναι με την χρήση μέσω κινητών συσκευών (κινητά, tablet κλπ). Έτσι η Google περιέλαβε στους παράγοντες αξιολόγησης τους αλγορίθμου της, το πόσο φιλικό είναι ένας ιστότοπος προς τις κινητές συσκευές.
Ένας ιστότοπος παρέχει καλύτερη εμπειρία χρήστη όταν είναι φιλικός προς αυτές. Τι σημαίνει αυτό. Όταν σημαντικός αριθμός χρηστών χρησιμοποιεί τον ιστότοπο σας με κινητό, είναι έξυπνο να τον κάνετε πιο εύχρηστο στην χρήση μέσω κινητού, ώστε και να είναι εύκολο να διαβαστεί αλλά και να βρει το περιεχόμενο που ψάχνει, και να μην φύγει χωρίς επιστροφή.
Υπάρχουν τρεις κύριοι τρόποι προσέγγισης για να κάνετε τον ιστότοπο σας περισσότερο φιλικό προς τις κινητές συσκευές (mobile friendly).
Χρήση σχεδιασμού Responsive (Responsive design)
Χρησιμοποιείστε τις ετικέτες viewport, πειράξτε την CSS ώστε να είναι πιο ευέλικτος ο ιστότοπος σας σε διαφορετικές διαστάσεις οθονών και να γίνει ο σχεδιασμός πιο responsive.
Επίσης πλέον μια κοινή πρακτική είναι να ξεκινά ο σχεδιασμός από κινητές συσκευές και να επεκτείνεται σε laptops, και σταθερούς υπολογιστές με μεγάλες οθόνες και αναλύσεις.
Χρήση Δυναμικού σχεδιασμού (Dynamic design)
Ο δυναμικός σχεδιασμός σερβίρει διαφορετικό περιεχόμενο HTML σε κινητά και σταθερούς υπολογιστές αφού εντοπίσεις τον τύπο της συσκευής που ζητά(διαβάζει) το περιεχόμενο. Χρειάζεται περισσότερη δουλειά για να πραγματοποιηθεί αυτό γιατί χρειάζεται να σχεδιαστεί διαφορετικά για κινητά και σταθερούς.
Χρήση υπο-τομέα (sub-domain) για κινητά
Μερικές εφαρμογές χρησιμοποιούν διαφορετικό subdomain για χρήστες από κινητά. Συνήθως, ο υπο-τομέας είναι της μορφής mobile.example.com ή m.example.com. Αυτή η προσέγγιση λαμβάνει περισσότερο χρόνο για να κατασκευασθεί. Δεν είναι γενικά προτεινόμενο για μικρού ή μεσαίου μεγέθους ιστότοπους, ειδικά αν δεν έχετε δύο διαφορετικές εκδόσεις του ιστότοπου σας.
Κλείνωντας
Φυσικά αυτό το άρθρο δεν είναι μια πλήρες για το θέμα SEO, αλλά πιστεύω προσφέρεις τις βασικές αρχές του SEO και σε ποια σημεία θα πρέπει να εστιάσουν οι σχεδιαστές ιστότοπων. Στο διαδίκτυο θα βρείτε εκατοντάδες τεχνικές για το πως θα τις χρησιμοποιήσετε στον ιστότοπο σας ώστε να λάβετε καλύτερη αξιολόγηση και να ανέβετε στις θέσεις αποτελεσμάτων των μηχανών αναζήτησης.
Επίσης ο άλλος σημαντικός παράγοντας που δεν αναφέρθηκε σε αυτό το άρθρο, είναι ο παράγοντας περιεχόμενο. Ένας ιστότοπος θα λάβει καλύτερη θέση αν προσφέρει πρότυπο περιεχόμενο, συχνές ενημερώσεις, χρήση των κοινωνικών δικτύων κλπ.
