Kembali ingin membahas soal breadcrumbs dan mengapa ia penting telah di jelaskan pada tulisan kami yang telah lalu yakni karena erat kaitannya dengan data terstruktur dan merupakan salah satu bagian terpenting dari SEO.
Anda dapat mengikuti cara pemasangan salah satu tipe breadcrumb yang telah kami posting melalui halaman ini, dengan judul:
1. Breadcrumb berbasis lokasi
Ia di pasang di dalam template menggunakan atribut HTML/XML dan pengaturan CSS untuk di tampilkan pada bagian atas postingan. Ia tampil secara visual berbentuk navigasi kedua dengan susunan hirarki pertama, kedua, ketiga dan seterusnya.
Cara memasangnya dapat kalian telusuri melalui halaman blog ini.
2. Breadcrumb berbasis Atribut
Jenis ini umumnya dipergunakan oleh situs situs e-commerce, breadcrumb menampilkan halaman terkini dengan atribut tertentu yang biasanya berasal dari halaman khusus yang sedang di kampanyekan (di iklankan)
Jadi jelas breadcrumb jenis ini berbeda tampilan visualnya dan juga penempatannya di halaman web. Jika breadcrumb pertama tampil di halaman personal, breadcrum atribut e-commerce dapat tampil di halaman web internet.
3. Breadcrumb tipe tersembunyi.
Hanya mesin pencari yang membacanya, dan halaman web yang menggunakannya tetap terstruktur rapi di mata mesin pencari, tipe ini justeru di anjurkan oleh Google terutama bagi kalian yang menyukai model halaman web yang tampil minimalis dan bersih.
Ya breadcrumb jenis ini kasat mata, tidak tampil secara visual namun ia tetap harus di tuliskan ke dalam template. Biasanya untuk blogspot ia dapat di letakan di bagian bawah kode <data:post.body/> .
Tipe ini menggunakan script Jason-LD schema.org yang valid. Contoh kode:
<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "<data:blog.homepageUrl.canonical/>" <b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'> { "@type": "ListItem", "position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>, "name": "<data:label.name/>", "item": "<data:label.url.canonical/>" <b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if> ] }</script>Saya senang dengan cara terakhir, terutama karena ia valid dan cocok di pasang ke dalam template template terbaru blogger seperti contempo, emporio, soho dan notable. Ia sangat membantu mesin pencari menampilkan poin poin tertentu dari halaman blog ke hadapan pemirsa.
Penutup
Ingat: Jejak breadcrumb di halaman adalah berguna untuk menunjukkan posisi halaman di hierarki situs, dan dapat membantu pengguna memahami dan menjelajahi situs secara efektif. Pengguna dapat melihat seluruh hierarki situs, setingkat demi setingkat, dengan memulai dari breadcrumb terakhir pada jejak breadcrumb tersebut.
Pada saat ini ada 4 jenis pendukung breadcrumb valid yang dapat di pergunakan (menurut Google):
contoh cara penggunaan:
<head>
<title>Pemenang Lomba</title>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Books",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Science Fiction",
"item": "https://example.com/books/sciencefiction"
},{
"@type": "ListItem",
"position": 3,
"name": "Award Winners"
}]
}
</script>
</head>
<body>
</body>
</html>
Contoh penggunaan:
<head>
<title>Pemenang Lomba</title>
</head>
<body>
<ol vocab="https://schema.org/" typeof="BreadcrumbList">
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/books">
<span property="name">Books</span></a>
<meta property="position" content="1">
</li>
›
<li property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage"
href="https://example.com/books/sciencefiction">
<span property="name">Science Fiction</span></a>
<meta property="position" content="2">
</li>
›
<li property="itemListElement" typeof="ListItem">
<span property="name">Award Winners</span>
<meta property="position" content="3">
</li>
</ol>
</body>
</html>
3. Microdata
Contoh penggunaan:
<html> <head>
<title>Pemenang Lomba</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://example.com/books/sciencefiction"
href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Award winners</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html>
4. HTML
Kita ternyata dapat juga mendukung breadcrumb menggunakan HTML, contohnya:<html>
<head>
<title>Pemenang Lomba</title>
</head>
<body>
<ol>
<li>
<a href="http://www.example.com/books">Books</a>
</li>
<li>
<a href="http://www.example.com/sciencefiction">Science Fiction</a>
</li>
<li>
Pemenang Lomba
</li>
</ol>
</body>
<title>Pemenang Lomba</title>
</head>
<body>
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemprop="item" href="https://example.com/books">
<span itemprop="name">Books</span></a>
<meta itemprop="position" content="1" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<a itemscope itemtype="https://schema.org/WebPage"
itemprop="item" itemid="https://example.com/books/sciencefiction"
href="https://example.com/books/sciencefiction">
<span itemprop="name">Science Fiction</span></a>
<meta itemprop="position" content="2" />
</li>
›
<li itemprop="itemListElement" itemscope
itemtype="https://schema.org/ListItem">
<span itemprop="name">Award winners</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</body>
</html>
4. HTML
Kita ternyata dapat juga mendukung breadcrumb menggunakan HTML, contohnya:<html>
<head>
<title>Pemenang Lomba</title>
</head>
<body>
<ol>
<li>
<a href="http://www.example.com/books">Books</a>
</li>
<li>
<a href="http://www.example.com/sciencefiction">Science Fiction</a>
</li>
<li>
Pemenang Lomba
</li>
</ol>
</body>
</html>
Jika ingin mengoptimalkan halaman blog di mata mesin pencari maka sangatlah tidak bijaksana mengabaikan pemasangan breadcrumb di halaman situs kita.
Sumber: Google Penelusuran.
Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!
Share: