Custom Breadcrumb Blogger di Materia X2
Pengantar
Saya melewati hari-hari dalam blogging, dan banyak menggunakan Template Premium dari pengembang. Saya sejak lama terfokus pada bagaimana membangun halaman Blogger, yang lebih menarik, baik dari sisi SEO, maupun dari UX.
Dalam kasus ini, fokus saya terhadap Breadcrumb. Karena, Breadcrumb adalah salah satu bagian, yang dapat dioptimalkan untuk SEO.
Sebenarnya, ini adalah catatan saya terhadap Blogger, yang menurut Saya titik kelemahan bila dibandingkan dengan CMS lain. Kita bisa lihat dengan WordPress, yang dapat menyusun halaman berdasarkan kategori dan bahkan Slug bisa menyesuaikan lebih rapi: domain.com/kategori/kategori-satu/url-postingan. Sedangkan Blogger, senantiasa menggunakan tahun dan bulan sebagai slugnya. Saya tahu, tidak ada jalan keluar untuk itu.
WordPress menggunakan Kategori, yang dapat diatur sesuai keinginan untuk level tingkatannya. Sedangkan Blogger, hanya tersedia Label, yang secara otomatis mengurutkan Abjad. Misalnya: Kita memiliki 2 label dengan maksud untuk menyusun struktur halaman. Andaikan saja kita memiliki label: SEO dan Blogger. Breadcrumb yang ditampilkan di halaman, akan disesuaikan dengan abjad menjadi: Blogger > SEO. Begitu jugalah Breadcrumb yang akan ditampilkan dalam hasil pencarian Google.
Faktanya, semua template premium yang pernah dicoba, memanfaatkan Label untuk Breadcrumb, dan disinilah titik yang Saya lakukan percobaan, dan berhasil.
Hasilnya: Saya mendapatkan struktur halaman Breadcrumb lebih terorganisir, dan hasil pencarian di Google, ditampilkan lebih relevan dengan UX.
Bagaimana Cara Saya Menerapkannya?
Sekarang, Saya akan beritahukan, tentang bagaimana saya melakukan percobaan dan menerapkan itu semua. Tetapi pada postingan ini, dikhususkan pada template Materia X2. Berikut langkah-langkahnya:
#1. Ganti Kode Breadcrumb HTML
Langkah-langkahnya:
-
Cari sumber kode ini, dan hapus:
<b:comment>Item: Breadcrumb</b:comment> <b:if cond='data:view.isPost and data:skin.vars.optionItemBreadcrumb == "2px"'> <nav class='mb-2 flex w-full flex-row items-center justify-start text-sm'> <a class='font-bold text-colorItemBreadcrumb hover:text-colorItemBreadcrumbHover dark:text-colorDarkMeta dark:hover:text-colorDarkKey' expr:href='data:blog.homepageUrl'><data:messages.home/></a> <b:if cond='data:post.labels'> <span class='mx-2 text-colorItemBreadcrumb dark:text-colorDarkMeta'>/</span> <a class='breadcrumb_label text-colorItemBreadcrumb hover:text-colorItemBreadcrumbHover dark:text-colorDarkMeta dark:hover:text-colorDarkKey' expr:href='data:post.labels.first.url'><data:post.labels.first.name/></a> </b:if> </nav> </b:if>Untuk memudahkan mencarinya, silahkan cari dulu komentar ini:
<b:comment>Item: Breadcrumb</b:comment>, hapus semua kode yang ada pada tag<b:if>. -
Ganti semua kode di dalamnya, dengan ini:
<b:comment>Item: Breadcrumb - rezalubis.com</b:comment> <b:if cond='data:view.isPost and data:skin.vars.optionItemBreadcrumb == "2px"'> <b:if cond='data:post.body contains "<nav class=\"custom-breadcrumb\""'> <style> .post-body nav.custom-breadcrumb, article nav.custom-breadcrumb, .entry-content nav.custom-breadcrumb, [class*='post'] nav.custom-breadcrumb { display: none !important; visibility: hidden !important; position: absolute !important; left: -9999px !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } #customBreadcrumbContainer nav.custom-breadcrumb { display: flex !important; position: static !important; left: auto !important; visibility: visible !important; height: auto !important; width: 100% !important; margin-bottom: 0.5rem !important; flex-direction: row; align-items: center; justify-content: flex-start; font-size: 0.875rem; } #customBreadcrumbContainer .custom-breadcrumb a { color: var(--colorItemBreadcrumb); font-weight: bold; text-decoration: none; } #customBreadcrumbContainer .custom-breadcrumb a:hover { color: var(--colorItemBreadcrumbHover); } #customBreadcrumbContainer .custom-breadcrumb .separator { margin: 0 0.5rem; color: var(--colorItemBreadcrumb); } .dark #customBreadcrumbContainer .custom-breadcrumb a { color: var(--colorDarkMeta); } .dark #customBreadcrumbContainer .custom-breadcrumb a:hover { color: var(--colorDarkKey); } .dark #customBreadcrumbContainer .custom-breadcrumb .separator { color: var(--colorDarkMeta); } </style> <div class='breadcrumb-container mb-2' id='customBreadcrumbContainer'/> <script> //<![CDATA[ function moveBreadcrumb() { var container = document.getElementById('customBreadcrumbContainer'); if (!container) return; var selectors = [ '.post-body nav.custom-breadcrumb', 'article nav.custom-breadcrumb', '.entry-content nav.custom-breadcrumb', '[class*="post"] nav.custom-breadcrumb', 'nav.custom-breadcrumb' ]; var customBreadcrumb = null; for (var i = 0; i < selectors.length; i++) { customBreadcrumb = document.querySelector(selectors[i]); if (customBreadcrumb) break; } if (customBreadcrumb && !container.hasChildNodes()) { container.appendChild(customBreadcrumb); console.log('Breadcrumb berhasil dipindahkan'); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', moveBreadcrumb); } else { moveBreadcrumb(); } setTimeout(moveBreadcrumb, 100); setTimeout(moveBreadcrumb, 500); //]]> </script> <b:else/> <nav class='mb-2 flex w-full flex-row items-center justify-start text-sm'> <a class='font-bold text-colorItemBreadcrumb hover:text-colorItemBreadcrumbHover dark:text-colorDarkMeta dark:hover:text-colorDarkKey' expr:href='data:blog.homepageUrl'><data:messages.home/></a> <b:if cond='data:post.labels'> <span class='mx-2 text-colorItemBreadcrumb dark:text-colorDarkMeta'>/</span> <a class='breadcrumb_label text-colorItemBreadcrumb hover:text-colorItemBreadcrumbHover dark:text-colorDarkMeta dark:hover:text-colorDarkKey' expr:href='data:post.labels.first.url'><data:post.labels.first.name/></a> </b:if> </nav> </b:if> </b:if>Pastikan posisinya, berada di atas dari komentar <b:comment>Post Title</b:comment>, agar berada ditempat yang tepat.
#2. Ubah JSON untuk Schema SEO
Sebagai upada penguatan SEO, template ini sebenarnya sudah menyiapkan JSON. Jadi, ini benar-benar membantu untuk interpretasi Schema dan sangat penting untuk SEO. Tetapi, karena sebelumnya kita mengubah kode, maka Breadcrumb akan menjadi 2. Oleh karenanya, kita harus membuat kode baru, agar lebih rapi dan tidak ada data ganda.
Sekarang, agar halaman tetap SEO, kita perlu menyesuaikan Schema JSON yang ada. Berikut langkahnya:
- Temukan kode ini:
<b:tag name='script' type="application/ld+json"><b:if cond='data:view.isSingleItem'>[</b:if>{"@context":"http://schema.org","@type":"BlogPosting","headline":"<data:post.title.jsonEscaped/>","description":"<b:eval expr='data:blog.metaDescription ? data:blog.metaDescription.escaped : data:view.description.escaped'/>","articleBody":"<b:eval expr='(data:post.body snippet {length: 150, links: false, linebreaks: false, ellipsis: true}).jsonEscaped'/>300","datePublished":"<data:post.date.iso8601.jsonEscaped/>","dateModified":"<data:post.lastUpdated.iso8601.jsonEscaped/>","inLanguage":"<data:blog.locale/>","keywords":"<b:eval expr="data:post.labels ? data:post.labels.first.name : data:messages.home" />, <data:post.title.jsonEscaped/>","mainEntityOfPage":{"@type":"WebPage","@id":"<data:post.url.canonical.jsonEscaped/>"},"image":{"@type":"ImageObject","url":"<b:eval expr='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200"'/>","height":630,"width":1200},"publisher":{"@type":"Organization","name":"<data:blog.title.jsonEscaped/>"},"author":{"@type":"Person","url":"<data:post.url.canonical.jsonEscaped/>","name":"<data:post.author.name.jsonEscaped/>"}}<b:if cond='data:view.isSingleItem'>,{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"<data:messages.home/>","item":"<data:blog.homepageUrl.jsonEscaped/>"},{"@type":"ListItem","position":2,"name":"<b:eval expr="data:post.labels ? data:post.labels.first.name : data:messages.home" />","item":"<b:eval expr="data:post.labels ? data:post.labels.first.url.canonical : data:blog.homepageUrl.canonical" />"},{"@type":"ListItem","position":3,"name":"<data:post.title.jsonEscaped/>","item":"<data:post.url.canonical.jsonEscaped/>"}]}]</b:if></b:tag> - Selanjutnya, hapus semua kode dan ubah menjadi ini:
<b:tag name='script' type='application/ld+json'><b:if cond='data:view.isSingleItem'>[</b:if>{"@context":"http://schema.org","@type":"BlogPosting","headline":"<data:post.title.jsonEscaped/>","description":"<b:eval expr='data:blog.metaDescription ? data:blog.metaDescription.escaped : data:view.description.escaped'/>","articleBody":"<b:eval expr='(data:post.body snippet {length: 150, links: false, linebreaks: false, ellipsis: true}).jsonEscaped'/>300","datePublished":"<data:post.date.iso8601.jsonEscaped/>","dateModified":"<data:post.lastUpdated.iso8601.jsonEscaped/>","inLanguage":"<data:blog.locale/>","keywords":"<b:eval expr='data:post.labels ? data:post.labels.first.name : data:messages.home'/>, <data:post.title.jsonEscaped/>","mainEntityOfPage":{"@type":"WebPage","@id":"<data:post.url.canonical.jsonEscaped/>"},"image":{"@type":"ImageObject","url":"<b:eval expr='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200"'/>","height":630,"width":1200},"publisher":{"@type":"Organization","name":"<data:blog.title.jsonEscaped/>"},"author":{"@type":"Person","url":"<data:post.url.canonical.jsonEscaped/>","name":"<data:post.author.name.jsonEscaped/>"}}<b:if cond='data:view.isSingleItem'><b:if cond='data:post.body not contains "<nav class=\"custom-breadcrumb\""'>,{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"<data:messages.home/>","item":"<data:blog.homepageUrl.jsonEscaped/>"},{"@type":"ListItem","position":2,"name":"<b:eval expr='data:post.labels ? data:post.labels.first.name : data:messages.home'/>","item":"<b:eval expr='data:post.labels ? data:post.labels.first.url.canonical : data:blog.homepageUrl.canonical'/>"},{"@type":"ListItem","position":3,"name":"<data:post.title.jsonEscaped/>","item":"<data:post.url.canonical.jsonEscaped/>"}]}</b:if>]</b:if></b:tag>Kode JSON yang baru ini, akan membuat sesuatu yang berharga. Jadi, kita menerapkan 2 kondisi, dimana ketika Breadcrumb Custom digunakan, maka Schema akan menghasilkannya. Sebaliknya, bila tidak digunakan, maka default (mengambil data dari label) akan dijalankan. Jadi, setiap postingan akan berisi Schema, sesuai dengan kondisi itu.