Cara Memperbaiki Struktur Data Blog - Setelah cukup lama berkutat memperbaiki struktur data beberapa blog, akhirnya tergelitik juga untuk berbagi kepada sesama blogger. Setelah Google mengeluarkan Structured Data Testing Tool sejak pertengahan 2015 yang lalu banyak blog tidak lagi valid dengan struktur data sebelumnya. Apakah ini berpengaruh terhadap mesin pencari? Menurut pendapat saya cukup berpengaruh karena ini berkaitan erat dengan artikel Optimalisasi Google Webmaster seperti yang sudah pernah ditulis sebelumnya.
Coba buka kembali Webmasternya, silahkan ambil Menu Tampilan Penelusuran => Data Tersruktur, sobat akan melihat tampilan seperti gambar dibawah. Coba perhatikan ada berapa jenis data yang dapat dibaca oleh robot google, dengan asumsi semakin lengkap data yang disajikan sebuah blog tentu saja semakin SEO friendly. Agar bisa melihat Strukutr data yang valid menurut Google, silahkan di test dulu menggunakan Structured Data Testing Tool.
Sekarang kita sudah tahu ada berapa Struktur Data valid yang bisa dibaca oleh robot google tentunya. Untuk blog ini kami menerapkan 10 Struktur data yang terdiri dari :
1. Website.
2. Blog
3. Webpage.
4. WpHeader
5. BlogPosting / Article
6. WpSidebar
7. Category
8. WpFooter
9. CopyrightHolder
10. Hatom
Sebenarnya masih bisa ditambahkan dengan Struktur Data Place atau lokasi, namun karena kita memang jarang menampilkan lokasi blog kita maka hal ini tidak terlalu penting namun sebaiknya tetap ditambahkan.
Untuk menambahkan Struktur Data kita harus edit kembali template yang ada, dan susahnya lagi tidak semua template sesuai dengan tutorial ini, namun bisa dilihat struktur html dari masing-masing template yang kita punya. Agar tidak menjadi lebih bingung berikut langkah-langkahnya, soalnya saya juga sedikit bingung untuk menerangkannya....hehehehe..
1. Website.
Untuk menambahkan Struktur Data yang ini silahkan ditambahkan Script berikut pada area <Head> sebaiknya dibawah <meta expr:content='data:blog.metaDescription' name='description'/> berikut Scriptnya.
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
2. Blog
Untuk menambahkan Struktur Data Blog, silahkan cari kode <div id='content-wrapper'> atau yang mirip kemudian tambahkan kode berikut itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'> sehingga menjadi <div id='content-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
3. Webpage.
Selanjutnya Webpage, untuk menambahkan Strukutr Datanya silahkan cari kode <body> atau sejenisnya kemudian tambahkan id='webpage' itemscope='' itemtype='http://schema.org/WebPage'> sehingga menjadi <body id='webpage' itemscope='' itemtype='http://schema.org/WebPage'>
4. WpHeader
Untuk WpHeader, terlebih dahulu silahkan dicari kode <header id='header-wrapper'> atau sejenisnya kemudian tambahkan kode berikut itemscope='' itemtype='http://schema.org/WPHeader'> sehingga menjadi <header id='header-wrapper' itemscope='' itemtype='http://schema.org/WPHeader'>
5. BlogPosting / Article.
Untuk menambahkan Struktur Data yang satu ini memang agak rumit, karena syarat untuk valid harus memenuhi beberapa komponen seperti : Headline, name, url, description, articlebody, author, datepublished dan lainnya.
Namun perlu diingat bahwa struktur data yang satu ini yang terpenting, karena disini kita menginformasikan kepada robot google tentang artikel yang kita punya.
Untuk menambahkan Struktur Data ini pertama cari kode <article class='post hentry' expr:id='data:post.id'> atau sejenis, kemudian tambahkan kode Strukturnya yaitu itemscope='' itemtype='http://schema.org/BlogPosting'> sehingga menjadi <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
Kemudian untuk Struktur Data Gambar atau image nya tambahkan kode berikut tepat dibawah kode yang baru kita buat sebelumnya.
3. Webpage.
Selanjutnya Webpage, untuk menambahkan Strukutr Datanya silahkan cari kode <body> atau sejenisnya kemudian tambahkan id='webpage' itemscope='' itemtype='http://schema.org/WebPage'> sehingga menjadi <body id='webpage' itemscope='' itemtype='http://schema.org/WebPage'>
4. WpHeader
Untuk WpHeader, terlebih dahulu silahkan dicari kode <header id='header-wrapper'> atau sejenisnya kemudian tambahkan kode berikut itemscope='' itemtype='http://schema.org/WPHeader'> sehingga menjadi <header id='header-wrapper' itemscope='' itemtype='http://schema.org/WPHeader'>
5. BlogPosting / Article.
Untuk menambahkan Struktur Data yang satu ini memang agak rumit, karena syarat untuk valid harus memenuhi beberapa komponen seperti : Headline, name, url, description, articlebody, author, datepublished dan lainnya.
Namun perlu diingat bahwa struktur data yang satu ini yang terpenting, karena disini kita menginformasikan kepada robot google tentang artikel yang kita punya.
Untuk menambahkan Struktur Data ini pertama cari kode <article class='post hentry' expr:id='data:post.id'> atau sejenis, kemudian tambahkan kode Strukturnya yaitu itemscope='' itemtype='http://schema.org/BlogPosting'> sehingga menjadi <article class='post hentry' expr:id='data:post.id' itemscope='' itemtype='http://schema.org/BlogPosting'>
Kemudian untuk Struktur Data Gambar atau image nya tambahkan kode berikut tepat dibawah kode yang baru kita buat sebelumnya.
<div itemType='https://schema.org/WebPage' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
<meta content='auto' itemprop='width'/>
<meta content='auto' itemprop='height'/>
</div>
</b:if>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQS_N9B7dtK2Hzw8Wlt-T0UBbdXyyXsXQG1qZs2MfgMaaiLgdV0pE5g__93cdxAXH-eUIdErqDXkXW4xnsS7IbtJZCtEvhc1wITaTv5sQnsuonZCvvewawuwRmncMTXqvjZJpw5T1V153k/s320/www.cpuik.web.id.jpg' itemprop='url'/>
<meta content='auto' itemprop='width'/>
<meta content='auto' itemprop='height'/>
</div>
<meta expr:content='data:blog.title' itemprop='name'/>
</div>
<b:if cond='data:post.firstImageUrl'>
<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta expr:content='data:post.firstImageUrl' itemprop='url'/>
<meta content='auto' itemprop='width'/>
<meta content='auto' itemprop='height'/>
</div>
</b:if>
<div itemprop='publisher' itemscope='itemscope' itemtype='https://schema.org/Organization'>
<div itemprop='logo' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQS_N9B7dtK2Hzw8Wlt-T0UBbdXyyXsXQG1qZs2MfgMaaiLgdV0pE5g__93cdxAXH-eUIdErqDXkXW4xnsS7IbtJZCtEvhc1wITaTv5sQnsuonZCvvewawuwRmncMTXqvjZJpw5T1V153k/s320/www.cpuik.web.id.jpg' itemprop='url'/>
<meta content='auto' itemprop='width'/>
<meta content='auto' itemprop='height'/>
</div>
<meta expr:content='data:blog.title' itemprop='name'/>
</div>
Untuk gambar logo Organization yang bertandah merah silahkan diganti dengan logo sobat masing-masing.
Setelah itu cari kode <h2 class='post-title entry-title'> biasanya dibawah kode <article class='post hentry' expr:id='data:post.id'> sebelumnya. Tambahkan kode itemprop='name headline'> sehingga menjadi <h2 class='post-title entry-title' itemprop='name headline'> ganti juga yang menggunakan kode <h1 class='post-title entry-title'>
Untuk Article body, cari kode <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'> kemudian tambahkan kode itemprop='description articleBody'> sehingga menjadi <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
Kemudian untur authornya silahkan cari kode <span class='fn'> kemudian tambahkan kode itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> sehingga menjadi <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
Kemudian ganti <data:post.author/> dengan <span itemprop='name'><data:post.author/></span>
tambahkan rel='author' untuk 'author profile' sehingga kode author menjadi seperti dibawah ini ;
<div class='post-author vcard'>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</div>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn'><data:post.author/></span>
</b:if>
</div>
Apakah sudah selesai?.. belum kita masih harus menambahkan item tanggal published dan modified untuk itu silahkan cari kode berikut <div class='post-timestamp'> biasanya berada dibawah kode author tadi. Edit kode time tersebut sehingga menjadi seperti dibawah ini :
<div class='post-timestamp'>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.timestamp/></abbr></a>
</b:if>
</div>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished dateModified'><data:post.timestamp/></abbr></a>
</b:if>
</div>
Wah sedikit sulit memang....hehehehe.
6. WpSidebar.
Untuk menambahkan struktur data WpSidebar terlebih dahulu cari kode <aside id='sidebar-wrapper'> atau yang berhubungan dengan sidebar-wrapper. kemudian tambahkan kode itemscope='' itemtype='http://schema.org/WPSideBar'> sehingga menjadi <aside id='sidebar-wrapper' itemscope='' itemtype='http://schema.org/WPSideBar'>
7. Category atau label.
Ini akan menginformasikan kepada robots label yang ada di blog kita, untuk menambahkannya cari kode <div class='post-labels'> kemudian tambahkan kode itemscope='' itemtype='http://schema.org/Category'> sehingga menjadi <div class='post-labels' itemscope='' itemtype='http://schema.org/Category'>
8. WpFooter
WpFooter dapat ditambahkan dengan terlebih dahulu mencari kode <footer id='footer-wrapper'> atau sejenisnya kemudian tambahkan kode itemscope='' itemtype='http://schema.org/WPFooter'>
sehingga menjadi <footer id='footer-wrapper' itemscope='' itemtype='http://schema.org/WPFooter'>
9. CopyrightHolder
Untuk copyrightHolder, biasanya harus ditambahkan pada bagian credit tergantung template masing-masing blog. silahkan cari <div id='credit'> kemudian pada bagian <div class nya tambahkan kode berikut itemscope='' itemtype='http://data-vocabulary.org/copyrightHolder'>
10. Untuk Hatom biasanya setiap template sudah menyematkannya sehingga otomatis sudah ada.
Demikian Cara Memperbaiki Membuat Struktur Data Blog dan sebenarnya ini juga yang menjadi salah-satu pembeda antara template gratisan dengan template premium, huff..., capek juga menulisnya, semoga bermanfaat. Jika ada pertanyaan silahkan berinteraksi dikolom komentar dengan tetap tidak meninggalkan link aktif... :D :D :D
