Bagaimana cara mengatasi atau membaiki masalah breadcrumbs pada google search
console (Google Webmaster) khususnya untuk pengguna Blogger. Error ini
terkesan apabila kita membuat submit url post ke google url inspection dan
melihatnya melalui Live Test. Masalah ini confirm berlaku kepada mereka yang
menggunakan custom templates kerana sejak akhir-akhir ini. Google search
console semakin di inprove ke tahap yang lebih baik dan terperinci.
Tutorial langkah-langkah Mengatasi Masalah error Breadcrumbs Pada Google
Url Inspection:
Jika anda tidak faham, anda boleh semak video dibawah ini untuk lebih detail
untuk Cara Mengatasi Masalah Breadcrumbs Pada Google Url Inspection.
##VIDEO
Pertama, buka halaman blogger ⇾ Tema ⇾ Edit HTML ⇾ Paste kode dibawah ini
tepat diatas kode <b:includable id='comment-form' var='post'>
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a class='homebread' expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'>
<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
</svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + "?&max-results=16"' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'>
<data:label.name/>
</span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != "true"'>
<svg viewBox='0 0 24 24'>
<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
</svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'>
<path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/>
</svg>
<span>
<data:post.title/>
</span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
Selepas itu, copy kode CSS dibawah ini dan paste sebelum kode
</head>
<style type='text/css'>
/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#222;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#222}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#222}
.homebread{margin:0 2px 0 0}
</style>
Seterusnya, tambahkan copy dan paste kode ini tepat di bawah kode
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Seterusnya, klik Save Theme dan selesai. Sekarang pergi ke Google webmaster ⇾ Breadcrumb ⇾ klik pada bahagian tulisan error ⇾ klik button
Validate Fix
Sekarang, anda hanya perlu tunggu email dalam beberapa hari untuk proses kemaskini daripada Google Webmaster. Demikianlah cara Mengatasi Masalah Breadcrumbs Pada Google Url Inspection. Jika anda mempunyai sebarang penambahan, persoalan dan lain-lain mengenai masalah breadcrumbs ini. Sila tinggalkan ulasan anda pada ruangan komen dibawah sini. Terima kasih!
.png)
