DevTools Chrome untuk SEO: 10 cara untuk menggunakan fitur peramban ini untuk audit SEO Anda

A+ A-
google-chrome-alat pengembangan-ss-1920

Meskipun banyak dari kita di industri membayar ratusan atau bahkan ribuan untuk perangkat lunak SEO yang membantu untuk mengotomatisasi dan menyederhanakan pekerjaan kita sehari-hari, kita sudah memiliki salah satu yang paling berguna bebas alat SEO set di pasar dengan DevTools Google Chrome. Dibangun ke Google Chrome, ini set web authoring dan alat debugging memungkinkan kita untuk memvalidasi beberapa aspek SEO yang paling mendasar dan penting dari setiap halaman.

Dalam kebanyakan kasus, menggunakan DevTools cukup sederhana. Tapi ada beberapa yang sangat berguna dan tidak aplikasi begitu jelas untuk analisis SEO. Mari kita pergi melalui mereka sekarang.

Mulai dengan menavigasi ke halaman Anda ingin menyelidiki di Google Chrome dan DevTools pembukaan. Anda dapat melakukan ini dengan memilih Lebih Alat> Alat Pengembang dari menu Google Chrome di sudut kanan atas jendela browser Anda.

google-chrome-devtools

Atau, Anda dapat menggunakan cara pintas keyboard Ctrl + Shift + I (Windows) atau Cmd + Opt + I (Mac), atau Anda bisa klik kanan pada elemen halaman yang ingin Anda menyelidiki dan klik “Periksa” dari drop menu -down yang muncul.

1. Periksa elemen konten utama halaman Anda, termasuk yang JavaScript-diberikan

Google sekarang dapat merangkak dan konten berbasis JavaScript indeks, tetapi tidak selalu melakukannya dengan sempurna. Oleh karena itu, itu adalah suatu keharusan untuk memverifikasi elemen konten utama halaman Anda - tidak hanya dengan meninjau kode sumber HTML mereka, tetapi juga dengan memeriksa DOM mereka untuk melihat bagaimana informasi akan benar-benar diberikan dan diidentifikasi oleh Google.

Anda dapat langsung melihat DOM setiap halaman dengan DevTools di “Elements” panel.

chrome-devtools-unsur-tab

Gunakan ini untuk meninjau isi dari elemen halaman (seperti judul, meta deskripsi atau teks halaman) untuk memverifikasi bahwa informasi yang relevan yang diinginkan ditampilkan dalam setiap kasus, untuk memastikan itu dapat diakses oleh Google.

Sebagai contoh, di layar kiri atas shot di bawah, kita dapat melihat bagaimana teks utama yang ditampilkan (merah) termasuk dalam <div>. Tapi ini benar-benar diterapkan dengan JavaScript, kode yang dapat dilihat pada layar kanan atas shot di bawah, yang menunjukkan kode sumber HTML halaman.

Javascript Konten Rendering

[Klik untuk memperbesar]

Ketika mengidentifikasi perbedaan-perbedaan antara konten ditampilkan di kedua, maka Anda dapat mengambil langkah-langkah yang tepat untuk memverifikasi itu sedang diindeks dengan benar: meninjau halaman cache versi di Google, memverifikasi jika teks sedang ditampilkan dalam hasil Google ketika mencari untuk itu, menggunakan “Ambil sebagai Googlebot” di Google Search Console dan sebagainya.

2. Carilah CSS konten tersembunyi

Ini diketahui bahwa Google “diskon” konten teks yang, meskipun termasuk dalam halaman HTML kode sumber, tersembunyi kepada pengguna secara default dengan tab atau pilihan menu yang harus “diklik” untuk melihat atau memperluas mereka.

Di antara cara yang paling umum untuk menyembunyikan teks dengan menggunakan CSS dengan “display: none” atau “visibility: hidden” properti, jadi disarankan untuk memeriksa apakah ada informasi penting pada halaman situs Anda yang mungkin tersembunyi melalui cara ini.

Anda dapat melakukan ini dengan DevTools Chrome “Cari” laci, yang dapat Anda akses dengan menekan Ctrl + Shift + F (Windows) atau Cmd + Opt + F (Mac) ketika DevTools terbuka. fitur pencarian ini akan memungkinkan Anda untuk melihat tidak hanya melalui file halaman yang dibuka itu sendiri tetapi di semua sumber daya yang digunakan, termasuk CSS dan JavaScript.

