Φιλικά προς τις μηχανές αναζήτησης URL (Tutorial)

13 Δεκ 2010 | Marketing & SEO

Δεν επιτρέπονται τα σχόλια.


Θα έχει τύχει να παρατηρήσετε την διεύθυνση μερικών ιστοσελίδων που αντί για μια ακαταλαβίστικη σειρά χαρακτήρων μετά το βασικό domain έχουν κάποιες λέξεις που χαρακτηρίζουν μοναδικά την κάθε σελίδα.

Πάρτε για παράδειγμα τη σελίδα που βλέπετε τώρα. Η σελίδα αυτή μετά το βασικό domain έχει τα ακόλουθα :

archives/search-engine-friendly-urls-tutorial

Το παραπάνω θα μπορούσε να είναι της μορφής ?p=1893 με αποτέλεσμα να είναι ποιο δύσκολο για τον τελικό χρήστη να θυμάται τη διεύθυνση αυτής της σελίδας. Επίσης άλλο ένα χαρακτηριστικό αυτών των URL είναι που κάνουν τη σελίδα σας ποιο φιλική προς τις μηχανές αναζήτησης, γιατί μπορούν να περιέχουν λέξεις κλειδιά για το άρθρο σας.

Εισαγωγή

Σε αυτό το Tutorial θα δούμε πως θα δημιουργήσουμε SEF URLs για το site μας. Οι τεχνικές που χρησιμοποιούνται εδώ απευθύνονται σε προγραμματιστές που κατασκευάζουν προσαρμοσμένες εφαρμογές διαδικτύου, και όχι για αυτούς που χρησιμοποιούν εργαλεία όπως είναι το Joomla, WordPress, Drupal, κ.α. ή που χρησιμοποιούν Frameworks όπως είναι το ZendFramework, το CakePHP, το CodeIgniter κ.α. γιατί αυτά διαθέτουν ήδη ενσωματωμένες τεχνικές για τη δημιουργία φιλικών URL.

Η δημιουργία SEF URLs έχει να κάνει σχεδόν με όλα τα τμήματα μιας εφαρμογής και για αυτό θα πρέπει να προβλεφθεί από την ανάλυση κιόλας της εφαρμογής για να μπορέσει να ενσωματωθεί στην καρδιά της εφαρμογής σας έτσι ώστε να είναι διαθέσιμα όπου τα χρειάζεστε.

Βάση δεδομένων

Ας κάνουμε την αρχή με τη βάση δεδομένων.  Γιατί αρχίζουμε από τη βάση δεδομένων; Τα SEF URLs θα πρέπει να αποθηκεύονται στη βάση δεδομένων και έτσι θα πρέπει να προβλέψετε σε κάθε πίνακα που θα έχει περιεχόμενο για προβολή (πχ. άρθρα, σελίδες, προϊόντα) να υπάρχει ένα πεδίο για το URL KEY που θέλετε για κάθε οντότητα ξεχωριστά.

Αυτό το πεδίο μπορείτε στη συνέχεια μέσα από την εφαρμογή σας να το συμπληρώσετε με διάφορους τρόπους. Ένας από αυτούς τους τρόπους είναι να επιτρέψετε στον τελικό χρήστη να το συμπληρώσει μόνος του, ακόμα ένας τρόπος είναι αυτός του WordPress που αντικαθιστά τα κενά και τα ειδικά σύμβολα του τίτλου ενός άρθρου ή σελίδας με παύλες και δημιουργεί αυτόματα ένα τίτλο που στη συνέχεια αν θέλει ο τελικός χρήστη μπορεί να το αλλάξει και να το προσαρμόσει ανάλογα.

Έτσι για παράδειγμα, αν θέλουμε να δημιουργήσουμε ένα πίνακα για να αποθηκεύσουμε άρθρα ο πίνακας στη βάση δεδομένων θα μπορούσε να είναι κάπως έτσι :

id
title
meta_description
meta_keywords
content
url_key
created
modified
user_id

Αφού δημιουργήσετε τους πίνακες στη βάση δεδομένων σας τώρα είστε έτοιμοι να δημιουργήσετε την εφαρμογή σας.

Εφαρμογή

