Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO
Webdesign

Open Graph: Mengambil Kendali Bagaimana Media Sosial Membagikan Halaman Web Anda

by
Difficulty:BeginnerLength:ShortLanguages:

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:

Halaman yang ditampilkan di Facebook feed tanpa meta tags Open Graph.

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.

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:

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.

Dan umumnya diatur ke article untuk kontennya.

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:

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:

URL konten sedikit lebih detail:

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: 

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. 

Facebook memotong judul dan deskripsi konten yang dibagikan di Wall Facebook

Meta Deskripsi

Meta deskripsi, ditentukan dengan tag og:description, menyediakan kutipan konten yang dibagikan.

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.

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.

Ukuran minimal gambar dibatasi pada 200x200 piksel, tapi Facebook merekomendasikan ukuran gambar sebesar 1200x630 piksel untuk hasil yang sebaik mungkin.

Gambar kecil vs besar di konten Facebook yang dibagikan

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.

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:

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.

Penulis Artikel

Menurut Faceboook, meta tag article:author harus mengandung URL profil Facebook atau identitas penulis artikel.

Menambahkan lebih dari satu URL atau ID dibolehkan dalam kasus  ada beberapa penulis yang berkontribusi untuk artikelnya.

Tip: Jika penulis tidak punya akun Facebook, Anda bisa mengganti article:author dengan meta tag author berikut.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.