cara edit template blogger agar valid microdata schema.org

cara edit template blogger agar valid microdata schema.org
cara edit template blogger agar valid microdata schema.org Cara edit template blogger agar valid microdata schema.org

Oke ketemu lagi dengan saya admin VeriAsha
Lama gak post, karena disibukan bikin template blogger, tapi tetep saya akan selalu inget update artikel terbaru tentang dunia blogger yang lagi ngetren sekarang dan yang lagi tenar pasti saya bkin artikel.

Menurut saya , sekarang lagi ngetren micro data. sbenernya bukan ngetren sih , lebih ke wajib mas bro.
karena microdata sendiri dikushuskan untuk robot crawl , jadi menurut saya pengetahuan tentang microdata harus diperdalam biar kita gak ketinggalan jaman.
Dan bisa bersaing dengan blog sebelah.

Oke kali ini saya kasih tutor tentang Cara memasang microdata di blogger valid schema org.

Pasti kalian bertanya tanya.
Apa itu microdata??
Microdata merupakah sebuah mekanisme anotasi berupa pasangan variabel dan nilai yang diberikan pada sebuah dokumen HTML. Anotasi yang diberikan dapat menambahkan arti dari data yang tertuang dalam sebuah dokumen HTML.

Apa fungsi microdata??
Memberikan dampak pada Search Engine, yaitu memudahkan penempatan suatu artikel pada direktori mereka (google) tentunya pesan ini disampaikan oleh Google sendiri yang menganjurka kita untuk menggunakan Microdata (ketimbang Microformat atau RDFa).


Sudah tau kan apa itu microdata dan fungsinya, menurut kalian penting enggak sih, kalo menurut saya itu sangat penting sob.

ngaruh sama seo nggak??

Pastinya ngaruh, karena google sendiri yang merekomendasikan.

Sukur2 kalian sudah mempunyai template yang sudah full microdata, seperti template saya ini bisa di cek di Chek Markup

kalo belum bisa lanjut ikuti tutorial ini.

1. pertama kita pasang di bagian body.


Cari kode:
<body>

Dan ganti dengan kode html ini:

<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>


2. lanjut kita pasang di bagian header.


Cari kode

<b:widget id='Header1' locked='true' type='Header' visible='true'>


Dan pasang kode html ini sebelum kode diatas:

<header itemscope='itemscope' itemtype='http://schema.org/WPHeader'>


Dan tutup dengan kode:


</header>


Pahami kode diatas , kita lihat kode yang agak asing itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
pahami bener2 yah. WPHeader menandakan bahwa didalam tag tersebut itu bagian header.

belum selesai mas bro.
dan setelah itu kita lanjut ke penamaan url dan name untuk menyempurnakan kode diatas:

cari kode <h1 class='title'><a expr:href='data:blog.homepageUrl'><data:title/></a></h1>

dan ganti dengan kode html ini:
<h1 itemprop='name'><a class='title' expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><data:title/></a></h1>

3. lanjut kita pasang di bagian navigasi.

untuk navigasi setiap template beda2 jadi kode html yang biasanya dipakai untuk navigasi adalah <ul> <li>.
dan pasang kode ini sebelum <ul>
<nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
dan tutup dengan kode:
</nav>
dan untuk menyempurkannya, disetiap tag anchor <a> dikasih value baru itemprop='url'
untuk textnya dikasih kode <span itemprop='name'>isi text</span>
Contoh:
<nav itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
<li><a href='http://namablog.com' itemprop='url'><span itemprop='name'>Home</span></li>
<li><a href='http://namablog.com/about' itemprop='url'><span itemprop='name'>About</span></li>
<li><a href='http://namablog.com/contact' itemprop='url'><span itemprop='name'>Contact</span></li>
</ul>
</nav>
gampang kan, mudah lah kan udah dikasih contoh yang simple.
bisa dikreasikan sendiri lagi, sesuai keinginan, tapi kalo ngikut kode diatas sudah sangat valid.

4. lanjut kita pasang di bagian main / post.

untuk widget blog 2017 ada pembaruan microdata dari blogger dan otomatis semua template telah di perbarui oleh blogger menggunakan microdata.
tapi tetep aja masih ada yang kurang sreg menurut saya.
dan gak tau kenapa template pembaruan blogger tersebut tidak valid di chek markup. lucu kan??
saya juga gak tau kenapa.
dan dsini saya akan menyempurkanan template dengan beberapa penambahan value.
cari kode
<b:widget id='Blog1' locked='true' type='Blog' version='1' visible='true'>
dan pasang kode ini sebelum kode diatas.
<article itemscope='itemscope' itemtype='http://schema.org/Blog'>
dan tutup dengan kode:
</article>
untuk menyempurkannya cari kode <h1 class='post-title entry-title'>
dan kalau template kamu standar dari blogger
cari kode <h3 class='post-title entry-title'>
ganti dengan kode ini:
<h1 class='post-title entry-title' itemprop='name headline'>
dan untuk menyempurkannya, disetiap tag anchor <a> dikasih value baru itemprop='url'
sperti penjelasan di atas.
belum selesai mas bro masih di bagian main / post.
cari kode:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
ganti dengan kode ini:
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description'>
wah wah ruwet bener yah bikin pusing??? sama.... saya juga pusing sob.

5. selanjutnya kita pasang di bagian sidebar.

untuk sidebar juga biasanya beda2 disetiap template.
tapi dibagian widgetnya masih tetap sama.
berhubung widget di sedebar banyak banget, tergantung admin blog itu sih, tapi kalo saya jelasin dsini sampe besok belum kelar hehe.
jadi saya hanya menjelaskan yang simple dan terpenting saja yah.
biasanya templat blogger menggunakan id sedebar jadi cari code:
<b:section class='sidebar' id='sidebar' preferred='yes'>
kasih kode ini diatasnya:
<aside itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
dan tutup dengan kode:
</aside>
untuk menyempurkannya, disetiap tag anchor <a> dikasih value baru itemprop='url'
untuk textnya dikasih kode <span itemprop='name'>isi text</span>
maksud yah. kalo belum coba baca lagi yah.

6. terahir kita pasang di bagian footer.

di footer juga setiap template beda2 , dan biasanya footer menggunakan id footer.
jadi cari kode:
<div class='footer' id='footer'>
dan ganti dengan kode ini:
<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
dan tutup dengan kode:
</footer>
setelah itu ganti tag anchor <a> dikasih value baru itemprop='url'
untuk textnya dikasih kode <span itemprop='name'>isi text</span>
atau bisa full kode dari saya khusus footer:
<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div class='credit'>
Copyright &#169; <span itemprop='copyrightYear'>2017</span>
<span itemprop='copyrightHolder' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
<span itemprop='name'><data:blog.title/></span></a></span>
</div>
</footer>

kalau kamu sudah ikuti tutorial diatas berarti kamu sudah menambahkan html5 dan microdata,
karena saya mengadpsi kode diatas dengan html5 , yang notabene kode html terbaru.
selamat atas keberhasilannya temen2, semoga artikel ini bermanfaat yah.
ahirnya selesai juga kita menambahkan microdatanya.
bila masih bingung baca lagi atau bisa hubungi saya di contack dan komentar.
pasti saya balas.
sekian dan terimakasih.

2 comments:

Tambahkan Komentar