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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT77RgW5_h-8NK-0bvMB-XgkQ2dSIeh8lY2go460-zBAjW1eKFq7om50y2yeVQmohmgZPxx6Dtmq5Kdcfuw22HEc-rGVIryDo8v1_76GOR0ctJdixgbPt9ZIpAMMAwILcltFQ1EnrPzFfb/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.

Test percobaan lagi: "http://t.co/yg3cTS51Vl"
— Mad (@AchmadMuharya) February 26, 2015

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 !

ADS HERE !!!