Tempat belajar blogspot

Cara Menambahkan Meta Tag Open Graph Protocol


Cara Menambahkan Meta Tag Open Graph Protocol

Topik pembahasan kali ini mengenai Meta Tag Open Graph Protocol, bagi yang mungkin baru pertama kali membaca atau mendengar Meta Tag Open Graph Protocol ini sedikit saya beri penjelasan yaitu sebuah kode meta tag yang berguna untuk membantu mesin media sosial menampilkan informasi konten yang lebih informatif pada saat dibagikan atau dipublikasi. Konten lebih informatif ini yang dimaksud sanggup menampilkan judul, gambar, dan deskripsi halaman yang kita bagikan atau share di media sosial dengan kata lain tampilan konten tidak monoton yang hanya beruba judul atau bahkan tulisan link saja.
Berpengaruh dengan traffic atau pengunjung apa nggak? Menurut saya pasti berpengaruh terutama konten yang terlihat menarik dan informatif di sebuah sosial media juga akan mengundang rasa penasaran calon pengunjung untuk berkunjung.

Baca juga : Microdata Schema dan Open Graph Protocol Penunjang SEO Blogger

Cara Menambahkan Meta Tag Open Graph Protocol

Ikuti langkah - langkah dibawah ini untuk menambahkan kode Meta Tag Open Graph Protocol pada halaman blogspot.

Khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>, cukup mengikuti langkah 1,2,3 saja.

Sedangkan untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/>, tidak perlu melakukan langkah 3 atau dilompatin saja untuk langkah nomor 3.

Baca juga : Apa itu All Head Content

INGAT UNTUK MELAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU SEBELUM MELAKUKAN PERUBAHAN.
DWYOR (Do With Your Own Risk), KEGAGALAN ATAU KESALAHAN YANG TERJADI ADALAH TANGGUNG JAWAB MASING - MASING PEMILIK BLOGSPOT.

  1. Buka halaman Blogger dan login akun Blogger.
  2. Pilih Edit Template kemudian Edit HTML
  3. Cari kode </head> dan copy kode Open Graph dibawah ini, letakkan diatas kode </head>
    Kode Open Graph dibawah ini khusus untuk template yang tidak menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
    <!-- Open Graph Meta Tags BEGIN -->
     <meta expr:content='data:blog.pageName' property='og:title'/>
     <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
     <meta content='website' property='og:type'/>
     <meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
     <meta content='URL FANPAGE' property='publisher'/>
     <meta expr:content='data:blog.title' property='og:site_name'/>
     <meta expr:content='data:blog.metaDescription' property='og:description'/>
     <meta expr:content='data:post.snippet' name='og:description'/>
     <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
     <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
    <!-- Open Graph Meta Tags END -->
  4. Sama seperti langkah 3, tapi kode Open Graph dibawah ini dikhususkan hanya untuk template yang menggunakan kode <b:include data='blog' name='all-head-content'/> pada bagian <head>
    <!-- Open Graph Meta Tags BEGIN -->
     <meta content='website' property='og:type'/>
     <meta content='URL FANPAGE ATAU PROFILE FB' property='author'/>
     <meta content='URL FANPAGE' property='publisher'/>
     <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 1200x630 -->
     <meta content='URL LOGO BLOG' property='og:image'/> <!-- Rekomendasi 200x200 squared -->
    <!-- Open Graph Meta Tags END -->
  5. Selesai.

