Indonesian (Bahasa Indonesia) translation by Kurniawan Sugi Purwanto (you can also view the original English article)
Tidak ada dua markup situs web yang dibuat setara. Begitu pula, sulit bagi platform media sosial seperti Facebok untuk menemukan potongan informasi yang benar dalam konten yang akan ditampilkan ketika suatu halaman dibagikan di News Feed.
Di sinilah Open Graph Protocol memainkan perannya; suatu inisiatif yang dikembangkan Facebook untuk memungkinkannya mengenali konten web dengan mudah dan menampilkannya dengan cantik di platform mereka.
Perhatikan dengan baik:
Ini memberikan pratinjau konten yang layak di Facebook Feed, dengan judul dan kutipan isi. Meskipun demikian, jika kita melihat konten di halaman demo, ternyata ada beberapa elemen yang bisa dimanfaatkan; seperti gambat dan nama penulis. Facebook tidak akan mengambil detail ini tanpa bantuan tertentu.
Maka mari kita lihat bagaimana Open Graph bisa digunakan untuk memperbaiki presentasi konten di Facebook.
Menggunakan Open Graph
Open Graph menentukan sejumlah meta tag untuk mendefinisikan meta informasi konten, serupa dengan meta tag yang diumpankan ke mesin pencari sebagaimana praktek SEO pada umumnya. Sebelum menambahkan meta tag tersebut, kita harus mengatur XML Namespace untuk Open Graph di html.
1 |
<!DOCTYPE html>
|
2 |
<html
|
3 |
xmlns:og="https://ogp.me/ns#" |
4 |
xmlns:fb="http://ogp.me/ns/fb#"> |
5 |
<head></head>
|
6 |
<body></body>
|
7 |
</html>
|
Konsep namespace di HTML serupa dengan bahasa web lainnya; untuk mencegah ambiguitas dalam struktur data. Hal ini merujuk pada kosa kata semantik atau sintaks yang harus digunakan apabila ada namespace yang tersedia di dokumen. Di kasus ini, namespace og merujuk pada Open Graph Protocol, sedangkan namespace fb merujuk pada spesifikasi Open Graph milik Facebook.
Sebagai alternatif kita bisa menggunakan atribut prefix untuk mendefinisikan namespace tersebut. Sebagai contoh:
1 |
<!DOCTYPE html>
|
2 |
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#"> |
3 |
<head></head>
|
4 |
<body></body>
|
5 |
</html>
|
Menambahkan Meta Tag Open Graph
Facebook membutuhkan sejumlah tag yang harus ada setiap saat.
Jenis Konten
Pertama, jenis konten, ditentukan dengan properti og:type. Di homepage, umumnya nilai ini diatur ke website.
1 |
<meta property="og:type" content="website" /> |
Dan umumnya diatur ke article untuk kontennya.
1 |
<meta property="og:type" content="article" /> |
Sejumlah kemungkinan lain juga bisa diatur di og:type adalah meta tag yang termasuk juga product, place, video.movie, books.book, dan banyak lagi jika konten Anda bukan artikel pada umumnya semacam kiriman blog atau berita.
Sebagai contoh:
1 |
<!-- Product Type: may be used in e-commerce product sites. -->
|
2 |
<meta property="og:type" content="product" /> |
3 |
|
4 |
<!-- Place Type: may be used in travel websites. -->
|
5 |
<meta property="og:type" content="place" /> |
6 |
|
7 |
<!-- Movie Type: may be used in movie review websites like iMDB or movie streaming website like Netflix. -->
|
8 |
<meta property="og:type" content="video.movie" /> |
Meta URL
URL konten, yang ditentukan dengan properti og:url, harus mengandung URL absolut halaman web tanpa string kueri atau hash, mirip dengan the canonical link. Di homepage, URLnya adalah URL homepage:
1 |
<meta property="og:url" content="https://tutsplus.github.io/" /> |
URL konten sedikit lebih detail:
1 |
<meta property="og:url" content="https://tutsplus.github.io/open-graph-protocol/" /> |
Meta Judul
Meta judul, ditentukan dengan properti og:title, mendefinisikan judul pratinjau. Nilai untuk judul tidak selalu sesuai dengan judul yang diatur di tag title; Anda bisa memilih untuk mengubah, atau menyingkat judul untuk dibagikan.
Misalnya, konten halaman ini adalah tentang CSS dan diberi judul sesuai tujuan media sosial "Belajar CSS: Panduan Lengkap". Meskipun demikian, judul dokumen sebenarnya adalah "Open Graph Protocol—Tuts+", jadi:
1 |
<meta property="og:title" content="Learn CSS: The Complete Guide" /> |
Tidak ada batasan karakter untuk og:title, tapi Facebook dikenal suka sesekali memotong judul, terutama untuk konten yang dibagikan di thread komentar, yang ruangnya sempit.
Meta Deskripsi
Meta deskripsi, ditentukan dengan tag og:description, menyediakan kutipan konten yang dibagikan.
1 |
<meta property="og:description" content="A comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS."> |
Facebook tidak menentukan jumlah karakter atau batasan kata untuk deskripsi. Tetapi Facebook masih akan memotong deskripsi jika terlihat sesuai, jadi pastikan deskripsi tetap pendek dan menarik.
Meta Gambar
Meta gambar didefinisikan dengan og:image, memungkinkan Anda secara visual merepresentasikan konten, dan nilainya tidak selalu harus gambar yang ada dalam konten. Gunakan gambar terbaik untuk menarik pembaca mengkliknya dan akhirnya membaca kontennya.
1 |
<meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" /> |
Selain URL, Anda juga bisa menambahkan meta tag yang mengatur ukuran gambar dan jenis MIME gambar. Berbagai meta tag tersebut bersifat opsional, tapi akan memudahkan beban kerja Facebook ketika berurusan dengan parsing dan caching gambar.
1 |
<meta property="og:image:width" content="850"> |
2 |
<meta property="og:image:height" content="450"> |
3 |
<meta property="og:image:type" content="image/png" /> |
Ukuran minimal gambar dibatasi pada 200x200 piksel, tapi Facebook merekomendasikan ukuran gambar sebesar 1200x630 piksel untuk hasil yang sebaik mungkin.
Mungkin Anda juga ingin mempertimbangkan rasio aspek gambar Anda:
"Cobalah mempertahankan rasio aspek gambar sedekat mungkin dengan 1.91:1 untuk menampilkan gambar penuh di News Feed tanpa memotong (cropping)." – Facebook Developers
ID Aplikasi Facebook
Di dalam Facebook, menambahkan Facebook App ID dengan meta tag fb:app_id sangat disarankan. App ID akan memungkinkan Facebook menautkan situs web Anda dan menghasilkan ikhtisar yang komprehensif tentang bagaimana pengguna berinteraksi dengan situs web dan konten Anda.
1 |
<meta property="fb:app_id" content="1494084460xxxxxx"> |
Anda boleh mengabaikannya, jika tidak butuh terhadap analisis situs web Anda.
Meta Tag Tambahan
Ada sejumlah meta tag opsional, tapi akan bermanfaat untuk kasus-kasus tertentu.
Nama Situs
Nama situs ditentukan dengan meta tag og:site_name. Meta tag tersebut mendefinisikan nama website, atau lebih tepatnya brand situs web Anda. Brand situs web atau namanya tidak selalu sama dengan nama domain Anda. Tuts+, untuk kasus ini, adalah contoh yang bagus.
Berdasarkan panduan branding kami, ini seharusnya ditulis Tuts+ bukannya Tutsplus, tetapi nama domainnya adalah tutsplus.com karena domain tidak bisa mengandung karakter +, sehingga:
1 |
<meta name="og:site_name" content="Tuts+"> |
Facebook tidak menunjukkan nama situs di konten yang dibagikan. Melainkan, Anda akan menemukannya tampil di notifikasi ketika Anda memasang suatu Facebook Social Plugin seperti Facebook Comment di situs web Anda.
Meta Tag terkait Tipenya
Terdapat sejumlah meta tag yang terkait dengan tipe konten tertentu. Sebagaimana tersirat, tag-tag ini tergantung pada nilai yang ditentukan dalam meta tag og:type. Di sini ada suatu article. Suatu article bisa diiringi oleh sejumlah meta tag pendukung seperti article:author, article:published_time, article:publisher, article:section, dan article:tag.
Sebelum mengikutkan beberapa meta tag tersebut, kita akan menambahkan namespace baru yang menunjuk ke spesifikasi Artikel Open Graph. Jadi, di titik ini, ada 3 namespace yakni og, fb, dan article.
1 |
<!DOCTYPE html>
|
2 |
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> |
3 |
<head></head>
|
4 |
<body></body>
|
5 |
</html>
|
Penulis Artikel
Menurut Faceboook, meta tag article:author harus mengandung URL profil Facebook atau identitas penulis artikel.
1 |
<meta name="article:author" content="https://www.facebook.com/johndoe"> |
Menambahkan lebih dari satu URL atau ID dibolehkan dalam kasus ada beberapa penulis yang berkontribusi untuk artikelnya.
1 |
<meta name="article:author" content="https://www.facebook.com/johndoe, https://www.facebook.com/janedoe"> |
Tip: Jika penulis tidak punya akun Facebook, Anda bisa mengganti article:author dengan meta tag author berikut.
1 |
<meta name='author' content='John Doe' /> |
Facebook akan menampilkan nama penulis di pratinjau, sebagaimana berikut.
Meskipun Facebook menyarankan untuk memasukkkan tag artikel seperti article:published_date dan article_section, keduanya tidak banyak punya nilai tambah pada saat penulisan. Kecuali Anda berurusan dengan suatu halaman Instant Article.
Sebagaimana disebutkan, tag-tag tersebut sangat tergantung jenis konten Anda. Jika kontennya video.movie, tag-tag yang lebih sesuai adalah video:actor, video:director, dan video:duration dibandingkan articles:published_date.
Untuk alasan itu, saya biarkan Anda mengeksplorasi Open Graph lebih lanjut. Facebook telah menyediakan materi referensi yang komprehensif tentang meta tag tersebut berikut sejumlah contoh kode snippet.
Rangkuman
Semenjak diluncurkan Open Graph telah diadopsi oleh platform media sosial lainnya dalam berbagai bentuk seperti Twitter (meskipun Twitter juga memiliki markup miliknya sendiri yang bernama Twitter Cards), Pinterest, LinkedIn, dan Google+. Di tutorial ini kita melihat sejumlah kecil meta tag Open Graph dan memanfaatkannya untuk membuat pratinjau konten kita lebih menarik.
Akhirnya, jika Anda mendapati konten Anda tidak ditampilkan sebagaimana yang diharapkan, gunakan Facebook Sharing Debugger untuk menemukan apa yang salah dengan markup-nya.
Referensi Lebih Lanjut
By
