How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5
Cara Memasang Breadcrumbs SEO Friendly pada Blog
Breadcrumbs merupakan salah satu elemen penting yang terdapat pada struktur elemen sebuah template; dimana keberadaan breadcrumbs tersebut sangat berpengaruh terhadap SEO tidaknya sebuah blog. Bisa dikatakan, salah satu elemen yang mampu meningkatkan performa blog Anda adalah dengan keberadaan breadcrumbs tesebut.
Yang tidak kalah pentingnya lagi, komponen breadcrumbs kali ini sudah valid html5. Dan setidaknya, hal itu pula yang menjadi nilai tambah selain SEO friendly.
Baca juga: Meta Tag SEO Friendly Valid HTML5
How to Install the Breadcrumbs SEO Friendly Blog
Sample How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5 |
Dalam kesempatan ini sedikit kami berikan sebuah metode langkah-langkah membuat beradcrumbs di dalam template blog. Bagaimana langkah-langkahnya? Berikut langkah demi langkah sata tuliskan dengan sederhana:
Mudah bukan? Jika ingin model berbeda, silakan lakukan tips berikutnya di bawah ini.
Demikian sekilas informasi mengenai How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5. Semoga bermanfaat.
1. Masuk akun blogger > pilih template > mode html
2. Silakan copas kode di bawah ini di bawah kode ]]></b:skin> atau </style>
/* Breadcrumbs */3. Silakan copas kode di bawah ini di atas kode <b:includable id='main' var='top'>...</b:includable> dengan kode berikut:
.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;}
<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 -->4. Save template
<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>
Mudah bukan? Jika ingin model berbeda, silakan lakukan tips berikutnya di bawah ini.
Breadcrumbs SEO Valid HTML5 Versi 2
Silakan lakukan langkah yang tidak jauh berbeda dengan langkah model pertama di atas:
1. Masuk akun blogger > pilih template > mode html
2. Silakan copas kode di bawah ini di bawah kode ]]></b:skin> atau </style>
Note:
Untuk melakukan test hasilnya, silakan uji dengan tools google https://developers.google.com/structured-data/testing-tool/
Read also: 2 Prioritas SEO Paling Penting di Tahun 2017 [Sering Diabaikan].breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#3F3F3F;border-bottom:1px dotted #828282;}3. Silakan ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini:
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>4. Save template.
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><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' 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'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archive 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'>Home</a></span> » <span>All Posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
Note:
Untuk melakukan test hasilnya, silakan uji dengan tools google https://developers.google.com/structured-data/testing-tool/
Demikian sekilas informasi mengenai How to Install the Breadcrumbs SEO Friendly Blog-Valid HTML5. Semoga bermanfaat.