Mad Trik - Kadang-kadang ketika saya main di komunitas yang ada di Google+, disana sering terdapat orang-orang yang suka membagikan artikelnya di komunitas blogger yang ada di media sosial milik Google ini.
Tapi rata-rata artikel yang dibagikan tidak memiliki deskripsi yang biasanya terdapat tepat dibawah judul dan URL artikel tersebut. Tapi ketika saya kunjungi artikelnya, deskripsi untuk artikel tersebut malah befungsi dengan baik. tidak ada yang salah sama sekali.
 |
| Tampilan sebelumnya. |
Saya juga sempat bertanya di salah satu forum luar negeri, tapi jawabannya kurang membantu karena struktur di template saya ini agak berbeda. Jadi solusi terbaik adalah dengan mengambil struktur kode yang terdapat di template bawaan Blogger lalu digabungkan dengan
ringkasan artikel tanpa javascript yang sudah saya bagikan kemarin.
Oiya, jangan lupa juga untuk mengaktifkan
deskripsi penulusuran di blog kamu sebelum melakukan ini. Percuma saja dong nanti kalau tidak di aktifkan hasilnya ya jadi kosong juga, mungkin malah mengambil deskripsi lain.
Kira-kira strukturnya nanti akan jadi seperti ini:
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
...
</div>
<b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
....
</div>
</b:if>
Masalah ini biasanya terdapat pada template blogger yang sudah di modifikasi sedemikian rupa. Tapi entah kenapa para pembuat template itu melewatkan hal kecil ini.
Tapi ada masalah lain ketika saya sudah memcahkan masalah deskripsi yang tidak muncul ini, yaitu ketika dihalaman selain item atau halaman artikel, deskripsinya tidak muncul saya juga masih bingung bagaimana caranya menyelesaikannya.
Untuk menghasilkan hasil akhirnya yang sempurna, ada beberapa persyaratan yang kamu harus penuhi, yang sudah tertulis di halaman
Google Developers. Gambar yang ada pada artikel kamu setidaknya memiliki lebar
400px dan memiliki rasio aspek tidak lebih dari
5:2 (Lebar:Tinggi).
Jika kurang daripada itu, deskripsi tidak akan muncul. Yang muncul hanyalah thumbnail dan judul artikel saja. Jadi bagaimana para calon pengunjung akan tertarik dengan tampilan yang seperti itu ?
Jadi tutorial ini hanya akan memunculkan deskripsi pada halaman item saja. Untuk halaman yang lainnya saya masih mencari informasi lain. Tapi kalau kamu tahu caranya silahkan bagikan saja caranya di kolom komentar dibawah ya.
Caranya ?
Caranya cukup mudah yaitu dengan mengganti kode yang kira-kira seperti ini di template kamu:
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
Mungkin di template kamu kodenya akan berbentuk seperti ini:
<div class='post hentry'....>
Karena setiap template blogger mempunyai jenis yang berbeda-beda, intinya cari saja yang mirip seperti itu. Jika ada dua cari saja kode yang ada di dalam <b:includable id='post' var='post'>
Jika sudah ketemu, silahkan ganti kode yang kita cari tadi dengan kode dibawah ini:
<article class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url' />
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId' />
<meta expr:content='data:post.id' itemprop='postId' />
<a expr:name='data:post.id' />
Jika sudah tinggalkan itu, lalu kita beralih ke
<data:post.body>, yang masih di area
<b:includable id='post' var='post'>.
<b:if cond='data:blog.metaDescription == ""'>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='description articleBody'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
<div style='clear: both;' />
<!-- clear for photos floats -->
</div><b:else/>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
</b:if>
</b:if>
<div style='clear: both;' />
<!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.thumbnailUrl'> <a expr:href='data:post.url'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
<b:else/> <a expr:href='data:post.url'><img class='post-thumbnail' expr:alt='data:post.title' src='LOGO BLOG KAMU DISINI'/></a>
</b:if>
<div class='post-snippet'>
<b:if cond='data:post.snippet'>
<data:post.snippet/><b:else/>No content.</b:if>
</div>
</b:if>
</b:if>
Nantinya tampilan ringkasan artikel kamu akan menjadi seperti ringkasan artikel tanpa javascript. Jadi jika kamu menggunakan ringkasan artikel selain yang tanpa javascript itu, kamu bisa kok mengikuti struktur yang sudah saya berikan diatas tadi.
 |
| Hasil akhirnya. |
Asalkan bagian yang sudah saya beri tanda diatas tadi dibiarkan saja jangan diedit lagi. karena bagian itulah yang nantinya membuat deskripsi kamu bisa muncul ketika kamu membagikan artikel kamu ke Google+ nanti.
Masih Belum Muncul ?
Ada tiga kemungkinan:
- Gambar yang ada di artikel kamu tidak memenuhi syarat, minimal gambar yang ada di artikel blog kamu berukuran 400px.
- Jika dibawah 400px, Google+ akan otomatis membuat snippet artikel yang kamu bagikan berukuran kecil, dimana memang Google+ sengaja tidak menampilkan deskripsinya pada ukuran segitu.
- Kamu belum mengaktifkan deskripsi penelusuran.
Sekian tutorialnya kali ini, semoga bisa membantu blog kamu yang deskripsinya tidak muncul di Google+. Jika ada kesulitan silahkan berkomentar.
