Προγραμματισμός Εφαρμογών Διαδικτύου SEO. (Search Engine Optimization) Βασικές Τεχνικές. Φώτης Κόκκορας ΤΕΙ Θεσσαλίας Τμήμα Μηχανικών Πληροφορικής

Transcript

1 Προγραμματισμός Εφαρμογών Διαδικτύου 09 SEO (Search Engine Optimization) Βασικές Τεχνικές Φώτης Κόκκορας ΤΕΙ Θεσσαλίας Τμήμα Μηχανικών Πληροφορικής

2 Search Engine Optimization Τεχνικές για να βελτιώσουμε την κατάταξη μιας ιστοσελίδας στα αποτελέσματα των μηχανών αναζήτησης, για αναζήτηση χρηστών με δεδομένες λέξεις-κλειδιά. Βασίζονται στην παραδοχή ότι οι μηχανές αναζήτησης λαμβάνουν δεδομένες παραμέτρους υπόψη τους (θα δούμε ποιες) κατά τον υπολογισμό της σχετικότητας μιας σελίδας με δεδομένο ερώτημα (search) του χρήστη. Το πλήθος των παραμέτρων, θεωρητικά τουλάχιστον, είναι μεγάλο (~200) και μεταβάλλεται με την πάροδο του χρόνου καθώς: κάποια στοιχεία χάνουν τη σημαντικότητά τους με τον καιρό άλλα στοιχεία καθίστανται πιο σημαντικά κάθε μηχανή αναζήτησης έχει δικό της αλγόριθμο κατάταξης Οι λειτουργίες που εκτελούν οι μηχανές αναζήτησης συνοπτικά είναι: Crawling (Ερπυσμός): τακτική επίσκεψη και ανάκτηση του περιεχομένου των σελίδων ενός site από ένα λογισμικό που καλείται web robot, ή bot, ή crawler, ή spider (π.χ. googlebot, bingbot, yahoobot, yadex, κτλ). Υπάρχουν πολλές δεκάδες bot, λίγα όμως είναι πραγματικά παγκόσμιου βεληνεκούς. Indexing (Δεικτοδότηση): για κάθε σελίδα, κατασκευή ευρετηρίου με όλες τις λέξεις που περιέχονται σε αυτήν, στον τίτλο της, σε ιδιότητες alt του στοιχείου img, κ.α. Serving (Εξυπηρέτηση): ταίριασμα ερωτήματος χρήστη με σελίδες, βαθμολόγηση της σχετικότητας και επιστροφή αποτελεσμάτων. Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -2- Προγραμματισμός Εφαρμογών Διαδικτύου

3 Crawling (Ερπυσμός) Ο γενικός τρόπος λειτουργίας είναι: Ξεκίνα από μια λίστα με URLs βάσει προηγούμενων επισκέψεων. Διέγραψε από τη λίστα σελίδες που δεν υπάρχουν πλέον. Πρόσθεσε στη λίστα το URL νέων σελίδων που εντοπίστηκαν μέσω των συνδέσμων που υπάρχουν στις γνωστές σελίδες. Πόσο συχνά επισκέπτεται μια σελίδα ένα bot; Όποτε κρίνει αυτό ότι χρειάζεται! Αν το περιεχόμενο δεν αλλάζει μεταξύ επισκέψεων, ο ρυθμός πέφτει (π.χ. μια φορά το μήνα). Αν το περιεχόμενο αλλάζει συχνά, ο ρυθμός ανεβαίνει (π.χ. κάθε μέρα) Μπορούμε να πούμε πόσο συχνά θέλουμε αλλά αυτό δεν δεσμεύει το bot. Το crawling τροφοδοτεί το indexing Κάθε μηχανή αναζήτησης έχει το δικό της αλγόριθμο indexing, ο οποίος λαμβάνει υπόψη διάφορες παραμέτρους. Πρέπει όμως το bot να δει τη σελίδα για να γίνει indexing σε αυτή Επηρεασμός ενός crawler/bot από μέρους μας: σε επίπεδο site: μέσω του αρχείου robots.txt που βάζουμε στον root φάκελο του site σε επίπεδο σελίδων: με κατάλληλες οδηγίες <meta name="robots"... > σε επίπεδο συνδέσμων: η ιδιότητα rel="nofollow" σε html στοιχείο <a> αποτρέπει το bot από το να ακολουθήσει τον σύνδεσμο κατά το crawling Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -3- Προγραμματισμός Εφαρμογών Διαδικτύου

