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, kau perlu memakai meta tag Facebook Open Graph..

Apa sih Facebook Open Graph itu? Bagaimana cara memasang Facebook Open Graph yang baik dan benar biar tampilannya manis 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 isyarat 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 ketika Share link ke Facebook muncul gambar dan deskripsi blog anda ..

Kode Facebook Open Graph ini sanggup digunakan pada semua platform blog menyerupai Blogspot, Wordpress, dan lain sebagainya..

Untuk apa memasang facebook open graph?

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

Anda niscaya akan lebih menentukan untuk mengklik blog yang mempunyai gambar tersebut bukan ?..

Sumber : igniel.com

Daftar Kode open Graph Dan fungsinya

Berdasarkan dokumen developers Facebook yang ada di Webmaster, ada 5 isyarat inti yang harus Anda pasang. Saya jelaskan satu-satu ya menurut 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 sanggup 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 biar lebih gampang mencarinya

3. Masukan isyarat berikut ini sempurna 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/AVvXsEjikOamnI3mxHQaC71df07bNFqW3iAlYBkAs2MlWrIsg4IEnTT7GvvmIstV3yzvchvq-sBRLyBu_dJo__guNwd4fzZ_wdcJdtWXKm5CN24P9L3oHhciJFNjzcCcE6OtfvUWssLssSUs8sKu/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 isyarat 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 ialah gambar yang berukuran 200 x 200 pixels.. Edit lagi gambar nya dan kalau 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 aku .. Semoga artikel ini sanggup bermanfaat bagi kita semua. Jika masih galau silakan tinggalkan komentar..

Jika anda puas aku minta bantuannya biar atikel ini di share Ya (:

Share this post