Material-design-icons: Menggunakan kode ikon sebagai teks tidak optimal untuk SEO

Dibuat pada 10 Jan 2019 · 4Komentar · Sumber: google/material-design-icons

Mesin pencari saat mengindeks situs membaca semua konten. Dengan demikian, kode ikon dianggap oleh mereka sebagai bagian dari konten, yang berbahaya bagi promosi mesin telusur dan dapat dianggap oleh mesin telusur sebagai pengisian situs yang berlebihan dengan kata kunci.

gambar 1

photo_2019-01-10_17-03-51

gambar 2

photo_2019-01-10_17-17-58

Untuk mengatasi masalah ini, gunakan properti content dari gaya CSS:

.material-icons.mi-face:before {
  content: 'face';
}

Dengan demikian, kedua ejaan kode akan benar, tetapi dalam kasus kedua, ikon tidak akan diperhitungkan oleh mesin pencari sebagai konten:

<i class="material-icons">face</i>
<i class="material-icons mi-face"></i>

Awalan mi- dipilih karena penggunaan kode ikon sebagai kelas mungkin bertentangan dengan gaya lain yang digunakan di situs, dan awalan memberikan keunikan nama kelas.

Karena file gaya tambahan menempati ruang 63,7 Kb, koneksinya tidak wajib bagi mereka yang tidak membutuhkannya.

Contoh tanpa gaya tambahan:

<link href="material-icons.css" rel="stylesheet">

<i class="material-icons">face</i>
<i class="material-icons mi-face">face</i> <!-- not working -->

Contoh dengan gaya tambahan:

<link href="material-icons.css" rel="stylesheet">
<link href="material-icons-content.css" rel="stylesheet">

<i class="material-icons">face</i>
<i class="material-icons mi-face">face</i> <!-- working -->

Sumber

andrey-helldar

👍3

Komentar yang paling membantu

Bagaimana dengan ini?

<i class="material-icons" data-icon="face"></i>

.material-icons::before {
  content: attr(data-icon);
}

denunv pada 12 Apr 2019

👍7 ❤3

Semua 4 komentar

Bagaimana dengan ini?

<i class="material-icons" data-icon="face"></i>

.material-icons::before {
  content: attr(data-icon);
}

denunv pada 12 Apr 2019

👍7 ❤3

Anda dapat mencoba Iconify alih-alih font.

Ini menggunakan sintaks yang serupa, tetapi merender SVG alih-alih teks. Bagian terbaiknya adalah hanya memuat ikon yang digunakan pada halaman dan tersedia dengan banyak set ikon lainnya (FontAwesome, Templarian's MDI, beberapa set emoji), bukan hanya ikon desain material sehingga Anda dapat mencampur semuanya di halaman yang sama tanpa memuat font besar.

Tambahkan ini alih-alih menyertakan font:

<script src="https://code.iconify.design/1/1.0.0/iconify.min.js"></script>

Kemudian gunakan kode seperti ini untuk ikon:

<span class="iconify" data-icon="ic-face" data-inline="false"></span>

Melihat:

https://github.com/iconify-design/iconify (repositori GitHub untuk skrip Iconify)
https://iconify.design/icon-sets/ic/face.html (untuk ikon "wajah", tempat Anda dapat melihat penggunaan)

cyberalien pada 12 Apr 2019

@denunv , terima kasih!

Saya diperbarui PR #898

andrey-helldar pada 12 Apr 2019

👍1

@dunia maya ,
Apakah paket ini mengunggah file JS ke situs dan hanya itu?
Apakah itu tidak menyimpan salinan lokal dari file ikon?

Di Federasi Rusia, RosKomNadzor sering memblokir akses ke berbagai alamat IP, mencoba memblokir akses ke Telegram. Ini dapat menyebabkan tidak dapat diaksesnya server tujuan dengan ikon, jadi sangat penting untuk menyimpannya secara lokal di situs.
Paket bisa?

Saya pikir akan benar untuk mengajukan pertanyaan di repositori paket: iconify-design/iconify#2

andrey-helldar pada 12 Apr 2019

Apakah halaman ini membantu?

0 / 5 - 0 peringkat