Χρήση Chrome DevTools για αντιμετώπιση προβλημάτων - Semalt Prompts



Το Chrome DevTools δεν είναι κάτι που είναι ξένο για τους περισσότερους επαγγελματίες SEO. Από την άλλη πλευρά, για τους υπαλλήλους, μπορεί να είναι ένα από αυτά τα πράγματα που δεν έχετε ακόμη μάθει. Λοιπόν, στο Semalt, μέρος της διαδικασίας μας στην εξυπηρέτηση των αναγκών SEO του πελάτη μας βασίζεται στον τρόπο μας να σας εκπαιδεύσουμε σχετικά με τις απαραίτητες πτυχές του τι χρειάζεται ο ιστότοπός σας.

Το Chrome Dev Tools for SEO είναι σημαντικό καθώς το χρησιμοποιούμε για την αντιμετώπιση προβλημάτων. Για να επιτρέψουμε την εύκολη επικοινωνία μεταξύ της Semalt και των πελατών μας, θα θέλαμε να σας δείξουμε πώς χρησιμοποιούμε αυτό το εργαλείο για να διορθώσουμε ζητήματα SEO στον ιστότοπό σας.

Με τα Chrome Dev Tools, μπορούμε να εντοπίσουμε τα βασικά ζητήματα SEO, από την ανίχνευση ενός ιστότοπου έως την απόδοσή του. Σε αυτό το άρθρο, θα επισημάνουμε τρεις τρόπους με τους οποίους χρησιμοποιούμε αυτά τα εργαλεία για την καλύτερη εξυπηρέτηση των πελατών μας.

Τι είναι το Chrome DevTools;

Το DevTools ή το Chrome DevTools στο σύνολό τους είναι ένα σύνολο εργαλείων βοήθειας προγραμματιστών ιστού που είναι ενσωματωμένα απευθείας στο πρόγραμμα περιήγησης Chrome. Χρησιμοποιούμε αυτά τα εργαλεία για την άμεση επεξεργασία των σελίδων και τη διάγνωση προβλημάτων. Αυτό μας βοηθά να δημιουργήσουμε καλύτερους ιστότοπους για τους πελάτες μας, αλλά μπορούμε να το κάνουμε πιο γρήγορα και να διασφαλίσουμε ότι είναι τέλειοι.

Μπορούμε όλοι να συμφωνήσουμε σε μεγάλο βαθμό ότι το Google Chrome είναι ένα από τα πιο σημαντικά εργαλεία στο οπλοστάσιο οποιουδήποτε επαγγελματία SEO. Ανεξάρτητα από το λογισμικό SEO που χρησιμοποιείτε για την αυτοματοποίηση ελέγχων ή τη διάγνωση ζητημάτων SEO σε κλίμακα, το Chrome DevTools παραμένει απαραίτητο. Χάρη στην ικανότητά του να παρέχει κρίσιμους τρόπους για τον έλεγχο των ζητημάτων SEO εν κινήσει, πολλοί επαγγελματίες SEO, συμπεριλαμβανομένου του Semalt, το έχουν ξαναχρησιμοποιήσει ξανά και ξανά.

Θα μπορούσαμε να αφιερώσουμε περισσότερο χρόνο συζητώντας τους πολλούς τρόπους με τους οποίους τα Chrome DevTools μπορούν να βοηθήσουν επαγγελματίες και προγραμματιστές ιστού, αλλά η προσοχή μας είναι σε κάτι λίγο πιο συγκεκριμένο. Εδώ, θέλουμε να μοιραστούμε μαζί σας μερικές διαφορετικές περιπτώσεις στις οποίες βασίζαμε τα Chrome DevTools για να εντοπίσουμε και να διορθώσουμε ένα πρόβλημα.

Ακολουθούν τρεις καταστάσεις που το Chrome DevTools δεν θα ήταν κακή ιδέα:

Ρύθμιση Chrome DevTools για αντιμετώπιση προβλημάτων