Proses penambahan kode Meta Tag Open Graph Protocol diatas masih belum sempurna tanpa adanya URL atau LINK sebuah gambar logo blog kita masing - masing, perhatikan tulisan URL LOGO BLOG nah isi URL LOGO BLOG ini dengan URL logo blog kita sendiri agar saat kita proses Debug (sebagai contoh menggunakan tools Sharing Debugger Facebook atau kunjungi URL ini https://developers.facebook.com/tools/debug/.) halaman blog beranda kita bisa memunculkan logo tersebut.

Mengenai ukuran gambar sangat disarankan menggunakan gambar berukuran 1200px X 630px untuk mendapatkan hasil yang lebih menarik, dikarenakan dengan ukuran tersebut tampilan gambar pada saat kita share akan tampak lebih besar. Tapi tidak menutup kemungkinan apabila kita tetap menginginkan ukuran gambar kotak atau squared picture bisa menggunakan ukuran 200px X 200px (jangan dibawah 200 pixel karena gambar tidak akan muncul saat kita proses debug maupun kita share di media sosial), umumnya ukuran 200px X 200px ini lebih cocok digunakan untuk simbol atau favicon halaman blogspot.

Baca juga : Apa itu CSS

Lebih jelasnya contoh tampilan gambar besar 1200px X 630px dan gambar kotak 200px X 200px, bisa perhatikan contoh gambar dibawah ini.

Open Graph Protocol 200px

Open Graph Protocol 1200px

Sampai disini dulu artikel mengenai Cara Menambahkan Meta Tag Open Graph Protocol, semoga artikel ini bermanfaat bagi kita pemilik blog yang ingin mengembangkan halaman blog kita.
Terima kasih

Baca juga : Meta Tag Dasar Penunjang SEO Halaman Blogspot

Artikel ini ditulis oleh :
Perbloggeran

21 comments:

  1. thanks gan berhasil, sangat bermanfaat infonya

    ReplyDelete
    Replies
    1. Oke siap gan, sama - sama gan saling berbagi info bermanfaat seputar blogging juga..

      Delete
  2. Komplit ya penjelasannya. Openid grap ini apa berfungsi untuk semua jenis template?

    ReplyDelete
    Replies
    1. Opengraph berguna untuk semua halaman HTML termasuk wordpress, blogger, dan halaman web sebuah company profile pun bisa..

      Hanya saja kalau untuk blogger ada sedikit perubahan kode..

      Inti dari opengraph adalah memberi data informasi meta tag, suapaya di blogger bisa otomatis mengenali informasi judul, deskripsi, gambar thumbnail kita harus menggunakan expr:content="konten"

      Kalau panduan standart dari opengraph yang umum kan menggunakan content="konten"

      Seperti itu gan..

      Delete
  3. tanya gan. bukannnya tanpa meta tag ini kalo kita share di medsos juga udh ada deskripsi nya?
    trus klo dipake kira" ngaruh ga sama elemen lain di blog?

    ReplyDelete
    Replies
    1. Tanpa kode opengraph bisa muncul dikarenakan pada template agan sudah memiliki kode opengraph tersebut gan..

      Kalau kita memncoba membuat template blogger tersendiri, sebetulnya di widget id="blog1" belum mendukung kode opengraph gan..

      Delete
  4. klo blogger lebih rumit ya gan, saya pribadi pake wordpress mudah banget nyususun meta deskripsi

    ReplyDelete
  5. Blog saya udah otomatis mas, oh ini caranya toh, sangat bermanfaat sewaktu-waktu kalau belum ada bisa diterapkan. Makasih mas bantuannya.

    ReplyDelete
  6. wah sangat bermanfaat gan infonya thanks sudah di share

    ReplyDelete
  7. bermanfaat sekali gan, ana langsung praktekkan nih...memang penting meta tag ini

    ReplyDelete
  8. Akhirnya nemu juga tutor kaya gini thanks min

    ReplyDelete
  9. weh keren aku mai coba lah. kadang gambarnya yg muncul ngawur. thanks yah

    ReplyDelete
    Replies
    1. Iya gan mungkin kode opengraph yang ada pada template kurang tepat..

      Kalau template yang baru - baru dan selalu update biasanya pasti ada pembenahan juga koq untuk kode opengraph yang ada di template itu..

      Delete
  10. oke mantap bro... tapi kalo misalkan kita share di medsos terutama facebook... bukannya ada keterangannya ya...

    ReplyDelete
    Replies
    1. Tergantung kode meta yang ada di template gan..
      Semua balik lagi ke kode meta opengraph nya, kalau og:image nya terpasang di foto profile author ntar yang muncul bisa - bisa foto yang digunakan untuk author..

      Delete
  11. bukannya lebih bagus kalau kita share yang tampil adalah gambar yangs esuai dengan artikel terebut? lebih beragam bukan? saya pakai share bawaan tempalte dan hasilnya seperti itu, tapi ada jjuga baberapa template blog yang share nya ga work seperti itu

    ReplyDelete
    Replies
    1. Kalau kita share URL konten ya betul gambar yang muncul adalah gambar yang ada didalam konten gan, sesuai dengan pendapat agan yaitu gambar yang relevan dengan isi konten..

      Contoh share di atas yang saya berikan, mungkin perlu diperhatikan lebih detil lagi bahwa contoh tersebut adalah contoh URL beranda atau URL halaman utama sebuah blog yang memuat beebrapa konten (bukan halaman per konten)

      Nah sangat tidak mungkin kalau URL beranda yang dishare kemudian memuat seluruh gambar setiap konten yang muncul di halaman beranda gan..

      Delete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...