Η εφαρμογή σας είναι το κομμάτι αυτό που θα αναλάβει να γράψει τα φιλικά προς τις μηχανές αναζήτησης URL, και να τα αναγνωρίσει στη συνέχεια για να επιστρέψει το περιεχόμενο που αντιστοιχεί στο δεδομένο URL Key.

Αρχικά ας δούμε πως η εφαρμογή μας θα δημιουργήσει τα SEF URLs.

Ο τρόπος που θα γράψουμε τα SEF URLs έχει να κάνει με πολλούς παράγοντες. Μερικοί από τους παράγοντες που παίζουν ρόλο για την τελική μορφή ενός URL είναι οι ακόλουθοι:

  • Σε τι περιεχόμενο απευθύνετε το URL και από ποιο αρχείο θα πραγματοποιηθεί η επεξεργασία
  • Τι παραμέτρους θέλουμε να περάσουμε στο αρχείο που θα επεξεργαστεί το ερώτημα
  • Η μορφή που θέλουμε να έχει το URL μας.

Η λίστα μπορεί να μεγαλώσει κι άλλο, ανάλογα με την εφαρμογή και τις απαιτήσεις που έχει. Ας ρίξουμε στους παράγοντες που αναφέραμε παραπάνω.

Τύπος περιεχομένου και αρχείο επεξεργασίας

Ο τύπος του περιεχομένου θα μπορούσε για παράδειγμα να είναι  άρθρο, προϊόν ή σελίδα και έτσι να καθορίσουμε από ποιο αρχείο θα γίνει η επεξεργασία. Βέβαια το αρχείο επεξεργασία δεν είναι απαραίτητο να είναι κοινό με τον τύπο του άρθρου. Θα μπορούσε για παράδειγμα η επεξεργασία του άρθρου να γίνει από ένα τυπικό αρχείο που απλά θα δεχόταν μια παράμετρο με τον τύπο του περιεχομένου και έτσι να προβάλει το αντίστοιχο περιεχόμενο στο ίδιο αρχείο. Έτσι για παράδειγμα τα ακόλουθα URL δίχνουν τον διαφορετικό τύπου άρθρου:

  • www.mysite.ext/products/my-product
  • www.mysite.ext/pages/about-us
  • www.mysite.ext/articles/latest-news

Από τα παραπάνω URL προκύπτει ότι το πρώτο URL απευθύνετε σε προϊόντα, το δεύτερο σε μια σελίδα και το τρίτο σε ένα άρθρο. Τώρα από τη μεριά της PHP θα μπορούσαμε να έχουμε το αρχείο products.php, το αρχείο pages.php και το αρχείο articles.php ή εναλλακτικά το αρχείο content.php που θα είχε την κατάλληλη υποδομή για να διαχειριστεί και τους τρις διαφορετικούς περιεχομένων.

Παράμετροι που θέλουμε να περάσουμε στο αρχείο επεξεργασίας

Αυτός είναι ακόμα ένας παράγοντας που μπορεί να επηρεάσει τη μορφή ενός URL. Μέσα σε αυτές τις παραμέτρους είναι σίγουρα το URL Key, αλλά πέρα από το URL Key θα μπορούσαν να είναι και παράμετροι ταξινόμησης δεδομένων (αύξουσα, φθίνουσα), παράμετροι εγγραφών ανά σελίδα και άλλα πολλά. Έτσι ένα URL θα μπορούσε να έχει την ακόλουθη μορφή :

  • www.mysite.ext/articles/latest
  • www.mysite.ext/articles/latest/asc
  • www.mysite.ext/articles/latest/asc/15

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

Μορφή που θέλουμε για το URL

Τελευταίος παράγοντας είναι η μορφή που θέλουμε να δώσουμε στο URL μας, στις παραμέτρους μας και στη σειρά που αυτές περνάνε στο σύστημα μας. Έτσι τα ακόλουθα URL θα μπορούσαν να απευθύνονται όλα στο ίδιο ακριβώς περιεχόμενο.

  • www.mysite.ext/articles/my-first-article/asc/10
  • www.mysite.ext/articles/my_first_article/asc/10
  • www.mysite.ext/articles/my-first-article/10/asc
  • www.mysite.ext/articles/asc/15/my-first-article
  • www.mysite.ext/articles/my|first|article/asc/15