mencari gaya konten tersembunyi

Di sini, Anda dapat mencari properti yang diinginkan, dalam hal ini “tersembunyi” atau “display: none” untuk mengidentifikasi apakah / di mana mereka ada dalam kode halaman.

Klik pada hasil pencarian untuk melihat kode lengkap seputar properti yang pernah ditelusuri. Tinjau kode untuk melihat mana teks yang tersembunyi; jika itu konten penting, memeriksa apakah itu sedang diskon oleh Google, dan mengambil tindakan yang tepat.

3. Pastikan Anda deskripsi gambar ALT

Selain memeriksa elemen konten teks utama halaman Anda, Anda juga dapat memverifikasi gambar Anda deskripsi ALT di ‘Elements’ panel. Klik kanan pada gambar apapun dan pilih “Periksa,” seperti yang ditunjukkan di sini:

Verifikasi Deskripsi Gambar ALT

[Klik untuk memperbesar]

4. Mengidentifikasi no-indeksasi & konfigurasi kanonikalisasi di halaman & sumber

Anda juga dapat menggunakan DevTools Chrome untuk memeriksa konfigurasi teknis halaman Anda. Misalnya, Anda dapat memvalidasi meta robot dan tag kanonik konfigurasi, yang dapat dilakukan dengan menggunakan “Cari” laci untuk mencari tag spesifik dan meninjau bagaimana mereka diimplementasikan.

devtools-search-kanonik

Validasi ini dapat dilakukan tidak hanya untuk pelaksanaan tag ini di HTML <head> daerah, tetapi juga di header HTTP, dengan pergi ke “Jaringan” panel dan memilih halaman yang diinginkan atau sumber daya untuk memverifikasi informasi header mereka, termasuk keberadaan link rel =”canonical” dalam sebuah file gambar, misalnya, seperti yang ditunjukkan di bawah ini.

devtools-jaringan-header

5. Carilah status HTTP dalam konfigurasi sundulan

Ketika memeriksa konfigurasi header dari halaman dan sumber daya menggunakan “Jaringan” panel, Anda juga dapat memverifikasi status HTTP mereka dan melihat apakah ada pengalihan, jenis pengalihan mereka, dan status kesalahan, serta dimasukkannya lainnya konfigurasi seperti x-robot-tag, hreflang atau “bervariasi: user agent” yang.

HTTP Header Validasi

6. Validasi optimasi web mobile Anda dengan meniru perangkat apapun

-Keramahan ponsel sekarang penting untuk SEO, dan Anda dapat memvalidasi konfigurasi halaman dan konten dalam ponsel menggunakan DevTools “Device Mode.” Opsi ini dapat diaktifkan dengan mengklik ikon perangkat di daerah kiri atas panel atau dengan menekan command + shift + M (Mac) atau Ctrl + shift + M (Windows, Linux) sedangkan panel DevTools terbuka.

devtools-perangkat-toolbar

Setelah dalam Mode Perangkat, Anda akan ditampilkan kontrol viewport di daerah atas jendela. Di sini, Anda dapat memilih pandang responsif (bebas resizable) atau memilih perangkat tertentu untuk menguji halaman Anda dengan. Anda juga dapat menambahkan perangkat kustom Anda sendiri menggunakan “Edit ...” pilihan.

Meniru Mobile Devices

7. Menilai waktu buka halaman Anda & mengidentifikasi masalah kecepatan

Menganalisis setiap waktu buka halaman dengan meniru kondisi jaringan dan perangkat yang digunakan. Untuk ini, Anda dapat pergi ke “Kondisi Jaringan” alat, yang dapat Anda akses dari menu Customization di sudut kanan atas dari panel di bawah “alat lainnya.”

devtools-jaringan-kondisi

Di sini Anda akan menemukan “Caching,” “Jaringan throttling” dan “User agent” konfigurasi.

Meniru Kondisi Jaringan

