Cara Mengatasi Masalah Breadcrumbs Pada Google Url Inspection
Blogger Google webmaster Internet TutorialBagaimana 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