Πώς να οικοδομήσουμε αποτελεσματικές 404 σελίδες σφάλματος στο WordPress

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

Ο γνωστός εμπειρογνώμονας WordPress SEO Joost de Valk (γνωστός και ως yoast) αναφέρει τα πρόσφατα ευρήματά του από πολλά χρόνια ιστοτόπων SEO SEO. Σύμφωνα με αυτήν την έκθεση, ένας σημαντικός αριθμός ιστοτόπων που ελέγχθηκαν είχε προβλήματα με τη βελτιστοποίηση της σελίδας σφάλματος 404. Το προεπιλεγμένο θέμα WordPress (επί του παρόντος TwentyTwelve) έχει ένα πολύ βασικό πρότυπο για αυτήν την περίπτωση και όχι τόσο πολλοί ιδιοκτήτες ιστοτόπων υπερβαίνουν αυτό.

Γιατί είναι σημαντικό?

Ας δούμε αυτό από την άποψη της κοινής λογικής. Πότε εμφανίζεται ένα σφάλμα 404; Όταν κάποιος κάνει κλικ σε έναν σύνδεσμο που θα πρέπει να δείχνει στο περιεχόμενο του ιστότοπού σας, αλλά για οποιονδήποτε λόγο δεν υπάρχει αντίστοιχη σελίδα: ίσως έχετε αλλάξει μια μόνιμη σελίδα ή έχετε αφαιρέσει τη σελίδα, ίσως έχετε αλλάξει τις ετικέτες ή την κατηγορία γυμνοσάλιαγκας, ίσως ο σύνδεσμος ήταν απλά λάθος. Υπάρχουν κάποιες αιτίες για το σφάλμα, αλλά δεν μπορεί να αμφισβητηθεί ένα σημαντικό γεγονός: ο επισκέπτης είναι ήδη στον ιστότοπό σας, έχει ήδη ενδιαφέρον για κάτι, έχει ήδη καταβάλει προσπάθεια να το βρει, γι 'αυτό η προσπάθεια θα πρέπει να ανταμείβεται.

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

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

Τα σήματα χρησιμοποιήστε την επιπλέον ευκαιρία για να παρουσιάσετε τα προϊόντα τους και παρέχει πληροφορίες επικοινωνίας για την επίλυση του προβλήματος.

Zurb Η σελίδα σφάλματος 404 υπογραμμίζει την επιλογή επαφής με ένα πρόβλημα. Οι σχεδιαστές θα πρέπει να λύσουν προβλήματα, έτσι;

 Problogger παρουσιάζει ένα ευρύ φάσμα διαφορετικού περιεχομένου για να βουτήξετε στην ανάγνωση.

Τζούντιν Ταντόκ 's Blog χρησιμοποιεί breadcrumbs για να παρουσιάσει έναν σύνδεσμο αρχικής σελίδας.

Δημιουργία προσαρμοσμένης σελίδας σφάλματος 404 στο WordPress

Τι μπορεί να γίνει για να βελτιωθεί αυτή η κατάσταση; Πώς μπορεί να μετατραπεί το λάθος σε ευκαιρία;

Σε αναζήτηση ιδεών και οδηγιών, μπορούμε να συμβουλευτούμε τους κώδικες WordPress Codex ή τις Οδηγίες για Webmasters της Google ως τέλειες αφετηρίες. Στην πραγματικότητα, ο κύριος στόχος μας είναι πολύ απλός: εξηγήστε γιατί μια σελίδα δεν μπορεί να εντοπιστεί και να προσφέρει προτάσεις για να φτάσετε στη σωστή οθόνη. Από αυτή την άποψη, μπορούμε να αντλήσουμε μια λίστα με πιθανά στοιχεία που δημιουργούν μια "τέλεια" σελίδα σφάλματος 404:

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

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

