Memperbaiki Deskripsi Artikel Di Google+ Yang Tidak Muncul

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.

Artikelnya tidak mempunyai deskripsi.
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 == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

...

   </div>
  <b:else/>
   <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + 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 == &quot;&quot;'>
    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <data:post.body/><b:else/>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                <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='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <data:post.body/><b:else/>
            <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                <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 + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

    </div>
</b:if>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <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.

Deskripsinya muncul.
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:

  1. Gambar yang ada di artikel kamu tidak memenuhi syarat, minimal gambar yang ada di artikel blog kamu berukuran 400px.
  2. Jika dibawah 400px, Google+ akan otomatis membuat snippet artikel yang kamu bagikan berukuran kecil, dimana memang Google+ sengaja tidak menampilkan deskripsinya pada ukuran segitu.
  3. 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.

9 comments

  1. baru tau ternyata template juga mempengaruhi deskripsi. saya kira deskripsi di google plus udah bawaan otomatis

    ReplyDelete
    Replies
    1. Otomatis sih, tapi untuk template bawaan blogger kayanya.

      Delete
    2. Iya betul kalau bawaan blogger memang otomatis. Tapi kalau sudah kita gonta-ganti kodenya sendiri, kadang muncul kasus yang beginian.

      Delete
    3. Bener om, tapi saya masih penasaran sama deskripsi halaman depan dan lain-lain :(

      Padahal sudah disamain kode-kodenya tapi masih aja gak muncul...

      Delete
  2. Sepakat om, setelah ane oprek2 kode HTML akhirnya deskripsi bisa muncul juga. Intinya sih perlu ketelitian dalam mecari kode yg hendak diperlukan penggantian tadi. Karena bisa saja salah copy paste. Makasi infonya...

    ReplyDelete
  3. Artikel ini saya coba bagikan ke g+ tapi ko ngga muncul deskripsinya.

    ReplyDelete
    Replies
    1. Kayanya ada masalah sama Google+ atau Blogger, blog saya juga gak muncul deskripsinya. Terus saya udah coba bikin blog baru pakai template Blogger yang biasanya langsung muncul deskripsi, ternyata gak bisa juga. Tapi kalau pakai fitur sharing otomatis ke G+ muncul kok, aneh juga ?

      Udah nanya di forum Blogger masih belum ada jawaban....

      Delete
  4. masih bingung -_-
    bagian itu dipaste kok double jadinya artikelnya

    ReplyDelete
    Replies
    1. yang <data:post.body> itu diganti om, bukan cuman di paste aja. Maaf kalo kurang lengkap penjelasannya...

      Delete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.