Cara memasang Tag Facebook Open Graph dengan mudah

Pernah melihat Ketika link blog orang lain Dishare ke facebook maka akan muncul gambar, Sementara Saat link anda yang di share tidak muncul gambar apapun..

Karena Saat nge share sebuah link ke facebook maka URL itu akan diubah menjadi  tampilan yang ringkas atau inti dari blog tersebut

Untuk memperoleh tampilan Singkat yang sesuai dengan isi blog ketika dibagikan di Facebook, kamu perlu menggunakan meta tag Facebook Open Graph..

Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar agar tampilannya bagus ketika dishare di Facebook? Simak baik-baik ya.

Panduanku akan membagikan tutorial cara Membuat link gambar di facebook..

Apa itu Kode Open Graph?

Facebook Open Graph merupakan beberapa kode khusus berwujud meta tag HTML yang fungsinya membaca komponen-komponen Blog ketika Link dari blog tersebut ditaruh ke Facebook untuk nantinya Ditunjukan menjadi sebuah konten..

Mudahnya sih Agar saat Share link ke Facebook muncul gambar dan deskripsi blog anda ..

Kode Facebook Open Graph ini bisa dipakai pada semua platform blog seperti Blogspot, Wordpress, dan lain sebagainya..

Untuk apa memasang facebook open graph?

Facebook openGraph berfungsi untuk menarik minat pegunjung anda, Coba bayangkan saat anda melihat 2 blog di share ke facebook dan yang satu memiliki thumbnail dan yang satu lagi hanya berupa link..

Anda pasti akan lebih memilih untuk mengklik blog yang memiliki gambar tersebut bukan ?..

Sumber : igniel.com

Daftar Kode open Graph Dan fungsinya

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 kode inti yang harus Anda pasang. Saya jelaskan satu-satu ya berdasarkan hasil translate dari page tersebut..

1. og:url
    URL canonical dari blog kamu.

2. og:title
    Judul Dari artikel

3 og:description
    Menampilkan Deskripsi Dari blog

4. og:image
    Menampilkan gambar dari blog

5. fb:admin
    Berupa sebuah URL yang dapat di-klik  untuk menuju ke profil Facebook dari author bersangkutan

Cara memasang Facebook open graph

1. Masuk ke Menu Template Lalu Edit HTML

2. Cari kode </head> . Gunakan CTRL+F agar lebih mudah mencarinya

3. Masukan kode berikut ini tepat diatas kode </head>

<!-- [ Facebook Open Graph Meta Tag by igniel.com ] -->
<b:if cond='data:view.isHomepage'> 
<b:if cond='data:view.isPost'> 
<b:if cond='data:view.isPage'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<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/AVvXsEhWH6qa03jl0zGYhy-gEHXt7zhYauOm5fx8AJHCMQn_PX7NUQC2pfrIaHnfJ44TCV0vUqwWHsU8rKCAGQuCHWHVbZ7eb4ALBrb-2It2G00MimPtL0AEKecRVyH6LL0NQxrg2XhyphenhyphenCJANEjsc/s1600/ignielcom.png' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/106660612706164' property='article:author'/>
<meta content='https://www.facebook.com/106660612706164' property='article:publisher'/>
<meta content='106660612706164' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>

Keterangan :  

Ganti Warna Merah dengan URL Gambar yang mau dijadikan thumbnail.
Ganti Warna Biru dengan id admin. Jika tidak punya tingal hapus kode fb adminnya
Ganti warna hijau dengan Link fb kalian. 

4. Jika Sudah klik Simpan dan lihat Hasilnya...

**Kode by : igniel.com

Kenapa Gambar tidak Muncul

Jika Anda sudah merasa semua sudah benar tetapi gambar tidak muncul coba perhatikan ukuran Gambar ..

Gambar minimal untuk diapaki adalah gambar yang berukuran 200 x 200 pixels.. Edit lagi gambar nya dan jika sudah cek Lagi..

Masih juga belum muncul?

1. Masuk ke Sharing Debugger
2. Masukkan URL HomePage Anda
3. Klik tombol Debug
4. Klik Tombol Scrape Again/kurang lagi..
5. Lihatt Hasilnya !!

Penutup

Sekian Dari saya .. Semoga artikel ini bisa bermanfaat bagi kita semua. Jika masih bingung silakan tinggalkan komentar..

Jika anda puas saya minta bantuannya agar atikel ini di share Ya (:

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: