Cara Membuat Breadcrumb Seo Friendly

Breadcrumb Seo Friendly- sebelumnya saya sudah menjelaskan Cara agar blog valid html5 dengan cara itu blog sobat sudah menunjukkan valid html5 tetapi hanya mencakup halaman homepage saja tidak dengan halaman posting, menurut petinggi webmaster semakin valid html5 semakin nyaman juga google search merayapi blog kita yang bisa membuat blog kita berada dihalaman utama pencarian google .

Berikut Cara Membuat Breadcrumb Seo Friendly

Langkah 1 : Simpan code dibawah tepat diatas ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- 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'>
  &#187; <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>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed 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'/>

Jika kalian sudah menerapkan breadcrumb sebelumnya , ikuti cara berikut
Cari code seperti ini

<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span> 

Ganti dengan code ini

<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'>
  &#187; <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>

Semoga bermanfaat

Sumber

Read More

CARA MEMBUAT BLOG VALIDATED HTML5

Dulunya saya males banget otak atik HTML5 kirain cuman hiasan doang setelah perkembangan dari masa ke masa ternyata HTML5 bergantung juga dengan seo . semakin valid HTML5 semakin juga seo kita .
Pasalnya jika blog kita 100% valid HTML5 otomatis blog kita ramah terhadap web browser, serach engine dan juga pengunjung. maka dari itu kita wajib menerapkan HTML5 di blog kesayangan kita

Kelebihan HTML5

• Membantu Search Engine meng-indeks dokumen website/blog lebih baik.
• DOCUMENT OBJECT MODEL (DOM) lebih stabil dan konsisten
• Future Proof, yang berarti HTML lebih kompatible, backward compatible terhadap browser terbaru.
• Mengetahui kondisi website/blog lebih detail ( link-link broken, link mati, dst.)
• Lebih disukai browser-browser dan tentu masih banyak lagi keuntungan lain dari validasi HTML ini
• Render browser lebih baik dan lebih cepat

Terus gimana cara cek blog kita valid atau tidaknya, coba aja KESINI atau  DISINI | CONTOH BLOG YANG SUDAH VALID

CARA MEMBUAT BLOG VALID HTML5

Langkah 1 : Backup template sebelum melakukan editing.
Langkah 2 : Cari kode seperti ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

ganti dengan :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

Langkah 3 : Ganti kode </html> dengan </HTML> (paling bawah di template)
Langkah 4 : ganti kode ini :

<b:include data='blog' name='all-head-content'/>

dengan kode di bawah ini :

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - &quot; + data:blog.title' name='description'/>
</b:if>
</b:if>

Langkah 5 : Ganti <b:skin><![CDATA[ dengan kode dibawah :

<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/]]
<style>

Langkah 6 : Hapus semua kode ini :

<b:include name='quickedit'/>

Setiap kali menambahkan widget baru, hapus kode di atas.
Langkah 7: Hapus semua kode ini (opsional)

<a expr:name='data:post.id'/>

Langkah 8 : hapus kode seperti ini :

<b:include data='post' name='postQuickEdit'/>

atau seperti ini :

<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

Langkah 9 : Hapus kode dibawah ini (kalau ditemukan, kalau tidak ada, lewati saja)

<div class='post-share-buttons goog-inline-block'>...sampai...</div>

Langkah 10 : Ganti semua code & dengan &

Sampai di sini, template sobat sudah bisa Valid HTML5 untuk Homepage. Akan tetapi pada postingan masih banyak error karena komentar blogger (kecuali komentar hack seperti blog ini). Mudah-mudahan saya bisa share cara mem-fix-an postingan.

Harap Diperhatikan

Kemungkinan dengan langkah-langkah di atas, blog sobat belum valid. Supaya menjadi 100%, silahkan perhatikan beberapa hal dibawah ini :

1. Selalu gunakan tag alt pada gambar, contoh :

<img alt="HTML5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDv7n-1-7GlKsP53UQtt655ep7uDmFdGXYBC5lKvG-E9BILF0xG_EwBea7ngcosp21pUVX0iLldADFqj2n4PtSMKsR-2jW96wQ2nSw19wOIDUcPPl0grQdZAqhYeaJKsKgxXZWgHoE1M/s1600/html5.png" />

2. Jangan gunakan border="0" pada gambar, sebagai gantinya tambahkan kode :

style="border:none"

atau CSS terpisah seperti

img{border:none}

3. Pada iFrame, jangan menggunakan frameborder="0" atau allowtransparency:"true" scrolling="no", sebagai gantinya gunakan kode :

style="border:none;overflow:hidden"

atau CSS terpisah seperti

iframe{border:none;overflow:hidden}

4. Pada tag a jangan menggunakan tag name seperti :

<a name='comment-form'>

sebagai gantinya gunakan id seperti :

<a href='#comment-form'>

5. Jangan ada dua id pada template.
6. Hapus kode <b:include name='quickedit'/> setiap menambah widget baru 

Itulah beberapa Cara Agar Blog Validated HTML5 , artikel sebelumnya Syntax Highlighter For Blogger

Read More