• πρόσφατες και / ή δημοφιλείς αναρτήσεις, ή εναλλακτικά τυχαίες αναρτήσεις.
• επιλογές συνδρομής (όπως RSS) εκτός από τα στοιχεία επικοινωνίας.
• sitemap, ειδικά στην περίπτωση μικρών χώρων.
• προσφορές ή πληροφορίες σχετικά με τις προσφορές και τις υπηρεσίες σας.
• υλικά επωνυμίας για να αναγνωρίσετε εύκολα τον ιστότοπό σας και τη βιομηχανία σας.
• πληροφορίες σχετικά με τη ζητούμενη διεύθυνση URL και το πιο σχετικό περιεχόμενο.
• tagcloud ως έναν γρήγορο τρόπο για να τοποθετήσετε τον επισκέπτη στο πλαίσιο του ιστότοπού σας.
• ένα σύστημα ειδοποίησης και / ή παρακολούθησης για να γνωρίζετε τυχόν σφάλματα 404 στον ιστότοπό σας.

Ένα σημαντικό πράγμα για μια σελίδα σφάλματος 404 είναι μια σωστή κατάσταση HTTP 404 που θα πρέπει να εξυπηρετείται από το διακομιστή. Ευτυχώς, το WordPress χειρίζεται αυτό για εμάς αυτόματα, ώστε να μπορέσουμε να εστιάσουμε τις προσπάθειές μας στη δημιουργία της ίδιας της σελίδας. Χρειαζόμαστε το ενεργό θέμα για να έχουμε ένα ξεχωριστό πρότυπο για τη σελίδα που ονομάζεται 404.php. Η δομή των γυμνών οστών του προτύπου είναι αρκετά απλή:

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

Τώρα, όταν έχουμε κάνει τις αρχικές προετοιμασίες, ας συμπληρώσουμε τη σελίδα. Το καλύτερο που θα μπορούσαμε να κάνουμε για τον επισκέπτη στη σελίδα 404 είναι να μαντέψουμε τι ζητήσαμε και να προσφέρουμε τον πλησιέστερο δυνατό αγώνα. Οι πληροφορίες σχετικά με την απαιτούμενη διεύθυνση URL αποθηκεύονται από το WordPress στην ιδιότητα $ wp-> request . Μπορούμε να αναλύσουμε αυτήν τη συμβολοσειρά και να προσπαθήσουμε να βρούμε ένα παρόμοιο περιεχόμενο με βάση τα δεδομένα post_name , τα οποία αποθηκεύουν πληροφορίες σχετικά με τις μεταγλωττιστές μηνυμάτων και σελίδων. Αν μια τέτοια αναζήτηση δεν επιστρέψει κάτι που να έχει νόημα, μπορούμε να δοκιμάσουμε τακτική αναζήτηση μέσω περιεχομένου μετά. Εάν αυτές οι προσπάθειες δεν παράγουν θετικά αποτελέσματα, μπορούμε πάντα να παρέχουμε έναν κατάλογο των πρόσφατων αναρτήσεων ως εναλλακτική λύση.

Φυσικά, συμπεριλαμβάνουμε επίσης το φιλικό μήνυμα, τη φόρμα αναζήτησης και έναν σύνδεσμο προς την αρχική σελίδα.

Πρώτα πρόκειται να δημιουργήσουμε ορισμένες βοηθητικές λειτουργίες για να χειριστούμε ορισμένες ρουτίνες προτύπων. θα μπορούσαν να συμπεριληφθούν στο functions.php του θέματος ή απευθείας στην αρχή του αρχείου 404.php.

function frl_get_requested_slug(){global $wp;$q = $wp->request;$q = preg_replace("/(.*)(html|htm|php|asp|aspx)$/","",$q);$parts = explode('/', $q);$q = end($parts);return $q;}

Η λειτουργία frl_get_requested_slug προσπαθεί να αποκτήσει την απαιτούμενη σίγαση σελίδας χρησιμοποιώντας το γενικό αντικείμενο $ wp και τις κανονικές εκφράσεις. Ο κώδικας προϋποθέτει ότι ο ιστότοπος χρησιμοποιεί permalinks και το αίτημα πηγαίνει στην κατάλληλη μορφή.

