bQsqpPcZvKyg8Vvzo6jobl9lgcVr4zroDMLffJhS
Bookmark

Cara Memasang Meta Tag Open Graph di Blog Kamu dengan Mudah

Memasang Open Graph
Untuk menginstruksikan Facebook dan layanan berbagi lainnya mengenai apa yang harus ditampilkan ketika postingan blog Anda dibagikan, maka Anda perlu memasang meta tag Open Graph.


Apa Itu Open Graph?

Open Graph adalah teknologi yang pertama kali diperkenalkan oleh Facebook pada tahun 2010 yang memungkinkan integrasi antara Facebook dan data penggunanya dengan situs web. Dengan memasang meta tag Open Graph ke sebuah konten postingan, Anda dapat mengidentifikasi elemen halaman mana yang ingin ditampilkan ketika seseorang membagikan postingan blog Anda.

Penjabaran Properti Meta Tag Open Graph

Di bawah ini adalah daftar properti dari meta tag Open Graph yang bisa Anda digunakan. Saya telah membuat daftar masing-masing berdasarkan tingkat kepentingannya. Juga, perlu dicatat bahwa tidak semua tag ini diperlukan, tetapi bisa saja membantu mengidentifikasi bagian-bagian halaman Anda dengan benar.
  1. og:title. Merupakan judul postingan yang akan ditampilkan.
  2. og:image. Merupakan thumbnail postingan yang akan ditampilkan.
  3. og:description. Adalah deskripsi postingan Anda
  4. og:type. Jenis objek atau halaman yang Anda buat. Beberapa jenis yang dapat digunakan adalah article, music.album, video.movie, dan website.
  5. og:url. URL kanonis dari suatu objek atau halaman.
  6. og:locale. Lokasi informasi. Secara default, nilainya adalah en_US.

Preview Postingan yang Memasang Open Graph

Di bawah ini adalah contoh tampilan meta tag Open Graph yang muncul di Facebook. Jika Anda sudah paham mengenai meta tag HTML, Anda akan segera melihat bahwa satu-satunya perbedaan nyata antara meta tag biasa dan meta tag Open Graph adalah atribut properti yang tersedia.
Preview Open Graph di Facebook
Untuk menambahkan tag Open Graph ke blog Anda, Anda harus terbiasa dalam mengedit Template Blogger Anda. Saya juga menyarankan untuk membuat cadangan templatenya sebelum melakukan perubahan agar jika terjadi kesalahan, Anda masih punya file template cadangan.
Edit HTML di Dasbor Blogger

Cara Memasang Open Graph

Seperti biasanya jika ingin mengedit template, Anda masuk dulu ke dasbor Blogger kemudian pilih "Tema" dan klik tombol "Edit HTML". Sebelum <head> dan sesudah <!DOCTYPE html> terdapat tag HTML. Tambahkan xmlns:og='http://ogp.me/ns#' pada tag HTML tersebut sehingga kodenya akan terlihat seperti di bawah ini.

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateVersion='2.5' expr:dir='data:blog.languageDirection' lang='id' xml:lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#'>

Setelah menambahkan XML namespace, silakan mulai memasang meta tag Open Graph yang ada di bawah ini. Pasang meta tag Open Graph-nya sebelum </head>.

<meta expr: content = 'data: blog.pageName' property = 'og: title' />
 <b: if cond = 'data: blog.postImageThumbnailUrl'>
   <meta expr: content = 'data: blog.postImageThumbnailUrl' property = 'og: image' />
 </ b: if>
 <meta expr: content = 'data: blog.title' property = 'og: title' />
 <meta expr: content = 'data: blog.canonicalUrl' property = 'og: url' />
 <b: if cond = 'data: blog.metaDescription'>
   <meta expr: content = 'data: blog.metaDescription' property = 'og: description' />
 </ b: if>

Ini akan menghasilkan meta tag Open Graph untuk judul, deskripsi, URL, dan gambar (jika ada di posting). Apabila masih ada meta tag Open Graph yang ingin Anda tambahkan, silakan kunjungi halaman Open Graph Protocol untuk informasi lebih lanjut.
1 komentar

1 komentar

Kebijakan berkomentar:
1. Meninggalkan komentar sebagai anonim tidak dibolehkan di blog ini.
2. Dilarang memasang link aktif dalam komentar.
3. Berkomentar sesuai topik.

Be nice and be respectful.
  • Seelike.me
    Seelike.me
    20 Agustus, 2021 22:13
    terimakasih tutorialnya kang.. untuk wordpress apakah ada plugin yg bisa mempermudah pembuatan meta tag open Graph?
    Media Surabaya
    Reply