Οι πιθανότητες είναι ότι δεν έχετε δοκιμάσει ποτέ να χρησιμοποιήσετε το Chrome DevTools. Λοιπόν, η πρόσβαση σε αυτό είναι τόσο απλή όσο κάνοντας κλικ σε έναν ιστότοπο στο SERP και κάνοντας κλικ σε ένα κουμπί επιθεώρησης. Ως επαγγελματίες SEO, πρέπει να είμαστε πιο προσεκτικοί από αυτό, αλλά έχετε την ιδέα για το πώς χρησιμοποιείται. Στο Semalt, χρησιμοποιούμε το επίπεδο Element, το οποίο μας επιτρέπει να παρατηρήσουμε το DOM και το CSS, το οποίο επιτρέπει μερικά άλλα διαφορετικά εργαλεία στο συρτάρι της κονσόλας.

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

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

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

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

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

Για τους πρώτους χρονοδιακόπτες, το συρτάρι της κονσόλας ενδέχεται να μην εμφανίζει την ίδια την κονσόλα, αλλά αφού χρησιμοποιήσετε το Chrome DevTools για λίγο, το συρτάρι της κονσόλας αρχίζει να εμφανίζει την ίδια την κονσόλα. Ο πίνακας κονσόλας σας επιτρέπει να βλέπετε καταγεγραμμένα μηνύματα καθώς και να εκτελείτε javascript. Δεν θα βουτήξαμε σε αυτό σήμερα.

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

Αλλαγή του πράκτορα χρήστη σε DevTools

Η εναλλαγή User-Agent είναι ένας από τους πιο παραβλεφθέντες τρόπους χρήσης του DevTools. Αυτή είναι μια απλή δοκιμή που μας βοήθησε να αποκαλύψουμε πολλά διαφορετικά ζητήματα, καθώς παρέχει πληροφορίες σχετικά με τον τρόπο με τον οποίο το Googlebot βλέπει και επεξεργάζεται τις λειτουργίες πληροφοριών σε έναν ιστότοπο.

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

Πώς μπορείτε να αλλάξετε τον πράκτορα χρήστη σας στο Chrome DevTools;

Κατά την εναλλαγή του πράκτορα χρήστη στο Chrome, θα πρέπει να χρησιμοποιήσετε την καρτέλα συνθήκες δικτύου στο συρτάρι της κονσόλας σας. Για να το κάνετε αυτό, καταργήστε την επιλογή αυτόματης επιλογής, η οποία σας επιτρέπει να προβάλετε το περιεχόμενο χρησιμοποιώντας smartphone Googlebot, Bingbot ή ορισμένους άλλους πράκτορες χρήστη για να δείτε πώς παραδίδεται το περιεχόμενό σας.

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

Χρήση του Chrom DevTool για περίπτωση εναλλακτικού ιστότοπου για κινητά

Σε μια παρόμοια περίπτωση, μετά την αλλαγή του πράκτορα χρήστη σε smartphone Googlebot, ανακαλύψαμε ότι ο ιστότοπος εξακολουθούσε να εξυπηρετεί έναν εναλλακτικό ιστότοπο για κινητά στο Googlebot. Αλλά επειδή η Google είχε ήδη αλλάξει την ευρετηρίαση για κινητά, επεξεργάστηκε και ευρετηρίασε τις αλλαγές στον ιστότοπο για κινητά, αλλά απέτυχε να εντοπίσει τις ενημερώσεις που είχαν γίνει στην έκδοση του τομέα για επιτραπέζιους υπολογιστές.

Μπορείτε να υποθέσετε ότι οι ιστότοποι για κινητά είναι κάποια λείψανα, αλλά πράγματι εξακολουθούν να υπάρχουν.

Χρήση των Chrome DevTools για εντοπισμό υπερβολικού ζητήματος προστασίας διακομιστή

Υπάρχουν πολλά άτομα με κακόβουλες προθέσεις στον Ιστό. Πολλοί χάκερ και κακόβουλοι κακοποιοί προσπαθούν να χρησιμοποιήσουν το Google σε ιστότοπους στο Διαδίκτυο. Για αυτόν τον λόγο, ορισμένοι διακομιστές στοίβας CDN και άλλοι πάροχοι φιλοξενίας ενδέχεται να προσφέρουν ορισμένες ενσωματωμένες λειτουργίες που σταματούν το Googlebot spoofs όταν η πραγματική τους πρόθεση είναι να εμποδίσουν την πρόσβαση των ανεπιθύμητων ανιχνευτών στον ιστότοπο. Σε μια υπερβολική προσπάθεια, αυτοί οι ιστότοποι ενδέχεται να αποκλείσουν την πρόσβαση του Googlebot στον ιστότοπο. Μερικές φορές, οι χρήστες βλέπουν μηνύματα που αναφέρουν "Αποκλεισμένο αίτημα χωρίς εξουσιοδότηση".