Έτσι θα μπορούσαμε να έχουμε κάθε πιθανό συνδυασμό για τα URL μας, εμείς αυτό που έχουμε να κάνουμε είναι απλά αποφασίσουμε ποιο από τα URL ταιριάζει καλύτερα στο site μας και να το υλοποιήσουμε.

Για το παράδειγμα μας σε αυτό το Tutorial θα χρησιμοποιήσουμε μόνο ένα αρχείο και μόνο ένα τύπο περιεχομένου για να απλοποιήσουμε τα πράγματα. Έτσι θα έχουμε τον τύπο περιεχομένου articles και η διαχείριση θα πραγματοποιείτε από το αρχείο articles.php. Επίσης τα URL μας θα μοιάζουν κάπως έτσι :

www.mysite.ext/articles/article-url-key

Λίστα με τα άρθα μας

Στη σελίδα που θα εμφανίζουμε όλα θα άρθρα μας σε λίστα, θα πρέπει να δημιουργήσουμε τα link προς αυτά με τη μορφή που έχουμε αποφασίσει. Έτσι μέσα στο βρόγχο while θα πρέπει να δημιουργήσουμε τα link κάπως έτσι

while ($db_field = mysql_fetch_assoc($result))
{
     echo '<a href="www.mysite.ext/articles/' . $db_field['URL_KEY'] . '">' . $db_field['Page title'] . '</a>';
     ......
}

Έτσι με τον παραπάνω κώδικα θα έχουμε τα URL στη μορφή που θέλουμε. Αυτό που μένει τώρα είναι να προετοιμάσουμε το αρχείο articles.php να μπορεί να δεχτεί το τα ερωτήματα σε μορφή GET μέσω του URL.

Αρχείο articles.php

Μέχρι τώρα αυτό που έχουμε καταφέρει να κάνουμε είναι να δημιουργήσουμε το πεδίο για το URL Key στη βάση δεδομένων και έχουμε πει και στην PHP να μας γράφει τα URL στη μορφή που επιθυμούμε. Το επόμενο βήμα είναι να πούμε στην PHP πως να μεταφράζει το URL Key και να κάνει ανάκτηση του συγκεκριμένου άρθρου από τη βάση δεδομένων.

Τα URL που μας παράγει τώρα η PHP είναι της μορφής www.mysite.ext/articles/some-article-url-key αλλά στην πραγματικότητα αυτή η διεύθυνση δεν υπάρχει και έτσι αν προσπαθήσουμε να την ανακτήσουμε θα πάρουμε ένα σφάλμα 404. Από την άλλη όμως έχουμε δημιουργήσει το αρχείο articles.php που είναι υπεύθυνο για την ανάκτηση του συγκεκριμένου άρθρο κάθε φορά.

Αυτό που θα κάνουμε τώρα θα είναι να προετοιμάσουμε το articles.php να παίρνει παραμέτρους GET. Στο παράδειγμα μας, και για να κάνουμε τα πράγματα ποιο απλά θα το κάνουμε να παίρνει μόνο το URL Key. Έτσι το articles.php θα πρέπει να το καλούμε κάπως έτσι :

www.mysite.ext/articles.php?urlkey=some-article-url-key

και μέσα στο articles.php θα πρέπει να είναι κάπως έτσι :

<?php

$url_key = $_GET['urlkey'];

$qr = "SELECT * FROM articles WHERE articles_url_key = '" . $url_key . "'";

?>
........

Έτσι το articles.php θα μπορεί να δεχτεί σαν παράμετρο το URL Key και στη συνέχεια να κάνει αναζήτηση στη βάση δεδομένων με αυτό για να εντοπίσει το συγκεκριμένο αρχείο.

Server

Τέλος αυτό που μας έχει μείνει για να ολοκληρώσουμε τα SEF URLs είναι να πούμε στο Server να μεταφράζει τα URL από τη μια μορφή στην άλλη. Αυτή η διαδικασία είναι λίγο δυσνόητη επειδή απαιτεί γνώση των Regular Expressions. Τα Regular Expressions είναι ένας τρόπος να εντοπίζετε μοτίβα χαρακτήρων μέσα σε σειρές κειμένων ή/και σε σώματα  κειμένων.

Τα βασικά των Regular Expressions

