Menggunakan Chrome DevTools Untuk Pemecahan Masalah - Perintah Semalt



Chrome DevTools bukanlah sesuatu yang asing bagi sebagian besar profesional SEO. Bagi Ñ lients, di sisi lain, itu mungkin salah satu hal yang belum Anda pelajari. Nah, di Semalt, bagian dari proses kami dalam melayani kebutuhan SEO klien kami bergantung pada cara kami mendidik Anda tentang aspek penting dari apa yang dibutuhkan situs web Anda.

Alat Pengembang Chrome untuk SEO penting karena kami menggunakannya dalam pemecahan masalah. Untuk mengaktifkan komunikasi yang mudah antara Semalt dan klien kami, kami ingin menunjukkan kepada Anda bagaimana kami menggunakan alat ini untuk memperbaiki masalah SEO di situs web Anda.

Dengan Chrome Dev Tools, kami dapat menemukan masalah SEO yang mendasari mulai dari crawlabiltiy situs web hingga kinerjanya. Pada artikel ini, kami akan menyoroti tiga cara kami menggunakan alat-alat ini untuk melayani klien kami dengan lebih baik.

Apa Itu Chrome DevTools?

DevTools atau Chrome DevTools secara lengkap adalah sekumpulan alat bantuan pengembang web yang dibangun langsung ke dalam browser Chrome. Kami menggunakan alat ini dalam mengedit halaman dengan cepat dan mendiagnosis masalah dengan segera. Itu membantu kami membangun situs web yang lebih baik untuk klien kami, tetapi kami dapat melakukannya lebih cepat dan memastikan bahwa situs itu sempurna.

Kita semua sangat setuju bahwa Google Chrome adalah salah satu toolkit paling penting dalam gudang senjata SEO pro. Terlepas dari perangkat lunak SEO yang Anda gunakan untuk mengotomatiskan audit atau mendiagnosis masalah SEO dalam skala besar, Chrome DevTools tetap harus dimiliki. Berkat kemampuannya untuk menyediakan cara penting untuk memeriksa masalah SEO dengan cepat, banyak profesional SEO, termasuk Semalt, telah menggunakannya berkali-kali.

Kami dapat menghabiskan lebih banyak waktu untuk mendiskusikan berbagai cara Chrome DevTools dapat membantu para profesional dan pengembang web, tetapi perhatian kami tertuju pada sesuatu yang sedikit lebih spesifik. Di sini, kami ingin berbagi dengan Anda beberapa kasus berbeda di mana kami mengandalkan Chrome DevTools untuk mencari dan memperbaiki masalah.

Berikut adalah tiga situasi di mana memiliki Chrome DevTools bukanlah ide yang buruk:

Menyiapkan Chrome DevTools Untuk Pemecahan Masalah

Kemungkinannya adalah Anda belum pernah mencoba menggunakan Chrome DevTools. Yah, mengaksesnya semudah mengklik situs web di SERP dan mengklik tombol periksa. Sebagai profesional SEO, kami harus lebih berhati-hati dari itu, tetapi Anda tahu bagaimana penggunaannya. Di Semalt, kami menggunakan kedua bidang Elemen, yang memungkinkan kami mengamati DOM, dan CSS, yang memungkinkan beberapa alat berbeda lainnya di laci konsol.

Kami akan memandu Anda langkah demi langkah proses bagaimana alat ini digunakan dalam pemecahan masalah SEO.

Untuk memulai, Anda harus mengklik kanan lalu pilih inspeksi. Secara default, Anda akan melihat panel elemen muncul, dan ini memberi Anda gambaran sekilas tentang DOM dan sifat style sheet yang digunakan dalam membuat halaman.

Memiliki pandangan ini memberi kita banyak hal untuk diselami; namun, kami mengaktifkan panel samping konsol untuk memanfaatkan toolkit sepenuhnya.

Klik pada titik-titik yang muncul di sebelah ikon pengaturan dan gulir ke bawah sampai kita menemukan opsi Show console drawer. Sebagai alternatif, kami cukup mengklik tombol escape.

Dengan mengaktifkan konsol dan panel elemen, pengguna bisa melihat sekilas kode yang telah dirender di DOM. Pengguna juga akan melihat style sheet yang telah digunakan untuk melukis kode di browser. Serta beberapa alat lain yang dapat Anda akses dari laci konsol.

Untuk pemula, panel samping konsol mungkin tidak menampilkan konsol itu sendiri, tetapi setelah Anda menggunakan Chrome DevTools untuk sementara waktu, panel samping konsol mulai menampilkan konsol itu sendiri. Panel konsol Anda memungkinkan Anda untuk melihat pesan yang dicatat serta menjalankan javascript. Kami tidak akan membahasnya hari ini.

Sebagai gantinya, berikut adalah tiga alat tambahan yang akan kita lihat:
Untuk menemukan alat ini, pilih alat lainnya dan pilih masing-masing dari tiga item ini sehingga muncul sebagai tab di laci konsol. Setelah kami mengaktifkan ketiga panel ini, kami dapat mulai memecahkan masalah.

Mengalihkan Agen Pengguna di DevTools

Mengalihkan Agen-Pengguna adalah salah satu cara yang paling sering diabaikan untuk menggunakan DevTools. Ini adalah pengujian sederhana yang telah membantu kami mengungkap beberapa masalah berbeda karena memberikan wawasan tentang cara Googlebot melihat dan memproses fitur informasi di situs.

Untuk tim profesional SEO investigasi kami, DevTools digunakan sebagai kaca pembesar yang layak dan tepercaya, memungkinkan kami untuk memperbesar masalah di situs web untuk tidak hanya mencegah masalah tersebut berkembang tetapi juga untuk mengungkap akar penyebab masalah tersebut.