Εάν συναντήσουμε τέτοια μηνύματα στο SERP της Google, γνωρίζουμε αμέσως ότι υπάρχει ένα σφάλμα, παρόλο που το πρόγραμμα περιήγησης φορτώνει το περιεχόμενο χωρίς προβλήματα.

Χρησιμοποιώντας τη λειτουργία διακόπτη User-Agent, μπορούμε να δούμε ότι ο ιστότοπος προβάλλει αυτό το μήνυμα μόλις ορίσουμε το User-Agent στο Smartphone Googlebot.

Διάγνωση των βασικών Web Vital σε DevTools

Η καρτέλα επιδόσεων είναι ένα από τα πιο σημαντικά χαρακτηριστικά των DevTools. Χρησιμεύει ως μια εξαιρετική πύλη για την αντιμετώπιση προβλημάτων που επηρεάζουν την ταχύτητα και την απόδοση της σελίδας. Σε γενικές γραμμές, τα DevTools μπορούν να προσφέρουν κάποιες πληροφορίες με δυνατότητα δράσης όταν πρόκειται για βασικά web vitals.

Οι μετρήσεις που αποτελούν το Core Web Vital της Google αποτελούν μέρος των αναφορών ταχύτητας και απόδοσης για αρκετό καιρό. Είναι πολύ σημαντικό οι επαγγελματίες SEO να είναι εξοικειωμένοι με το πώς να τεμαχίσουν αυτά τα ζητήματα. Ως webmasters, έχουμε συνειδητοποιήσει περισσότερο τη σημασία των βασικών web vital για την αποτελεσματικότητα της αναζήτησης.

Όταν χρησιμοποιείτε την καρτέλα απόδοσης στο DevTools, κάνουμε ένα βήμα πιο κοντά για να γίνουμε καλύτεροι στην κατανόηση σημαντικών μετρήσεων ιστού.

Ελέγξτε ξανά τις κεφαλίδες HTTP και ελέγξτε τον αχρησιμοποίητο κώδικα

Έχετε ακούσει ποτέ για τα μαλακά 404 στους ελέγχους SEO σας; Λοιπόν, τα μαλακά 404 είναι όταν το πρόγραμμα περιήγησης μπορεί να εμφανίσει μια σελίδα 404, αλλά επιστρέφουν έναν κωδικό απόκρισης 200 ΟΚ.
Σε ορισμένες περιπτώσεις, το περιεχόμενο μπορεί να φορτωθεί ακριβώς όπως αναμενόταν στο πρόγραμμα περιήγησης. Ωστόσο, ο κωδικός απόκρισης HTTP ενδέχεται να εμφανίζει σφάλμα 404 ή 302. Μπορεί επίσης να είναι γενικά λανθασμένο ή όχι αυτό που περιμένατε. Σε κάθε περίπτωση, είναι χρήσιμο να βλέπετε τον κωδικό απόκρισης HTTP για κάθε σελίδα και πόρο.

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

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

συμπέρασμα

Με τα Chrome DevTools, έχετε τη δυνατότητα να βρείτε και να αντιμετωπίσετε τα υποκείμενα ζητήματα που εμποδίζουν τον ιστότοπό σας να προσεγγίσει τις πραγματικές δυνατότητές του. Τα DevTools είναι ειδικά χρήσιμα στους τεχνικούς σας ελέγχους. Εκτός από αυτά, απολαμβάνετε επίσης ταχύτητα όταν χρησιμοποιείτε DevTools. Χωρίς να εγκαταλείψουμε τα προγράμματα περιήγησής μας, η ομάδα μας στο Semalt μπορεί να αισθανθεί εξουσιοδοτημένη να εντοπίζει ζητήματα ελέγχου από την ανίχνευση ενός ιστότοπου έως την απόδοσή του.

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


mass gmail