Στους υπολογιστές, τα Regular expressions, που επίσης αποκαλούνται και regex ή regexp παρέχουν ένα σύντομο και ευέλικτο τρόπο για τον εντοπισμό μοτίβων μέσα σε σώματα κειμένων, όπως για παράδειγμα συγκεκριμένους χαρακτήρες, λέξεις, ή συνδυασμούς χαρακτήρων. Τα Regular Expressions γράφονται σε μια τυποποιημένη γλώσσα η οποία μπορεί να μεταφραστεί από ένα επεξεργαστή για Regular Expressions.
Πηγή : Wikipedia

Ακολουθεί μια λίστα με κλάσεις ειδικών χαρακτήρων για μια πρώτη ματιά.

\ : Χαρακτήρας διαφυγής. Τον χρησιμοποιούμε όταν θέλουμε να εντοπίσουμε σύμβολα που είναι ειδικοί χαρακτήρες

. : Την τελεία την χρησιμοποιούμε για να εντοπίσουμε κάθε είδους χαρακτήρα εκτός του χαρακτήρα νέας γραμμής

x : Εντοπίζει κάθε στιγμιότυπο του χαρακτήρα x

^x : Εντοπίζει κάθε χαρακτήρα εκτός του x

[x] : Εντοπίζει κάθε χαρακτήρα που είναι μέσα στις αγκύλες – [adfpq] εντοπίζει κάθε στιγμιότυπο των a, d, f, p και q

| : Τελεστής OR – [a|g] εντοπίζει κάθε στιγμιότυπο του a ή του g

() : Χρησιμοποιείτε για να ομαδοποιήσει ακολουθίες χαρακτήρων ή αποτελεσμάτων. Επίσης στον Apache αυτό δημιουργεί και μια μεταβλητή της μορφής $1 με αριθμούς από 1 μέχρι 9. Έτσι αν σε ένα regular expression έχουμε δυο παρενθέσεις, αυτόματα θα έχουμε και δυο μεταβλητές της μορφής $1 και $2 όπου μπορούμε να της χρησιμοποιήσουμε μέσα στο ίδιο regular expression.

{} : Το χρησιμοποιούμε για να περιορίσουμε το πλήθος των χαρακτήρων που αναζητούμε.

{x} : Το αποτέλεσμα θα πρέπει να έχει μήκος ακριβός x χαρακτήρες.

{x,} : Το αποτέλεσμα θα πρέπει να έχει τουλάχιστον x χαρακτήρες

{x,y} : Το αποτέλεσμα θα πρέπει να έχει τουλάχιστον x χαρακτήρες αλλά όχι περισσότερους από y

? : Το προηγούμενο ταίριασμα είναι προαιρετικό ή θα πρέπει να εμφανίζετε μόνο μια φορά. Ισοδύναμο με το {0,1}

* : Εντοπίζει 0 ή και περισσότερους χαρακτήρες από το προηγούμενο ταίριασμα. Ισοδύναμο με το {0,}

+ : Εντοπίζει 1 ή και περισσότερους χαρακτήρες από το προηγούμενο ταίριασμα. Ισοδύναμο με το {1,}

^ : Εντοπίζει την αρχή κάθε γραμμής.

$ : Εντοπίζει το τέλος κάθε γραμμής.

Παραδείγματα :