Bagaimana Cara Mengalihkan Agen Pengguna Anda Di Chrome DevTools?

Saat mengalihkan agen-pengguna Anda di Chrome, Anda perlu menggunakan tab kondisi jaringan di laci konsol Anda. Untuk melakukannya, hapus centang pilih secara otomatis, yang memungkinkan Anda untuk melihat konten menggunakan ponsel cerdas Googlebot, Bingbot, atau sejumlah agen pengguna lain untuk melihat bagaimana konten Anda dikirimkan.

Jika Google tidak menampilkan tag judul atau deskripsi meta yang diperbarui di SERP, tidak diragukan lagi pemilik situs web semacam itu akan khawatir. Memahami mengapa Google telah memilih untuk menggunakan tag judul yang sama sekali berbeda atau gagal memperbarui tag adalah penting untuk memastikan bahwa perubahan yang Anda buat telah diterapkan.

Menggunakan Chrom DevTool Untuk Kasus Situs Alternatif Seluler

Dalam kasus serupa, setelah mengalihkan agen pengguna ke ponsel cerdas Googlebot, kami menemukan bahwa situs tersebut masih menyajikan situs seluler alternatif ke Googlebot. Namun karena Google telah beralih ke pengindeksan yang memprioritaskan seluler, Google memproses dan mengindeks perubahan di situs seluler tetapi gagal menangkap pembaruan yang telah dibuat untuk versi desktop Domain.

Anda mungkin berasumsi bahwa situs seluler adalah semacam peninggalan, tetapi memang masih ada.

Menggunakan Chrome DevTools Untuk Mengenali Perlindungan Server yang Berlebihan

Ada banyak orang dengan niat jahat di web. Banyak peretas dan penjahat jahat mencoba menggunakan Google terhadap situs-situs di internet. Karena alasan ini, beberapa CDN tumpukan server dan penyedia hosting lain mungkin menawarkan fitur bawaan tertentu yang menghentikan spoof Googlebot saat maksud sebenarnya mereka adalah menghentikan crawler spam untuk mendapatkan akses ke situs. Dalam upaya yang berlebihan, situs-situs ini mungkin akhirnya memblokir Googlebot untuk mendapatkan akses ke situs tersebut. Terkadang, pengguna melihat pesan yang menyatakan "Permintaan Tidak Sah Diblokir".

Jika kami menemukan pesan seperti itu di SERP Google, kami segera tahu bahwa pelanggaran sedang terjadi meskipun browser memuat konten tanpa masalah.

Dengan menggunakan fitur sakelar Agen-Pengguna, kami dapat melihat bahwa situs menyajikan pesan itu segera setelah kami menyetel Agen-Pengguna ke Ponsel Cerdas Googlebot.

Mendiagnosis Vital Web Inti Di DevTools

Tab kinerja adalah salah satu fitur terpenting dari DevTools. Ini berfungsi sebagai gerbang yang bagus untuk memecahkan masalah yang memengaruhi kecepatan dan kinerja halaman. Secara umum, DevTools dapat menawarkan beberapa informasi yang dapat ditindaklanjuti terkait dengan web vitals inti.

Metrik yang membentuk Core Web Vitals Google telah menjadi bagian dari kecepatan halaman dan laporan kinerja selama beberapa waktu. Sangat penting bagi para profesional SEO untuk memahami cara membedah masalah ini. Sebagai webmaster, kami menjadi lebih sadar akan pentingnya web vitals inti untuk efisiensi penelusuran.

Saat menggunakan tab kinerja di DevTools, kami selangkah lebih dekat untuk menjadi lebih baik dalam memahami metrik web yang penting.

Periksa Kembali Header HTTP Anda Dan Tinjau Kode yang Tidak Digunakan

Pernahkah Anda mendengar tentang soft 404 dalam audit SEO Anda? Nah, 404 ringan adalah saat browser mungkin menampilkan halaman 404, tetapi mereka mengembalikan Kode Respons 200 OK.
Dalam beberapa kasus, konten dapat dimuat persis seperti yang diharapkan di browser; namun, Kode Respons HTTP mungkin menunjukkan kesalahan 404 atau 302. Ini juga bisa secara umum salah atau tidak seperti yang Anda harapkan. Apa pun pilihannya, melihat kode respons HTTP untuk setiap halaman dan sumber daya akan membantu.

Meskipun ada sejumlah Ekstensi Chrome luar biasa yang memberi Anda informasi berharga tentang kode respons menggunakan DevTools, Anda dapat memeriksa informasi ini secara langsung.

Pada titik ini, DevTools menampilkan semua resource individual yang dipanggil untuk mengompilasi halaman. Itu termasuk kode status yang sesuai dan visualisasi air terjun.

Kesimpulan

Dengan Chrome DevTools, Anda memiliki kemampuan untuk menemukan dan mengatasi masalah mendasar yang menghentikan situs web Anda mencapai potensi sebenarnya. DevTools secara khusus berguna dalam audit teknis Anda. Selain itu, Anda juga menikmati kecepatan saat menggunakan DevTools. Tanpa meninggalkan browser web kami, tim kami di Semalt dapat merasa diberdayakan untuk memeriksa masalah pemeriksaan mulai dari merayapi situs web hingga seberapa baik kinerjanya.

Semalt ada di sini untuk membantu Anda menampilkan yang terbaik di situs web Anda, dan kami berharap Anda dapat menghubungi tim kami. Kami menunggu kabar dari Anda.