Cara Memasang Breadcrumb SEO Friendly dan Valid HTML5
Jumat, 23 Juli 2021
Tulis Komentar
 |
| Breadcrumb SEO Friendly dan Valid HTML5 |
Rezapedia.com - Breadcrumb merupakan menu navigasi pada blog yang dapat membantu pengunjung untuk memahami lokasi mereka saat berada dalam sebuah situs. Dengan kata lain, breadcrumb ini menyempurnakan navigasi seperti halaman utama, label, tag, dan sebagainya. Maka dari itu, Breadcrumb sangatlah penting karena dapat mendukung SEO blog kalian.
Dengan memasang breadcrumb yang SEO Friendly di Blog kalian merupakan salah satu cara lain untuk mengoptimasi sebuah blog. Kebanyakan para blogger pemula mengabaikan hal seperti ini dan lebih fokus untuk menggonta-ganti template dengan tampilan yang wah.
Nah, agar blog kalian lebih SEO, mimin mau bagikan nih tips cara membuat/memasang breadcrumb yang SEO Friendly dan Valid HTML5, berikut cara-cara nya.
Cara Membuat Breadcrumb SEO Friendly dan Valid HTML5
Pertama, kalian buka Blogger >> Tema >> Edit HTML >> Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>.
/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}Kemudian untuk langkah selanjutnya, cari kode HTML post seperti dibawah ini.
<b:includable id='main' var='top'>...</b:includable>Lalu tambahkan kode HTML breadcrumbs ini tepat di bawah kode HTML post tadi
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?max-results=5"' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>Jika sudah kalian bisa klik Simpan.
Baca juga: Cara Membuat Sitemap Blog yang Responsive
Terima kasih telah membaca artikel Cara Membuat Breadcrumbs SEO Friendly dan Valid HTML5, Semoga tutorial yang mimin bagikan ini dapat membantu untuk memasang breadcrumb SEO friendly pada blog kalian. Jika ada pertanyaan terkait artikel ini, silahkan komen dibawah ya :).
Jangan lupa untuk cek artikel menarik lainnya hanya di rezapedia.com!
Belum ada Komentar untuk "Cara Memasang Breadcrumb SEO Friendly dan Valid HTML5"
Posting Komentar