Διευθύνσεις IP : ([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})\.([0-9]{1,3})
Domain names : ^[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(\.[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)?$
Διευθύνσεις email : {^[A-Za-z0-9._-]+@[[A-Za-z0-9.-]+$}
Δεκαεξαδική απόχρωση (πχ. #AF0FA3 ή #A0F) : ^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$

.htaccess

Το τελευταίο βήμα είναι το .htaccess. Μέσα σε αυτό θα δώσουμε τις κατάλληλες εντολές για να μετατρέψουμε το SEF URL σε URL που η εφαρμογή μας μπορεί να διαχειριστεί.

Αρχικά θα πρέπει να ενεργοποιήσουμε το mod_rewrite ρητά, γιατί μπορεί να μην είναι αυτόματα ενεργοποιημένο από το Server. Αυτό θα το κάνουμε με την εντολή :

RewriteEngine on

Το επόμενο βήμα είναι να πούμε στον Apache να μετατρέψει το SEF URL σε URL που το σύστημα κατανοεί με την εντολή RewriteRule.

Η εντολή RewriteRule δέχεται τρία ορίσματα. Το πρώτο όρισμα είναι το Regular Expression που θα εντοπίσει τη μορφή του URL που θέλουμε να επεξεργαστούμε, το δεύτερο όρισμα είναι το αρχείο το οποίο θα επεξεργαστεί το SEF URL και το τρίτο όρισμα είναι προαιρετικό και δέχεται διάφορα Flags για επεξεργασία του Rewrite. Έτσι το RewriteRule θα πρέπει να μοιάζει κάπως έτσι :

RewriteRule RegularExpression FileToRedirect.ext Flags

Σε αυτό το σημείο θα πρέπει να δημιουργήσουμε το Regular Expression για το URL μας.

URL Regular Expression

Από την αρχή της σχεδίασης της εφαρμογής μας υποθέσαμε πως το URL μας θα έχει την ακόλουθη μορφή :

articles/some-article-url-key-with-characters-and-nombers-33

Για το παραπάνω URL λοιπόν θα γράψουμε το ακόλουθο Regular Expression :

^articles/([a-zA-Z0-9\-]*)$

Ας το αναλύσουμε τώρα. Το Regular Expression αρχίζει με το σύμβολο ^ και την λέξη articles ενωμένα. Αυτό λέει στον Apache πως θα πρέπει να δώσει προσοχή σε κάθε URL που αρχίζει με τη λέξη articles.

Στη συνέχεια έχουμε δημιουργήσει ένα ζευγάρι παρενθέσεων. Όπως αναφέραμε και προηγουμένως οι παρενθέσεις δημιουργούν αυτόματα μια μεταβλητή με το όρισμα που βρέθηκε στη θέση αυτή και την αποθηκεύει στη μεταβλητή με όνομα $x όπου x είναι ένας αριθμός από ένα μέχρι εννέα.

Μέσα στις παρενθέσεις του έχουμε δημιουργήσει ένα ζευγάρι από αγκύλες και του λέμε να μας εντοπίσει όλους τους χαρακτήρες από a έως z, από A έως Z, όλους τους αριθμούς από 0 έως 9 και όλες τις παύλες. Έτσι το παραπάνω θα εντοπίσει κάθε συνδυασμό από λατινικούς χαρακτήρες, πεζούς και κεφαλαίους, αριθμούς και παύλες.

Τέλος το Regular Expression τελειώνει με ένα σύμβολο δολαρίου. Το σύμβολο δολαρίου μας υποχρεώνει να μην έχουμε κανένα άλλο χαρακτήρα μετά την παρένθεση. Για παράδειγμα το articles/some-url-here.html θα δημιουργούσε ένα σφάλμα 404 γιατί αυτό το URL δεν ταιριάζει με Regular Expression.

RewriteRule

Τέλος το RewriteRule μας θα πρέπει να μοιάζει κάπως έτσι :

RewriteRule ^articles/([a-zA-Z0-9\-])$ articles.php?urlkey=$1

Στην παραπάνω εντολή το $1 που είναι η τιμή για το urlkey είναι ότι έχει εντοπίσει το RegularExpression μέσα στην παρένθεση.

Η τελική μορφή του .htaccess αρχείου σας θα πρέπει να είναι αυτή :

RewriteEngine on
RewriteRule ^articles/([a-zA-Z0-9\-])$ articles.php?urlkey=$1

Περισσότερα για τον CorfuGmr

CorfuGmr

Ονομάζομαι Νίκος και ασχολούμαι με το internet και την κατασκευή ιστοσελίδων από το 1998. Σήμερα, μετά από 12 χρόνια γεμάτα με ενημέρωση, εκπαίδευση και εξάσκηση έχω ανεβάσει σε ένα άλλο επίπεδο τις γνώσεις μου και τις τεχνικές μου. Στα άρθρα μου προσπαθώ να σας δείξω τα μικρά, αλλά σημαντικά πράγματα που με έχουν ανεβάσει σε αυτό το επίπεδο.








Σχόλια



13 Δεκεμβρίου 2010

[…] This post was mentioned on Twitter by Web Resoures.eu, Web Resoures.eu. Web Resoures.eu said: Φιλικά προς τις μηχανές URL (Tutorial): Θα έχει τύχει να παρατηρήσετε την διεύθυνση μερικών… http://goo.gl/fb/wdroK […]


Συγνώμη, τα σχόλια για αυτό το άρθρο είναι κλειστά.



^
Top
css.php