Pada template bawaan blogger terbaru contempo, soho, emporio, terkemuka sudah di sematkan markup blog postingan yang lengkap dan tanpa error, berbeda halnya dengan template default blogger yang sudah lawas yang memiliki markup tapi banyak terdapat errornya, ini tidak bagus kalo kita pakai. Oleh karena itu template terbaru blogger ini menurut saya sudah memiliki paket complite yang tidak boleh kita sia-siakan.
1. Cara memasang markup schema org SiteNavigationElement - Yang paling penting Selain dari markup schema org blog posting yang harus kita tambahkan pada template adalah markup Site navigation element. Ini dikarenakan untuk memperjelas adanya sistem navigasi dan mempermudah robot google menemukan laman dalam situs web maupun blog kita.
Temukan code ini di dalam template:
<nav role='navigation'>
Ganti dengan code ini:
<nav role='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
Setelah itu tambahkan "itemprop" pada code berikut:
<b:includable id='pageLink'>
<li>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/>
<a expr:href='data:link.href' ><data:link.title/></a>
</li></b:includable>
Menjadi seperti ini:
<b:includable id='pageLink'>
<li itemprop='url'>
<b:class cond='data:overflow' name='overflowable-item'/>
<b:class cond='data:link.isCurrentPage' name='selected'/>
<a expr:href='data:link.href' itemprop='name'><data:link.title/></a>
</li></b:includable>
Done.
2. Cara memasang markup schema org WPHeader - Temukan code berikut ini:
<header class='centered-top-container' role='banner'>
Ganti dengan code ini:
<header class='centered-top-container' role='banner' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
Setelah itu cari code di bawah ini:
<b:includable id='title'><div><b:if cond='data:blog.pageType != "item"'><b:include name='super.title'/><b:else/><h2><a expr:href='data:blog.homepageUrl'><data:title/></a></h2> </b:if> </div></b:includable>
Selanjutnya tambahkan itemprop seperti dibawah ini:
<b:includable id='title'><div itemprop='headline'>
Done.
3. Cara memasang markup schema org WPSidebar dan WPFooter - Cari code dibawah ini untuk memasang wpsidebar:
Setelah ketemu ganti dengan code di bawah ini:
Untukmemasang wpfooter cari code di bawah ini:
Setelah ketemu pasang dengan code seperti ini:
Selesai, Template terbaru blogger contempo, soho, emporio, terkemuka sudah terpasang schema org yang lengkap. Ini artinya sudah memenuhi kriteria SEO friendly. Untuk mengecek code yang telah kita pasang bisa menggunkan tool dari google ini : Alat uji coba data terstruktur , Semoga berhasil :) .
3. Cara memasang markup schema org WPSidebar dan WPFooter - Cari code dibawah ini untuk memasang wpsidebar:
<aside class='sidebar-container container sidebar-invisible' role='complementary'>
Setelah ketemu ganti dengan code di bawah ini:
<aside class='sidebar-container container sidebar-invisible' role='complementary' id='WPSideBar' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
Untukmemasang wpfooter cari code di bawah ini:
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
Setelah ketemu pasang dengan code seperti ini:
<div id='WPFooter' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'> ... </b:section></div>
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'> ... </b:section></div>
4. Cara memasang markup schema org Website - Tempatkan script di bawah ini di atas code </head> :
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>search?q={search_term}", "query-input": "required name=search_term" } }</script>
Selesai, Template terbaru blogger contempo, soho, emporio, terkemuka sudah terpasang schema org yang lengkap. Ini artinya sudah memenuhi kriteria SEO friendly. Untuk mengecek code yang telah kita pasang bisa menggunkan tool dari google ini : Alat uji coba data terstruktur , Semoga berhasil :) .
Berhasil saya pasang semuanya om hehehe :)
ReplyDeleteCuma ada sedikit koreksi nih, yg bagian terakhir yaitu 'Cara memasang markup schema org Website', yaitu ada kurang huruf 't', yaitu tulisan css yg < / scrip > terakhir
Coba om perhatikan deh,,, pantesan waktu saya pasang kok error terus, pas saya tambah huruf 't', barulah bisa berhasil dipasang.
:)
trimakasih koreksinya om :)
DeleteOh iya om,,, setelah saya pasang Mark up schema ini, ada terjadi sedikit keanehan pada bagian footer om. Yaitu halaman statis about, privacy policy, tos, dan yg lainnya jadi mepet ke sebelah kiri.
ReplyDeleteCoba om lihat.
Tadinya kan posisinya aslinya pas ditengah. Itu kenapa ya om? Jadi agak kurang enak aja di liatnya hehe.
Klo bikin halaman statis kayak di footer blognya om itu gimana? Saya lihat bagus juga, keliatan rapi 😊
ok, kasih css ini
Deletefooter#footer div#PageList2 ul li {
display: -webkit-inline-box;
}
footer#footer .PageList li {
padding: 10px;
}
footer#footer div#PageList2 ul {
text-align: center;
}
Oke om, CSS ini dipasangnya dimana ya om? 😀
Deletemasukkan di seperti biasa om, kalo code css pasti disini jangan lupak, diatas ]]>
DeleteHmmh,,, sudah kuduga om,,, pasti disitu hehe :)
Deleteom, ada kendala nih di sesi WPHeader. ditempat saya gak nemu kode ini b:includable id='title' div b:if cond='data:blog.pageType !=
ReplyDeleteyang ada malah kode ini (ada 2):
b:includable id='title' div b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'
Menggunakan template apa mas?
Deletetemplat contempo, navigasi & sidebar beres. header dan footer belum. yg sesi footer ketemu kodenya disini aneh.. tag b:section gak ketemu tag tutup .... /b:section
Deletesaya lihat memang ada sedikit perbedaan pada template contempo, pilih yang paling bawah dan ganti seperti code dibawah ini
Delete<b:includable id='title'>
<div itemprop='headline'>
<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>
<b:include name='super.title'/>
</div>
</b:includable>
Kalau buat link footer gimana caranya yah mas. Aku pakai contempo
Deletebagian footernya di beri widget pagelist, supaya bisa sejajar gunakan css, agak susah untuk dijelaskan karena setiap pagelist memiliki code berbeda2
DeleteMas, saya menggunakan template soho dan mencoba mengikuti langkah2nya. Untuk poin 2 membuat markup wpheader, saya tidak bisa memasukkan kodenya karena tidak ada kode seperti yang mas katakan ()
ReplyDeleteyang ada kodenya ini:
Solusinya apa mas??
cari code yang ini saja "", karena ada perbedaan sedikit untuk bagian bawahnya
Delete<b:includable id='title'>
DeleteOk, makasih mas.. Sudah berhasil saya coba..
DeleteSudah selesai saya ganti semua seperti yang diperintahkan dan berhasil. Saya mau tanya masalah lain ini mas terkait widget popular post. Saya memakai template Contempo.
ReplyDeleteSetelah mengutak-atik beberapa widget tambahan, popular post di blog saya hanya tampil di halaman statis saja. Bagaimana cara mengubahnya supaya hanya tampil di bawah postingan saja.
menambahkan code ini pada tag widget populer post cond='data:blog.pageType == "item"'
Deletecontoh <b:widget cond='data:blog.pageType == "item"' id='PopularPosts1'