4 robots.txt ( ) Περιέχει οδηγίες προς crawlers. Το κάνει μέσω 4 λέξεων: User-agent: σε ποιο bot απευθύνεται ( * για όλα, ή το όνομα του bot για συγκεκριμένο). Disallow: pattern που περιγράφει ρητά τι απαγορεύουμε να δεικτοδοτηθεί. Allow: pattern που περιγράφει ρητά τι επιτρέπουμε να δεικτοδοτηθεί. Χρησιμοποιείται σπάνια μόνο του - συνήθως χρησιμοποιείται σε συνδυασμό με το Dissallow. Sitemap: αρχείο με τις σελίδες που θέλουμε να δει το bot (βλ. slide #6) Παραδείγματα απαγόρευσης crawling και indexing: σε όλο το site: Disallow: / στο φάκελο my-folder (μέσα στο root φάκελο του site): Disallow:/my-folder/ στο αρχείο my-file.html: Disallow:/private_file.html Απόσυρση της εικόνας my-dog.jpg από το ευρετήριο του images.google.com: User-agent: Googlebot-Image Disallow: /images/my-dog.jpg Απαγόρευση bots για όλο το site χωρίς όμως να μπλοκάρουμε τον crawler του μηχανισμού διαφήμισης του Google (AdSense) που πρέπει να βλέπει το περιεχόμενο των σελίδων ώστε να βάλει κατάλληλη διαφήμιση: User-agent: * Disallow: / User-agent: Mediapartners-Google Allow: / Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -4- Προγραμματισμός Εφαρμογών Διαδικτύου

5 Οδηγίες <meta name="robots"... > Μπαίνουν στον κώδικα μιας σελίδας, στην ενότητα <head> (όχι στο <body>). Παρέχουν έλεγχο σε επίπεδο σελίδας. <meta name="robots" content="noindex, follow"> απαγορεύεται το indexing, επιτρέπεται το crawling <meta name="robots" content="index, nofollow"> επιτρέπεται το indexing, απαγορεύεται το crawling <meta name="robots" content="noindex, nofollow"> απαγορεύεται το indexing KAI το crawling <meta name="robots" content="index, follow"> επιτρέπονται το indexing KAI το crawling Κάποιες μηχανές αντιλαμβάνονται ως name τον User-agent τους: <meta name="googlebot" content="noindex"> το googlebot δεν θα κάνει indexing στη σελίδα άλλες μηχανές επιτρέπεται να κάνουν Υπάρχει δυνατότητα άμεσης υπόδειξης ενός site (home page) στο Google Index: Προϋποθέτει Google Account και login. Δεν παρέχεται εγγύηση ότι το googlebot θα επισκεφθεί τη σελίδα εξαρτάται και από το περιεχόμενο. Παρόμοιο μηχανισμό υπόδειξης έχουν και άλλες μηχανές αναζήτησης. Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -5- Προγραμματισμός Εφαρμογών Διαδικτύου

6 Προσθήκη Sitemap (1/2) Είναι ένα πρωτόκολλο μέσω του οποίου ενημερώνουμε τα συμβατά με αυτό bots (google, yahoo, bing) σχετικά με τις διαθέσιμες σελίδες για crawling στο site μας. Στην πράξη, είναι ένα XML αρχείο την ύπαρξη του οποίου ανακοινώνουμε στα bots δηλώνοντάς το στο αρχείο robots.txt. Για παράδειγμα γράφουμε: Sitemap: Περιεχόμενο sitemap: όπως στο ακόλουθο παράδειγμα. Μέσα στο root στοιχείο υπάρχουν ένα ή περισσότερα <url> στοιχεία. Κάθε ένα περιγράφει μια σελίδα (URL) και λέει το πώς θέλουμε να αντιμετωπιστεί από τα bots αυτή η σελίδα. <?xml version="1.0" encoding="utf-8"?> <urlset xmlns=" <url> <loc> <lastmod> </lastmod> <changefreq>monthly</changefreq> <priority>0.8</priority> </url> </urlset> Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -6- Προγραμματισμός Εφαρμογών Διαδικτύου

7 Προσθήκη Sitemap (2/2) Το στοιχείο <loc> είναι υποχρεωτικό και προσδιορίζει μια σελίδα. Τα υπόλοιπα στοιχεία (με πράσινο χρώμα) είναι προαιρετικά: <lastmod> Ημερομηνία τελευταίας τροποποίησης του αρχείου σε format ΥΥΥΥ-ΜΜ-DD <changefreq> Πόσο συχνά επιθυμούμε επίσκεψη από το bot. Αποτελεί υπόδειξη προς το bot και όχι εντολή! Δεν είναι σίγουρα ότι θα τηρήσει αυτό που ζητάμε. Επιτρεπτές τιμές: always, hourly, daily, weekly, monthly, yearly, never <priority> Τιμή μεταξύ 0 και 1 (εξ' ορισμού 0.5) που ορίζει τη σημασία της σελίδας για το site μας. Όσο μεγαλύτερη η τιμή τόσο σημαντικότερη θεωρούμε (και το λέμε στο bot) ότι είναι η σελίδα. Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -7- Προγραμματισμός Εφαρμογών Διαδικτύου

8 Περιεχόμενο Κυριότερο στοιχείο σε ένα site είναι αναμφισβήτητα το περιεχόμενο. Αν το site δεν έχει αξιόλογο ή χρήσιμο για τους χρήστες περιεχόμενο, τότε δύσκολα θα αποκτήσει επισκεψιμότητα, όσες τεχνικές SEO κι αν εφαρμόσουμε. Το καλό περιεχόμενο: προσελκύει χρήστες και αυτοί άλλους χρήστες γίνεται αιτία να φτιαχτούν σε άλλα sites, σύνδεσμοι προς το δικό μας site Αυτό είναι το βασικότερο ίσως χαρακτηριστικό του αλγόριθμου κατάταξης της Google, του Pagerank και βασίζεται στην παραδοχή ότι για να δείχνουν άλλα site προς στο site μας, αυτό θα πρέπει να είναι με κάποιο τρόπο σημαντικό, σημαντικότερα από άλλα με παρόμοιο σε επίπεδο λεξιλογίου περιεχόμενο αλλά χωρίς εξωτερικά links να δείχνουν σε αυτά. Η αισθητική του περιεχομένου είναι σημαντική. Το κείμενο πρέπει: να είναι ευανάγνωστο, να είναι ορθογραφικά και συντακτικά σωστό να φανερώνει σύντομα αυτό που διαπραγματεύεται ώστε ο χρήστης (πάντα βιαστικός!) να κρίνει γρήγορα αν τον ενδιαφέρει ή όχι αυτό που βλέπει σε δεύτερο επίπεδο μπορούμε να δώσουμε περισσότερο/αναλυτικότερο περιεχόμενο καθώς εκεί συνειδητά θα έχει επιλέξει να πάει ο χρήστης να είναι καλαίσθητο (όχι "φορτωμένες" σελίδες, όχι "παρδαλά", όχι παρωχημένα layouts) δύσκολα θα έχετε μοναδικό site μεταξύ site με παρόμοιο περιεχόμενο, οι χρήστες θα εκτιμήσουν περισσότερο το καλαίσθητο Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -8- Προγραμματισμός Εφαρμογών Διαδικτύου

9 Η ετικέτα <title> Βαρύτητα Περιεχομένου (1/4) Εκτός του ότι φαίνεται στον τίτλο του παραθύρου του browser (1) και στα Favorites (Αγαπημένα) (2), εμφανίζεται και στα αποτελέσματα αναζήτησης (3): (1) (2) (3) Συνιστώμενο μέγιστο μέγεθος τίτλου: 50 χαρακτήρες Η ετικέτα meta / keywords επιτρέπει να ορίσουμε keywords για τη σελίδα. <meta name="keywords" content="keyword1, keyword1, keyword2, κτλ"> Κάποιες μηχανές αναζήτησης τα αγνοούν (λόγω συνήθους κακόβουλης χρήσης) καθώς μπορούν και φτιάχνουν μόνες τους λεξιλόγιο από το κείμενο της σελίδας! Αποφεύγετε μεγάλο αριθμό keywords (μέχρι 20 είναι ok) Είναι σημαντικό τα keywords που χαρακτηρίζουν μια σελίδα, να περιέχονται με κάποιο τρόπο στο περιεχόμενο (κείμενο, κτλ) της σελίδας. Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -9- Προγραμματισμός Εφαρμογών Διαδικτύου

10 Βαρύτητα Περιεχομένου (2/4) Χρησιμοποιήστε το ακόλουθο meta για να περιγράψετε το περιεχόμενο κάθε σελίδας <meta name="description" content="this is my home page" /> Εμφανίζεται στα αποτελέσματα αναζήτησης της Google αλλά και στο facebook όταν γράφετε το URL της σελίδας. Μία ή δύο προτάσεις, ή μια μικρή παράγραφος που συνοψίζει αποτελεσματικά το περιεχόμενο της σελίδας είναι το καλύτερο! Ιδανικά, κάθε σελίδα καλό είναι να έχει δικό της meta description! Μη βάζετε ίδιο description/title/keywords σε σελίδες με διαφορετικό περιεχόμενο. Οι σελίδες σας θα φαίνονται ίδιες με βάση αυτά τα στοιχεία και κάποιες θα αγνοηθούν από τις μηχανές αναζήτησης (και ως επακόλουθο και από τους χρήστες). Αποφύγετε τα παρακάτω: Περιγραφές μη σχετικές με τη σελίδα ή γενικότητες τύπου "μια σελίδα για βιβλία". Το γέμισμα της αποκλειστικά με λέξεις κλειδιά. Το copy-paste εκεί μέσα όλου του περιεχομένου της σελίδας. Παράδειγμα καλής περιγραφής: Τα βιβλιοπωλεία ΑΒΓΔ είναι ο Νο1 προορισμός για ελληνικά & ξενόγλωσσα βιβλία, games και άλλα. Εκμεταλλευτείτε τις προσφορές μας όλο το χρόνο! Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -10- Προγραμματισμός Εφαρμογών Διαδικτύου

11 Βαρύτητα Περιεχομένου (3/4) Εικόνες Δώστε περιεκτικά ονόματα στα αρχεία εικόνων. Βάλτε τες κάτω από ένα φάκελο στο site σας. Χρησιμοποιήστε τις ιδιότητες alt και title σε ετικέτες img: Βάζουμε σωστές περιγραφές του τι απεικονίζεται σε μια εικόνα. Το κείμενο εμφανίζεται όταν το mouse σταματά πάνω σε αυτή. Πέρα από τους screen readers (των AMEA) εξυπηρετεί και ανάγκες SEO. Παραδείγματα όχι καλή τακτική: <img src="puppy.jpg" alt=""/> ναι σε εικόνες της διεπαφής - όχι σε εικόνες περιεχομένου κάπως καλό: <img src="puppy.jpg" alt="puppy"/> ιδανικό: <img src="puppy.jpg" alt="dalmatian puppy playing fetch"> αποφύγετε κάτι σαν το επόμενο: <img src="puppy.jpg" alt="puppy dog baby dog puppies doggies pups dog retriever labrador setter pointer puppy terrier puppies dog food cheap dogfood puppy food"/> Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -11- Προγραμματισμός Εφαρμογών Διαδικτύου

12 Βαρύτητα Περιεχομένου (4/4) Headings/Formatting: Οι μηχανές αναζήτησης δίνουν ιδιαίτερη βαρύτητα σε κείμενο που είναι μορφοποιημένο με τις ετικέτες επικεφαλίδας. Θεωρείται καλό: να υπάρχει μία ετικέτα <h1> ή <h2> με κατάλληλο κείμενο στο πάνω μέρος της σελίδας η χρήση των ετικετών strong και em σε λέξεις που αποτελούν keywords της σελίδα μας η σωστή χρήση των ετικετών: π.χ. <nav> για το block ενός menu αντί για <div> Το αρχικό μέρος των σελίδων είναι πιο σημαντικό για τις μηχανές αναζήτησης. Είναι καλό το κείμενο που χαρακτηρίζει τη σελίδα να είναι στο πάνω μέρος του αρχείου. Μερικές μηχανές αναζήτησης δεν εξετάζουν όλη τη σελίδα αλλά τα πρώτα Ν KBytes. Πώς μπορεί να γίνει αυτό όταν π.χ. στην αρχή υπάρχουν πολλά java scripts, CSS, κτλ; Μεταφορά των scripts σε include αρχεία ή αν γίνεται στο τέλος του αρχείου. Responsive Σχεδίαση: Διατάξεις σελίδων (layouts) που με κατάλληλο CSS προσαρμόζονται στα διάφορα μεγέθη οθονών ώστε το περιεχόμενο να είναι πάντοτε ευανάγνωστο και πρακτικό (χωρίς ανάγκη για εκτενές zoom, pan, οριζόντιο scroll). Δείτε τα βασικά εδώ: Μέσα στο 2015 η Google ανακοίνωσε πριμοδότηση στην κατάταξη για όσα sites είναι φιλικά σε μικρές συσκευές (tablets, smartphones). Άρα πλέον ΜΟΝΟ responsive! Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -12- Προγραμματισμός Εφαρμογών Διαδικτύου

13 Πλοήγηση Οργανώστε σωστά τις σελίδες σας: Η ιεραρχική οργάνωση είναι κατανοητή από όλους. Οργανώστε σχετικές μεταξύ τους σελίδες κάτω από μια άλλη σελίδα γονέα. Αποφύγετε όμως οργανώσεις μεγάλου βάθους. Το πόσο βαθιά σε σχέση με τη home page βρίσκεται μια σελίδα, λειτουργεί αρνητικά για τα bots μετά από κάποιο βάθος. Ένα τυπικό βάθος είναι το 3 ή 4. Αποφύγετε βαθύτερες οργανώσεις. Χρησιμοποιείστε λίστες breadcrumb ως στοιχείο ένδειξης τρέχουσας θέσης αλλά και πλοήγησης. Τα Web CMS παρέχουν έτοιμα τέτοια στοιχεία. π.χ.: ΤΕΙ >> Εκπαίδευση >> Σχολές Χρησιμοποιήστε sitemap όχι μόνο για τα bots αλλά και για τους χρήστες. Δώστε τους σελίδα περιεχομένων του site με ιεραρχική οργάνωση. Αποφύγετε συνδέσμους με JavaScript αντί για href. Επανακαθορίστε τις default σελίδες "προβλημάτων" ώστε να είναι στο ύφος του site. π.χ. αν δεν υπάρχει μια σελίδα ο server επιστρέφει την default σελίδα 404 βελτιώστε την αισθητικά ώστε να μοιάζει με το υπόλοιπο site, βάλτε συνδέσμους προς τη home, κτλ. στον Apache, στο αρχείο.htaccess βάζουμε: ErrorDocument 404 /notfound.html, κτλ Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -13- Προγραμματισμός Εφαρμογών Διαδικτύου

14 Σύνδεσμοι Προτιμήστε συνδέσμους με κείμενο. Το κείμενο πρέπει να είναι κατατοπιστικό ως προ το που οδηγεί ο σύνδεσμος. Πρόκειται για το κείμενο μεταξύ <a...> και </a>. Οι μηχανές αναζήτησης το αξιολογούν καλύτερα αν είναι αρκετά περιγραφικό σε σχέση με το που (σε τι σελίδα) οδηγεί. Για παράδειγμα, από τα 2 παρακάτω, προτιμούμε τον δεύτερο τρόπο: (1) Δείτε τις προδιαγραφές του Audi A8 εδώ. (2) Προδιαγραφές Audi A8. Παρόμοια μπορούμε να χρησιμοποιήσουμε την ιδιότητα title των συνδέσμων. Link Trading: είπαμε ότι οι σελίδες προς τις οποίες υπάρχουν πολλά link από άλλες, ξένες σελίδες, θεωρούνται σημαντικές από το Google σε αυτό το πλαίσιο μπορούμε να φροντίσουμε να υπάρχουν τέτοιες σελίδες με καταχωρήσεις σε forum και σε κοινωνικά δίκτυα με ανταλλαγή συνδέσμων (link exchange) με άλλα sites - βάζουμε στο site μας links προς αυτούς και αυτοί στο δικό τους links προς εμάς έτσι επωφελούμαστε και οι δύο Κοινωνικά Δίκτυα Η προώθηση site μέσω των κοινωνικών δικτύων (facebook, κτλ) είναι δημοφιλής διότι τα sites αυτών των υπηρεσιών είναι δημοφιλή στους χρήστες. Όπου υπάρχουν πολλοί χρήστες είναι καλό μέρος να προβληθεί κανείς! Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -14- Προγραμματισμός Εφαρμογών Διαδικτύου

15 Φιλικά URLs Όνομα (filename) Σελίδας: ονομάζουμε το αρχείο με βάση το περιεχόμενο της σελίδας. Τα σύγχρονα CMS το παρέχουν αυτόματα μέσω URL-rewrite τεχνικών. URL-rewrite: Δημιουργία ψευδοδιευθύνσεων που είναι αναγνώσιμες από άνθρωπο: π.χ. big_earthquake_in_japan.php αντί για page.php?pageid=3452 Προφανώς γίνεται με κάποιο μηχανισμό αντιστοίχησης μεταξύ των δύο. Έτοιμους τέτοιους μηχανισμούς παρέχουν όλα τα σύγχρονα web CMS (WordPress, Joomla, Drupal, κτλ) σε συνεργασία με τους web servers. Black Hat SEO Προσπάθεια βελτίωσης κατάταξης με μη-ηθικό τρόπο, όπως: χρήση πολλών δημοφιλών keyword αναζήτησης ασχέτως περιεχομένου σελίδας μη ορατό κείμενο (hidden, σε html σχόλια, ίδιου χρώματος με το φόντο, κτλ) με δημοφιλές θέμα αλλά άσχετο με το θέμα της σελίδας δημιουργία τεχνιτών σελίδων (doorway pages - απευθύνονται στις μηχανές αναζήτησης, όχι σε χρήστες) που δείχνουν σε σελίδες των οποίων θέλουμε να βελτιώσουμε την κατάταξη για επιθυμητά search keywords γενικά, η "εκμετάλλευση" σε κάτι που λαμβάνουν υπόψη οι μηχανές αναζήτησης Αν γίνει αντιληπτό από τις μηχανές αναζήτησης, πιθανότατα η υπό συζήτηση σελίδα/site να μπει σε "μαύρη λίστα" και οι μηχανές αναζήτησης να την αγνοούν! Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -15- Προγραμματισμός Εφαρμογών Διαδικτύου

16 Επίλογος Η βελτιστοποίηση ιστοχώρων βάσει κανόνων SEO και η προώθηση site με πολύπλευρο τρόπο (κοινωνικά δίκτυα, web διαφήμιση, κτλ) είναι πολύ δημοφιλής αλλά αποτελεί και σημαντικό επαγγελματικό εφόδιο. Δεν αρκεί όμως να βρίσκουν οι χρήστες το site! πρέπει να παραμένουν πρέπει να ξαναέρθουν Αν το site σας......δεν έχει ενδιαφέρον περιεχόμενο ή δεν καλύπτει κάποια δεδομένη ανάγκη...δεν είναι ελκυστικό στην εμφάνιση και εύχρηστο στη χρήση...τότε οι τεχνικές SEO δεν επαρκούν για να γίνει ή να παραμείνει δημοφιλές! Χρησιμοποιείστε τα σωστά εργαλεία Λογισμικά που κάνουν SEO ανάλυση στο site σας. Google webmaster tools: Google Analytics: Κοινωνικά Δίκτυα Φώτης Κόκκορας / ΤΕΙ Θεσσαλίας -16- Προγραμματισμός Εφαρμογών Διαδικτύου