function frl_list_posts($posts){if(empty($posts))return '';$list = array();foreach($posts as $cpost) {$title = apply_filters('the_title', $cpost->post_title);$url = get_permalink($cpost);$list[] = "

Το frl_load_error_style φορτώνει προσαρμοσμένα στυλ με το πρότυπο 404, υποθέτοντας ότι το κατάλληλο αρχείο .css βρίσκεται στο φάκελο / css μέσα στον κατάλογο του ενεργού θέματος.

Ο κώδικας του προτύπου όπως προγραμματίσαμε περιλαμβάνει τέσσερα μέρη: το φιλικό μήνυμα. η αναζήτηση; τη λίστα πρόσφατων αναρτήσεων. η τελευταία ευκαιρία.

Το φιλικό μήνυμα:

  404 Η σελίδα δεν βρέθηκε 
  Δυστυχώς, δυστυχώς, δεν βρήκαμε τη ζητούμενη σελίδα. 
  Ας βρούμε τις πληροφορίες που χρειάζεστε. 

Η αναζήτηση για το ζητούμενο περιεχόμενο:

  'any', 'post_status' => 'δημοσίευση', 'όνομα' => $ q, 'posts_per_page' => 5); $ query = new WP_Query ($ args);  // ερωτήματα αναρτήσεων από slugif (κενές ($ query-> posts)) {// αναζήτηση για θέσεις $ q = str_replace ('-', '', $ q); $ args = array ('post_type' => ',' post_status '=>' δημοσίευση ',' s '=> $ q,' posts_per_page '=> 5); $ query-> query ($ args); :?> 
  Ψάξατε για μία από τις παρακάτω σελίδες; 
  μηνύματα);?> 

Πρώτα απ 'όλα, εκτελούμε ένα ερώτημα WordPress με μια αρχική δέσμη επιχειρημάτων που αναζητά το απαιτούμενο σκουλήκι σε ένα πεδίο ονόματος / θέσης σελίδας. Εάν δεν έχουμε αποτελέσματα μετά από αυτό, αντικαθιστούμε τις παύλες στην απαιτούμενη συμβολοσειρά με διαστήματα και εκτελούμε ένα άλλο ερώτημα που αναζητά τις απαιτούμενες λέξεις στο περιεχόμενο μηνυμάτων / σελίδων. Εάν έχουμε λάβει κάποια αποτελέσματα, τότε τα εξάγουμε με τη βοήθεια της προηγουμένως δημιουργούμενης συνάρτησης frl_list_posts .

Λίστα πρόσφατων αναρτήσεων:

  'post', 'post_status' => 'δημοσίευση', 'posts_per_page' => 5); $ query-> query ($ args) 
  Γιατί να μην ρίξετε μια ματιά στις πιο πρόσφατες αναρτήσεις; 
  μηνύματα);?> 

Σε αυτό το μέρος πραγματοποιούμε ένα ερώτημα για τις 5 πιο πρόσφατες αναρτήσεις στο ιστολόγιο και τις εκτυπώνουμε με τον ίδιο τρόπο όπως προηγουμένως.

Η τελευταία ευκαιρία:

  Δεν είναι καλό; 
  Χρησιμοποιήστε τη φόρμα αναζήτησης για να δοκιμάσετε ξανά ή να ξεκινήσετε την περιήγηση από την αρχική σελίδα   . 
  . Εάν χρειάζεστε περαιτέρω βοήθεια παρακαλούμε μην διστάσετε να επικοινωνήσετε με την [email protected] . 

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

Αποτροπή 404 σφαλμάτων στον ιστότοπό σας

Φαίνεται ότι κάναμε το καλύτερο δυνατό για να βοηθήσουμε τον επισκέπτη στη σελίδα σφάλματος 404. Στην πραγματικότητα, η καλύτερη βοήθεια είναι να αποφευχθεί η χρήση της σελίδας 404. Συγκεκριμένα, μπορούμε:

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

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

Τι έχετε στη σελίδα 404 σας; Τι θεωρείτε χρήσιμο όταν συναντάτε 404 σελίδες; Ενημερώστε μας στα σχόλια.

Προτεινόμενη εικόνα / μικρογραφία, χαμένη εικόνα μέσω Shutterstock.