Menggabungkan Twitter Card & Facebook Open Graph

Mad Trik - Facebook Open Graph dan Twitter Card ini adalah dua hal penting yang harus ada di dalam template blog kamu. Dan fungsinya adalah untuk memperindah tampilan artikel ketika kamu membagikannya di salah satu Media Sosial paling populer ini.

Karena bukan tidak mungkin akan menambah pengunjung baru setiap kali kamu membagikan artikel kamu ke salah satu media sosial itu. Nah, bagi kamu yang belum tahu tentang Twitter Card dan Facebook Open Graph ini, kamu bisa membacanya di artikel MT sebelumnya.

Jika kamu sudah mengaktifkan Twitter Card kamu, kamu hanya tinggal mengganti Meta Twitter Card dan Open Graph yang sudah ada dengan Meta dibawah ini. Dan tidak lupa juga saya ucapkan terima kasih pada blog Kompi Ajaib yang sudah memberikan Meta tag ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title' />
    <meta expr:content='data:blog.canonicalUrl' property='og:url' />
    <meta content='article' property='og:type' />
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Silahkan baca artikel &quot; + data:blog.pageName + &quot; ini selengkapnya di &quot; + data:blog.title + &quot;&quot;' property='og:description'/>
    </b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' property='og:description'/>
    <b:else/>
        <meta expr:content='&quot;Silahkan kunjungi &quot; + data:blog.pageTitle + &quot;Untuk membaca postingan-postingan menarik.&quot;' property='og:description'/>
    </b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image' /><b:else/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
        <meta expr:content='data:blog.postThumbnailUrl' property='og:image' /><b:else/>
        <meta content='http://4.bp.blogspot.com/-OfeQoqmUe2E/U4LGtr7aVMI/AAAAAAAAc7g/GQB8vBxrIE8/s1600/Graphic1.png' property='og:image' />
    </b:if>
</b:if>
<meta content='100006644464463' property='fb:admins' />
<meta content='480072895444481' property='fb:profile_id' />
<meta expr:content='data:blog.title' name='twitter:site' />
<meta content='summary_large_image' name='twitter:card' />
<meta content='@AchmadMuharya' name='twitter:creator' />
<link expr:href='data:blog.url' rel='canonical'/>

Jangan disimpan dulu ya, karena masih ada meta tag bawaan dari template ini yang masih nyangkut di kode diatas. Silahkan disesuaikan lagi tulisan yang sudah saya beri tanda tebal diatas, dengan blog kamu.

Sekedar saran dari saya, sebaiknya kamu buat sendiri gambar untuk menggantikan gambar yang ada didalam artikel kamu, jika didalam artikel yang kamu bagikan tidak memiliki gambar. Buatlah minimal dengan lebar 500px dan tinggi 300px.

Untuk Twitter misalnya, agar gambar yang dimunculkan cocok dengan persyaratan dari Large Image summary_large_image lebar dari gambar minimal harus 280px dan tinggnya harus 150px, pokoknya pada intinya buat saja agar nantinya gambar yang kamu buat agar terlihat lebih besar.





Jika sudah selesai sebaiknya kamu cek perubahan yang ada di blog kamu itu di Facebook Debugger dan Twitter Card Validator. Jika tidak ada masalah sama sekali, itu artinya kamu berhasil. Yeeaay ! Omedetou !

9 comments

  1. Keren juga saat tampil di twitter. Selama ini saya hanya fokus di fanpage saja untuk berbagi ulangnya.

    ReplyDelete
    Replies
    1. Twitter juga bagus sekarang om, Google sekarang udah mulai mengindeks tweet secara real time :D

      Delete
  2. kemarin sempat juga mempelajari penggunaan twitter card diblog kawan...hasilnya indeksi makin tambah bagus juga mas. ok makasih infonya. salam sahabat blogger.

    ReplyDelete
    Replies
    1. Kayanya gak ada hubungannya deh mbah dengan hasil indeksi :)

      Delete
    2. Ehh lupa, nanti kan google akan mengindeks tweet secara real time :D

      Jadi memang ada hubungannya :D

      Delete
  3. menurut yang sya baca, dari css trik dll, untuk blogger sebaiknya jgn gunakan readmore javascript, untuk blog responsive, gambarnya tidak akan muncul sempurna, coba dilihat lagi hasil share di media sosial, it dr saya gan, btw makasih meta tagnya, ane pelajari dl kode2nya.

    ReplyDelete
    Replies
    1. Maksudnya gak muncul gitu ?

      Kalo yang begitu masih bisa diakali mungkin mas, saya juga masih cari caranya sampai sekarang. :)

      Delete
  4. itu nanti bukannya deskripsi nya jadi "Silakan kunjungi...." kalau mau diganti biar seuai kalimat awal konten gmana bang? timeslib.com

    ReplyDelete
    Replies
    1. Aktifkan dulu deskripsi penelusuran di blognya :) kalau belum aktif deskripsi yang muncul jadi "Silakan kunjungi...."

      Baca disini caranya http://madtrik.blogspot.com/2014/07/cara-mengaktifkan-deskripsi-penelusuran-pada-setiap-artikel.html

      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.