Tambahkan Microdata ke modul remah roti (mod_breadcrumbs). “Breadcrumbs”: markup mikro dan dampaknya pada cuplikan halaman Micro-markup dari organisasi skema remah roti
Salam kenal teman. Hari ini adalah postingan peringatan 400 tahun di blog saya. Pada kesempatan kencan seperti ini, saya ingin sekali memberikan beberapa konten yang benar-benar bermanfaat agar menarik, bermanfaat dan relevan. Dan topik untuk artikel semacam itu muncul tiba-tiba - Saya ingin memahami pembentukan cuplikan yang indah dalam penelusuran, tetapi pada saat yang sama saya menggali dua topik lagi:
- memasang breadcrumbs di blog WordPress Anda (saya inginnya tanpa plugin agar tidak memuat situs),
- dan menyiapkan markup mikro (tanpanya, remah roti tidak ada gunanya).
Saya sudah lama mendengar dan membaca tentang remah roti, tetapi saya tidak begitu mengerti apa gunanya remah roti untuk blog biasa dengan struktur yang sederhana dan mudah dipahami. Nilailah sendiri, saya memiliki halaman utama, semua posting dibagi ke dalam kategori dan hanya itu. Artinya, jalur maksimal dari halaman beranda hingga artikel akhir adalah 2 klik. Setiap artikel memiliki link ke kategori yang dimilikinya, sehingga pengunjung tidak akan tersesat.
Lain halnya jika situsnya rumit dan strukturnya sedemikian rupa sehingga Anda dapat berjalan berputar-putar selama setengah jam dan tidak menemukan apa yang Anda cari. Jika Anda memiliki semacam toko online dengan lusinan kategori, yang masing-masing dibagi menjadi judul anak, satu per satu, lalu yang lain, dan kemudian setiap produk dibagi berdasarkan warna - di sini saya memahami pentingnya remah roti - the pengguna membutuhkannya sebagai elemen navigasi dan .
Ngomong-ngomong, nama “breadcrumbs” berasal dari sini; awalnya hanya navigasi di situs. Ingat dongeng “Hansel dan Gretel”, di mana anak-anak melemparkan potongan roti ke dalam perjalanan mereka agar nantinya dapat menemukan jalan kembali. Dalam dongeng, metode ini tidak banyak membantu mereka, tetapi untuk situs web, metode ini berguna.
Tampilan cuplikan di hasil penelusuranJadi, saya tidak mengerti gunanya gadget seperti itu untuk blog saya sampai saya menemukan arti kedua dari remah-remah - ternyata tidak hanya dilihat oleh orang, tetapi juga oleh mesin pencari. Dan mesin pencari melihatnya tidak hanya sebagai tautan internal yang memengaruhi tautan dan distribusi bobot halaman, tetapi juga sebagai elemen navigasi yang penting. Yandex dan Google menggunakan elemen ini untuk membuat cuplikan. Saya tidak ingin memberi tahu Anda lama-lama seperti apa, lebih baik melihatnya sekali dengan mata kepala sendiri:
Cuplikan adalah tampilan situs di hasil pencarian.
Semakin menarik cuplikannya, semakin tinggi rasio klik-tayangnya, yang langsung memberikan efek ganda:
- Lebih banyak klik berarti lebih banyak lalu lintas ke situs,
- Rasio klik-tayang suatu cuplikan mengacu pada faktor perilaku, dan semakin tinggi, semakin mudah sumber daya naik ke TOP untuk kueri yang diperlukan.
Satu-satunya hal yang tidak jelas bagi saya adalah bahwa tautan ini hanyalah remah roti, dan bukan yang lain. Setuju, halaman dari artikel blog mana pun berisi link lain ke kategori dan halaman utama (menu atas, kategori di sidebar, link ke kategori di blok dengan metadata artikel).
Bukan orangnya, dia tidak bisa melihat halamannya dan mengerti - tautan ini dari menu, ini dari teks artikel, dan ini adalah remah roti.
Saya harus menelusuri forum dan membaca banyak blog. Dalam kebanyakan kasus, mereka hanya menulis tentang fakta bahwa remah-remah diperlukan dan mereka meningkatkan kegunaan dan cuplikan, lalu mereka menulis instruksi untuk menyiapkan plugin Breadcrumb NavXT (Breadcrumb adalah remah roti dalam bahasa Inggris) atau memberikan kode implementasi tanpa plugin - dan itu saja. Saya mendapat kesan bahwa sebagian besar webmaster tidak tahu cara bekerja dengan benar dengan elemen ini dan menganggapnya hanya sebagai elemen tautan halaman internal.
Hasil Google menunjukkan bahwa tidak lebih dari 10% situs memiliki remah roti yang benar, sisanya bekerja dengan cara lama, menampilkan URL halaman dalam cuplikan.
Penandaan mikro pada remah rotiSaya tidak terlalu malas, melakukan pencarian, menganalisis bagaimana Breadcrumb dibuat di berbagai situs dan bagaimana situs-situs tersebut terlihat dalam pencarian. Teori saya ternyata benar:
- Ada remah-remah di situs - tidak ada markup mikro - cuplikan biasa dengan URL.
- Ada remah-remah - ada markup mikro - cuplikan yang ditingkatkan.
Saya menggali semua yang saya butuhkan dan hari ini saya akan memberi tahu Anda tentang remah roti dari A hingga Z. Secara teknis, menempatkannya di situs bukanlah setengah dari perjuangan – ini 10%. Fitur utama yang akan membawa manfaat nyata adalah micro markup.
Manfaat utamanya bukan pada remah roti, tetapi pada markup mikro yang benar untuk cuplikan.
Saya mengenal micromarking sebagai sebuah konsep beberapa bulan yang lalu. Saya tidak mengerti banyak saat itu, tetapi saya mencoba menyiapkan elemen dasar untuk artikel dan komentar. Beberapa blogger menulis bahwa ini hampir merupakan tombol ajaib yang mendorong situs ke TOP (kebanyakan siswa sekolah blogger Alexander Borisov) - Saya tidak tahu mengapa mereka memutuskan demikian. Hal ini langsung tampak meragukan bagi saya, tetapi sekarang saya dapat mengatakan dengan pasti - dalam 2 bulan setelah memiliki markup mikro di situs saya, saya tidak melihat adanya pergerakan nyata dalam hasil pencarian untuk kueri yang dipromosikan.
Dalam hal menandai remah roti, situasinya akan berbeda; kami tidak akan menunggu pergerakan apa pun dalam hasil penelusuran organik, tetapi kami akan mengandalkan apa yang saya katakan di atas - peningkatan dalam kemampuan klik cuplikan dan roti yang sesuai (pertumbuhan karena untuk faktor perilaku).
Breadcrumbs di WordPress tanpa pluginJadi kita telah beralih dari percakapan “mengapa dan untuk apa” ke percakapan “bagaimana melakukannya”. Saya segera membuang plugin Breadcrumb NavXT, karena tidak masuk akal untuk "memerlukan modifikasi dengan file", dan plugin itu sendiri tidak tahu cara melakukan markup mikro. Ada pilihan lain - plugin WordPress SEO SEO by Yoast, juga bisa membuat remah roti, tapi saya tidak punya keinginan untuk mengubahnya. Satu-satunya pilihan yang tersisa adalah menggunakan skrip atau fungsi.
Jika Anda memutuskan untuk menginstal remah roti di WordPress, lakukan tanpa plugin - situs akan lebih sedikit dimuat dan akan ada lebih banyak peluang untuk mengadaptasi kode.
Langkah 1. Fungsi wp_zhilin_krohiKarena saya baru mulai mempelajari dasar-dasar PHP, saya menjadi tertarik untuk membuat sendiri sebuah fungsi yang dapat menampilkan breadcrumbs di blog saya. Secara intuitif, saya melihat bahwa seharusnya tidak ada masalah, karena semua elemen remah sudah ditampilkan di template, Anda hanya perlu mengambilnya dan mengatur tautan yang diperlukan seperti yang diharapkan.
Ke depan, saya akan mengatakan bahwa saya mampu membuat fungsi paling ringkas (baca ringan dan cepat) yang pernah saya temukan di situs lain.
Versi pertama kode tersebut ternyata cepat, tetapi saya tidak memperhitungkan satu hal - kode tersebut seharusnya tidak hanya menampilkan tautan ke situs, tetapi juga berisi markup mikro, tetapi ada penyergapan dengannya - kode saya diulangi kesalahan banyak webmaster - karena penerapan keluaran standar, mendistribusikan tautan ke elemen untuk menyematkan markup tidak berfungsi.
Saya harus memulai dari awal lagi, mengandalkan fungsi WordPress PHP yang lebih sederhana (tetapi saya mempelajari sesuatu yang baru). Hasilnya adalah fungsi wp_zhilin_krohi (pertama kali saya menamai fungsi dengan nama saya sendiri - bagus), yang menampilkan remah roti pada halaman artikel dan halaman kategori. Semua kategori induk (tidak peduli berapa banyak jumlahnya) secara otomatis diperhitungkan dan setiap elemen dibungkus dalam markup mikro.
Untuk artikel, remah-remahnya terlihat seperti:
Beranda > Judul Induk (bila ada) > Kategori > Artikel
Beranda > Kategori Induk (jika ada) > Kategori >
Saya khawatir judul artikel di remah roti akan menyebabkan spamming pada halaman dengan kata kunci. Saya mengajukan permintaan tentang hal ini ke dukungan teknis Yandex, sebagai tanggapan mereka menulis bahwa jika ini tidak ditujukan untuk menipu mesin pencari, maka tidak boleh ada sanksi, tetapi sanksi tersebut diperhitungkan. Inilah jawabannya:
Jadi, jika menurut Anda pengulangan judul artikel yang tidak perlu akan mengganggu Anda, hapus baris 17 hingga 20.
Ini fungsinya sendiri, Anda perlu menambahkannya ke file fungsi.php tema Anda, sebelum menutupnya?> (ini dilakukan langsung melalui panel admin, Anda bahkan tidak memerlukan klien FTP):
/*** Remah dengan markup mikro ***/ function wp_zhilin_krohi() ( if (!is_home()) ( echo "Home" "; ) if (is_category() || is_single()) ( $cats = get_the_category() ; foreach ($kucing sebagai $kucing) ( echo "term_id)."" >" .$cat->nama." " " ) ) if(is_single()) ( the_title(); ) );
Markup mikro segera dimasukkan ke dalam kode fungsi dan secara otomatis ditampilkan bersama setiap tautan.
Langkah 2. Menampilkan fungsi pada halamanAgar rangkaian tautan yang kami buat muncul di halaman, Anda perlu membuka file tema WordPress Anda, yang bertanggung jawab untuk jenis halaman yang sesuai, dan memasukkan ke dalamnya kode yang memanggil fungsi:
Minimal, Anda memerlukan file single.php (menampilkan posting) - hampir selalu disebut sama, dan kemudian tergantung pada templatnya, di suatu tempat halaman kategori ditampilkan melalui archive.php, di suatu tempat melalui index.php - Anda akan menemukan yang Anda butuhkan.
Dalam file ini Anda perlu menemukan tempat di mana Anda ingin melihat remah-remahnya. Mereka biasanya ditempatkan di bagian atas situs (sebelum judul postingan) sebagai elemen navigasi. Cari potongan kode ini - php the_title, dan masukkan output fungsi di depannya (lihat desain yang sesuai).
Breadcrumb tidak selalu ditempatkan di bagian atas halaman; ada pengecualian. Katakanlah Anda hanya membutuhkannya untuk menampilkan cuplikan, lalu Anda dapat menempatkannya di ruang bawah tanah - mesin pencari akan melihat markup mikro di sana. Opsi ini diterapkan di blog Sergei Sosnovsky - ia memiliki blok terpisah di bagian atas untuk pengguna, tetapi tidak memiliki markup mikro, dan remah roti dengan markup mikro ditampilkan di footer (meskipun saya tidak begitu mengerti mengapa ):
Tampilan elemen halaman apa pun harus selaras dengan desain situs Anda, oleh karena itu, tidak ada solusi tunggal untuk setiap blog.
Saya mengatur hal yang sama pada sumber daya saya - saya mengurangi font remah roti dibandingkan dengan konten utama. Untuk melakukan ini, saya bahkan tidak membuat gaya terpisah di file style.css, tetapi menyertakan fungsi dalam wadah div dan menentukan satu parameter di dalamnya - ukuran font (Anda mungkin telah memperhatikannya pada tangkapan layar di atas):
Semua karakteristik runut tautan lainnya diwarisi dari gaya tema. Untuk membuat tambahan kecil (mengubah font, warna teks, dll.), tentukan properti yang diperlukan dalam wadah yang sama.
Jika Anda ingin mengubah secara radikal desain rantai tautan yang ditampilkan (membuat beberapa gambar atau tombol), maka tetapkan kelas khusus, misalnya, seperti ini - lalu untuk kelas ini, buat blok terpisah di style.css dan tentukan semua parameter yang diperlukan.
Di sinilah pengetahuan Anda tentang CSS cascading style sheet dan bakat desain akan berguna (jika Anda mendesain sendiri).
Memeriksa markup mikro remah rotiSetelah Anda melakukan semuanya, pastikan untuk memeriksa pengoperasian markup mikro yang benar di validator khusus Yandex dan Google, Anda tidak pernah tahu, beberapa bug akan muncul:
webmaster.yandex.ru/microtest.xmldeveloper.google.com/structured-data/testing-tool/ (45 suara, rata-rata: 4,7 dari 5)Halo semuanya, hari ini kami akan mendefinisikan set minimum dan contoh penerapan markup mikro pada remah roti, artikel, dan produk untuk situs komersial dan informasi. Teknologinya sendiri bukan lagi hal baru, namun keragaman atributnya dapat membingungkan, oleh karena itu dalam artikel ini saya akan mencoba menyoroti beberapa solusi khas dan terbukti yang dapat segera diterapkan dengan aman.
Seluruh topik mikroformat tidak dapat dibahas dalam satu artikel, oleh karena itu, seperti yang dibahas di materi lain, saya akan merujuknya. Selain itu, Anda selalu dapat mempelajarinya Pembuat markup mikro Google.
Penandaan mikro pada remah rotiNah, ini adalah genre klasik yang wajib ada di setiap situs. Misalnya, untuk sebuah halaman tampilannya seperti ini:
//tingkat 1: halaman utama
blog SEO Pingo
//tingkat 2: kategori
Untuk pemula
//tingkat 3: materi akhir
Jenis permintaan pencarian
Jadi apa yang kita lihat di sini? Pertama, setiap level remah roti adalah elemen yang terpisah, sebuah level, dan hanya urutannya yang berperan di sini. Kedua, setiap elemen (kecuali yang terakhir) disarangkan tiga kali:
Elemen terakhir juga dapat memiliki atribut url, tetapi menurut saya tidak diperlukan - mengapa halaman tersebut mengarah ke dirinya sendiri di remah roti?
Atribut dapat digunakan bersama dengan tag apa pun - hanya urutan dan tingkat penyusunannya yang penting. Misalnya:
Untuk pemula
Pengenalan remah roti markup mikro ke situs membantu mesin pencari menampilkan remah roti yang “dapat dibaca” dalam cuplikan (yang lumayan), dan juga lebih memahami struktur situs.
Markup artikelMarkup mikro jenis ini ditujukan untuk artikel dan materi informasi lainnya, baik di situs komersial maupun reguler. Misalnya, halaman yang Anda baca memiliki struktur berikut:
//Deklarasikan nama elemen
//Definisi atribut “Tanggal publikasi”.
Daya saing permintaan pencarian
//Mendefinisikan atribut “Nama Publikasi”.
Isi artikel. //Definisi atribut “Isi Artikel”.
Perkiraan rata-rata aritmatika
Nilai peringkat maksimum
Nilai peringkat minimum
Jumlah peringkat
Semuanya di sini sama dengan remah roti, kecuali yang berikut ini:
- Atribut Tanggal Publikasi harus ditentukan dalam format ISO-8601 dalam bentuk YYYY-MM-DDTHH:MM, dimana T hanya karakter, YYYY adalah tahun, MM adalah bulan, DD adalah tanggal, HH adalah jam , dan MM adalah menitnya.
- Saat menentukan atribut "Kategori Publikasi" dan "Nama Publikasi", sama sekali tidak menakutkan bahwa tautan tersebut juga termasuk dalam area nilai - robot hanya akan mengeluarkan data yang sesuai dengan nilai yang diharapkan untuk atribut tersebut.
Pengenalan markup artikel membantu robot pencari untuk lebih memahami dan mengklasifikasikan isi materi informasi. Selain itu, jika informasinya unik, pada akhirnya akan ditambahkan ke database Google.
Barang berukuran mikro (produk atau jasa)Jenis mikroformat ini sangat diperlukan untuk halaman yang menjelaskan barang dan jasa:
//Deklarasikan elemennya
Gajah merah muda //Menentukan nama produk atau jasa
Gajah yang bagus. //Mendefinisikan deskripsi produk atau layanan
//Deklarasikan subtipe “Penawaran”
//Menentukan biaya produk atau layanan
//Tentukan mata uang harga produk atau layanan
Perkiraan rata-rata aritmatika
Nilai peringkat maksimum
Nilai peringkat minimum
Jumlah peringkat
Hal yang sama - robot pencari segera melihat apa yang ada di halaman dan di mana lokasinya serta mengapa diperlukan. Hasil visualnya mungkin berupa peningkatan daya tarik cuplikan di SERP.
Breadcrumbs (remah roti atau breadcrumbs) adalah elemen antarmuka situs web, yang tujuan utamanya adalah untuk menunjukkan jalur dari halaman utama ke tempat pengguna berada saat ini. Tentu saja, hal ini dilakukan terutama untuk kenyamanan pengguna tetap berada di situs, sehingga memudahkan pemahaman tentang struktur virtual. Kepedulian terhadap kenyamanan pengguna adalah salah satu misi rahasia yang memenuhi ratusan pemikiran kegunaan: semua orang ingin membuat antarmuka lebih nyaman, tidak terkecuali mesin pencari. Mari kita bahas tentang markup mikro remah roti untuk memvisualisasikan tautan di hasil penelusuran Google.
Untuk lebih jelasnya, berikut adalah contoh visual menampilkan hasil pencarian tanpa dan dengan markup mikro:
1. Pada entri pertama, tautan di bawah judul ditampilkan seperti biasa, dan, biasanya, tidak sepenuhnya dapat dibaca oleh rata-rata pengguna.
2. Pada entri kedua, semuanya berbeda, tautannya tidak terlihat di sana, tetapi ada remah roti yang sama yang menampilkan struktur logis dari lokasi elemen yang ditemukan. Opsi kedua terlihat lebih konstruktif, mari kita lihat cara memasangnya di situs web Anda.
Keajaiban ini dicapai melalui penggunaan data mikro di remah roti. Bayangkan kita memiliki struktur ini di situs:
Beranda – Sistem operasi – FreeBSD
Setiap item memiliki jalurnya sendiri, dan hadir dalam rantai navigasi sebagai tautan. Selain itu, tautan diapit oleh tag, misalnya div, atribut tag disetel:
Itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
Anda akan mendapatkan blok untuk item tersebut:
...
Blok ini berisi link dan nama elemen. Untuk tautan, atribut itemprop=”url” disetel, judul juga diapit dalam tag span terpisah, dan atribut itemprop=”title” disetel. Hasilnya, elemen terpisah dalam rantai akan disetrika seperti ini:
