Tim Hubungan Penelusuran Google menjelaskan bagaimana CSS memengaruhi SEO, membahas mitos tentang nama kelas, elemen semu, dan kinerja halaman.
Dalam episode terbaru podcast Search Off the Record Google , Martin Splitt dan John Mueller mengklarifikasi bagaimana CSS memengaruhi SEO.
Sementara beberapa aspek CSS tidak berpengaruh pada SEO, aspek lainnya dapat secara langsung memengaruhi cara mesin pencari menafsirkan dan memberi peringkat konten.
Inilah yang penting dan yang tidak.
Nama Kelas Tidak Penting untuk Peringkat
Salah satu hal yang paling jelas dari episode ini adalah bahwa nama kelas CSS tidak berdampak pada Google Penelusuran.
Nama kelas, jelas mereka, hanya digunakan untuk menerapkan gaya visual. Nama kelas tidak dianggap sebagai bagian dari konten halaman. Oleh karena itu, nama kelas diabaikan oleh Googlebot dan parser HTML lainnya saat mengekstrak informasi yang bermakna.
Bahkan jika Anda memasukkan HTML ke dalam model bahasa atau perayap dasar, nama kelas tidak akan diperhitungkan kecuali sistem Anda dirancang secara eksplisit untuk membaca atribut tersebut.
Mengapa Konten Dalam Elemen Semu Merupakan Masalah
Meskipun nama kelas tidak berbahaya, tim memperingatkan tentang penempatan konten yang bermakna dalam elemen semu CSS seperti :beforedan :after.
Splitt menyatakan:
Idenya lagi—ide awalnya—adalah memisahkan presentasi dari konten. Jadi, konten ada di HTML, dan cara penyajiannya ada di CSS. Jadi dengan
beforedanafter, jika Anda menambahkan elemen dekoratif seperti segitiga kecil, titik kecil, bola lampu kecil, atau unicorn kecil—apa pun itu—saya rasa itu tidak masalah karena bersifat dekoratif. Elemen dekoratif tidak memiliki makna dalam arti konten. Tanpanya, elemen dekoratif tetap akan baik-baik saja.
Menambahkan sentuhan visual dapat diterima, tetapi memasukkan judul, paragraf, atau konten apa pun yang ditujukan kepada pengguna ke dalam elemen semu melanggar prinsip inti pengembangan web.
Konten tersebut menjadi tidak terlihat oleh mesin pencari, pembaca layar, dan alat lainnya yang mengandalkan penguraian HTML secara langsung.
Mueller membagikan contoh nyata tentang bagaimana hal ini bisa salah:
“Pernah ada eskalasi dari tim pengindeksan yang mengatakan bahwa kami harus menghubungi situs tersebut dan meminta mereka untuk berhenti menggunakan
beforedanafter… Mereka menggunakanbeforekelas semu untuk menambahkan tanda angka pada semua tagar yang mereka anggap sebagai tagar. Dan sistem pengindeksan kami berkata, alangkah baiknya jika kami bisa mengenali tagar-tagar ini di halaman karena mungkin tagar-tagar ini berguna untuk sesuatu.”
Karena simbol tagar ditambahkan melalui CSS, simbol tersebut tidak pernah terlihat oleh sistem Google.
Splitt mengujinya secara langsung selama rekaman dan mengonfirmasi:
“Itu tidak ada di DOM… jadi tidak terdeteksi saat dirender.”
CSS yang Terlalu Besar Dapat Merusak Performa
Episode ini juga menyinggung masalah performa terkait dengan stylesheet yang membengkak.
Menurut data dari Almanak Web 2022 Arsip HTTP, ukuran rata-rata file CSS telah tumbuh menjadi sekitar 68 KB untuk seluler dan 72 KB untuk desktop.
Mueller menyatakan:
Almanak Web menyatakan bahwa setiap tahun kita melihat CSS bertambah besar, dan pada tahun 2022, ukuran median stylesheet adalah 68 kilobyte atau 72 kilobyte. … Mereka juga menyebutkan bahwa ukuran terbesar yang mereka temukan adalah 78 megabyte. … Ini adalah berkas teks.
Pembengkakan semacam itu dapat berdampak negatif pada Core Web Vitals dan pengalaman pengguna secara keseluruhan, yang merupakan dua area yang memengaruhi peringkat. Kerangka kerja dan pustaka bawaan sering kali menjadi penyebabnya.
Meskipun pengembang dapat mengatasi hal ini dengan minifikasi dan pemangkasan aturan yang tidak terpakai, tidak semua orang melakukannya. Hal ini menjadikan optimasi CSS sebagai item penting dalam daftar periksa SEO teknis Anda.
Jaga CSS Tetap Dapat Dirayapi
Meskipun peran CSS dalam pemeringkatan terbatas, Google tetap menyarankan agar file CSS dapat dirayapi.
Mueller bercanda:
“Pedoman Google mengatakan Anda harus membuat file CSS Anda bisa dirayapi. Jadi, pasti ada semacam keajaiban di sana, kan?”
Alasan sebenarnya lebih teknis daripada magis. Googlebot menggunakan berkas CSS untuk merender halaman seperti yang dilihat pengguna.
Memblokir CSS dapat memengaruhi bagaimana halaman Anda ditafsirkan, terutama untuk tata letak, keramahan seluler, atau elemen seperti konten tersembunyi.
Tips Praktis untuk Profesional SEO
Berikut arti episode ini bagi praktik SEO Anda:
- Berhenti mengoptimalkan nama kelas : Kata kunci dalam kelas CSS tidak akan membantu peringkat Anda.
- Periksa elemen semu : Konten nyata apa pun, seperti teks yang dimaksudkan untuk dibaca, harus berada dalam HTML, bukan di
:beforeatau:after. - Audit ukuran stylesheet : File CSS yang besar dapat mengganggu kecepatan halaman dan Core Web Vitals. Pangkas sebisa mungkin.
- Pastikan CSS dapat dirayapi : Memblokir stylesheet dapat mengganggu rendering dan memengaruhi cara Google memahami halaman Anda.
Tim juga menekankan pentingnya penggunaan tag HTML yang tepat untuk gambar yang bermakna:
“Jika gambar merupakan bagian dari konten dan Anda seperti, ‘Lihat rumah yang baru saja saya beli ini,’ maka Anda memerlukan
imgtag gambar ataupicturetag yang benar-benar memuat gambar tersebut sebagai bagian dari DOM karena Anda ingin kami melihat seperti, ah, jadi halaman ini memuat gambar yang bukan sekadar hiasan.”
Gunakan CSS untuk gaya dan HTML untuk makna. Pemisahan ini bermanfaat bagi pengguna dan mesin pencari.