Setelah Anda telah memilih pengaturan Anda, Anda dapat reload halaman yang diinginkan dan pergi ke “Jaringan” panel untuk melihat tidak hanya waktu halaman penuh beban (Load) tetapi juga ketika markup awal halaman telah diurai (DOMContentLoaded), baik yang muncul di bagian bawah jendela. Anda juga dapat melihat beban kali dan ukuran masing-masing dari sumber daya yang digunakan, yang dapat direkam dengan mengklik tombol merah di sisi kiri panel.

Untuk mendapatkan rekomendasi dari tindakan untuk mengambil dalam rangka untuk meningkatkan kecepatan kinerja halaman, arahkan ke panel “Audit” dan klik “Run” tombol. Setiap rekomendasi akan menentukan sumber daya terkait menyebabkan masalah, seperti dapat dilihat di bawah ini:

sumber daya jaringan wawasan & Rekomendasi

Selain itu, Anda dapat menangkap screen shot halaman render Anda dengan “Filmstrip” pilihan. Dengan mengklik ikon kamera dan reload halaman, Anda dapat melihat screen shot dari halaman Anda di berbagai tahap pembebanan, yang memungkinkan Anda untuk memverifikasi apa yang pengguna Anda dapat melihat pada setiap tahap.

waktu buka filmstrip screenshot

8. Mengidentifikasi sumber daya pemblokiran render

Anda juga dapat menggunakan beban sumber daya kali data dalam “Jaringan” panel untuk mengidentifikasi JS dan sumber daya CSS loading sebelum DOM dan berpotensi menghalangi itu, yang merupakan salah satu masalah kecepatan halaman yang paling umum. Anda dapat menyaring berdasarkan CSS dan JS dengan mengklik tombol bagi mereka (seperti yang ditunjukkan di bawah).

Render Memblokir Sumber Daya

9. Carilah sumber non-aman selama migrasi HTTPS

DevTools Chrome bisa sangat membantu selama HTTPS migrasi, karena memungkinkan Anda untuk mengidentifikasi masalah keamanan di setiap halaman dengan informasi yang diberikan dalam panel “Security”. Anda dapat melihat apakah halaman tersebut aman dan memiliki sertifikat HTTPS yang valid, jenis koneksi aman, dan jika ada masalah konten campuran karena asal-usul non-aman dari setiap sumber daya yang digunakan.

Aman Pages & Sumber Daya Validasi Chrome DevTools

10. Validasi Dipercepat Pages Mobile (AMP) implementasi Anda

Jika Anda menerapkan AMP, Anda dapat melihat apakah ada masalah dengan halaman Anda dengan menambahkan “# pembangunan = 1” string untuk URL AMP Anda, kemudian memeriksa di panel “Console”. Ini akan memberitahu Anda jika ada masalah, peringatan atau kesalahan - dan di mana unsur dan baris kode ini telah ditemukan sehingga Anda dapat mengambil tindakan yang tepat untuk memperbaikinya.

AMP Pages Validasi

Bonus: Personalisasi setelan Chrome DevTools

Seperti yang Anda lihat, Anda dapat menggunakan Chrome DevTools untuk SEO dalam banyak hal yang Anda mungkin akan menghabiskan beberapa waktu di dalamnya. Dengan demikian, Anda mungkin ingin untuk personalisasi itu sedikit berdasarkan preferensi Anda sendiri. Anda dapat menyesuaikan penampilan, memungkinkan pintas dan banyak lagi.

Anda dapat melakukan ini dalam pengaturan “Preferences”, yang dapat ditemukan dengan mengklik tombol menu Customization di sudut kanan atas panel dan memilih “Settings” pilihan.

Preferensi Chrome DevTools

Last but not least, berbicara tentang personalisasi preferensi: Menganalisis kode minified dapat membuat sulit untuk mengurai, jadi pastikan untuk mengklik cetak cukup “{}” tombol di daerah bawah pusat panel sehingga Anda dapat melihat versi non-minified. Ini akan memungkinkan Anda untuk pergi melalui itu dengan mudah karena dengan peningkatan keterbacaan.

PrettyPrint Chrome DevTools

Saya harap tips Chrome DevTools ini membantu untuk membuat hidup Anda lebih mudah SEO!


Pendapat yang dikemukakan dalam artikel ini adalah dari penulis tamu dan belum tentu Search Engine Land. Penulis staf tercantum di sini.