Setting Meta Tag Open Graph - Dalam dunia blogging meta tag open graph tentu sudah tidak asing lagi bagi para blogger yang sudah memiliki banyak jam terbang. Bahkan sebagian blogger mengangap bahwa meta tag Open Graph merupakan salah satu teknik Optimasi SEO. Sebenarnya menerapkan meta tag Open Graph ke dalam html situs web tidak akan memberikan pengaruh SEO secara langsung atau spontan, Akan tetapi meta tag Open Graph akan memengaruhi kinerja tautan situs web di media sosial. Sekitar tahun 2010 Open Graph mulai dikenalkan oleh facebook, open graph mempromosikan integrasi antara Facebook dan situs web lain dan memungkinkan situs web kaya akan "grafik".
Penjelasan sederhana-nya Open Graph menjadi kontrol terhadap perpindahan informasi dari situs web ke facebook dan dari facebook ke situs web ketika halaman atau tautan situs dibagikan, disukai dll, Secara teknik informasi tersebut dikirim melalui meta tag Open Graph yang dipasang di bagian <head> situs web.
Mari kita simak contoh thumbnail meta tag open graph home page pada gambar di atas, thumbnail tersebut tentu tidak terbentuk begitu saja melainkan meta tag open graph yang mengatur nya. Perhatikan tanda dengan angka 1 sampai 4, Ke-empat bagian tersebut diatur oleh 4 property meta tag open graph yang berbeda seperti berikut;
Bagaimana jika meta tag open graph tidak menerapkan property og:image:width dan og:image:height? Tanpa property og:image: width dan height, gambar thumbnail akan ditampilkan kecil dan sembarang atau bahkan tidak tampil sama sekali ketika tautan situs di share ke sosial media seperti contoh dibawah ini.
Catatan: settingan meta tag open graph seperti diatas hanya sebagai contoh dan hanya berlaku pada sosial media facebook dan google plus saja, sedangkan meta tag untuk twitter akan sedikit berbeda karena twitter memiliki meta tag sendiri yaitu "Twitter Card" namun jika robots twitter tidak menemukan meta tag twitter card pada situs web maka twitter akan mengambil data dari meta tag Open Graph. Berikut ini saya akan membagikan meta tag open graph lebih lengkap dan sudah di optimalkan (Perpaduan meta tag Open Graph dengan Twitter Card). Kamu dapat menerapkan-nya ke dalam html situs blog (blogger) yang kamu kelola.
Pemirsa besar yang ada di Facebook dan Twitter sering kali menjadi batu loncatan setiap konten baru untuk mendapat rating di serp melaui jumlah tayangan laman yang di dapat. Tanpa pengoptimalan meta tag open graph tentu saja sulit bagi konten untuk bersaing di media sosial kerena umumnya media sosial populer (facebook, Twitter, LinkedIn, dan Google+) memanfaatkan meta tag open graph untuk mengenali situs dan memaksimalkan kinerja tautan situs di laman mereka.
Disana kamu dapat melihat missing meta tag open graph dan mendapatkan instruksi untuk memperbaiki bagian-bagian meta tag yang mis (error).
Demikian artikel "Setting Meta Tag Open Graph Media Sosial (Facebook, Twitter, dan Google+)", lebih dan kurang mohon maaf. Akan datang saya masih akan membahas mengenai meta tag lainnya yang bermanfaat untuk situs web, subscribe situs ini untuk mendapatkan pemberitahuan "informasi atau artikel" terbaru mengenai meta tag dan trick-trick blogging lain-nya. See you bye!
Penjelasan sederhana-nya Open Graph menjadi kontrol terhadap perpindahan informasi dari situs web ke facebook dan dari facebook ke situs web ketika halaman atau tautan situs dibagikan, disukai dll, Secara teknik informasi tersebut dikirim melalui meta tag Open Graph yang dipasang di bagian <head> situs web.
Meta Tag Open Graph Dasar
Berikut ini adalah meta tag Open Graph yang paling dasar untuk di terapkan pada header situs web, lebih tepatnya meta tag open graph di letakkan diantara kode <head> dan </head> pada html situs.<b:if cond='data:blog.metaDescription != ""'>Catatan: Meta tag tersebut belum final dan masih perlu perbaikan di beberapa bagian, saya sengaja memisahkan meta tag basic (dasar) dengan metode atau cara memperbaiki meta tag open graph tersebut agar saya dapat menjelaskan beberapa fungsi dari bagian-bagian meta tag Open Graph.
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if></b:if>
<!-- Metadata Facebook -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='1824105131201217' property='fb:app_id'/>
<meta content='100009286926617' property='fb:admins'/>
<!-- Metadata Twitter -->
<meta name='twitter:card' value='summary'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@publisher_handle' name='twitter:site'/>
<meta content='@author_handle' name='twitter:creator'/>
<!-- Google Authorship and Publisher Markup -->
<link href='https://plus.google.com/+AbdulSomad88/about' rel='author'/>
<link href='https://plus.google.com/+AbdulSomad88/posts' rel='publisher'/>
<!-- Schema.org markup for Google+ -->
<meta expr:content='data:blog.pageTitle' itemprop='name'/>
 |
| Meta Tag Open Graph |
- og:image - untuk menampilkan gambar thumbnail
- og:site_name - judul situs
- og:description - deskripsi situs
- og:url - url atau tautan situs
<meta content='https://3.bp.blogspot.com/your_image_url.png' property='og:image'/>Atau untuk situs blogger meta tag open graph dapat di kombinasikan dengan tag data sehingga menjadi seperti dibawah ini.
<meta content='TUKANG LISTRIK BATAM' property='og:site_name'/>
<meta content='Cara setting meta tag open graph media sosial (facebook, twitter, dan google+) - tutorial blogger.' property='og:description'/>
<meta content='https://tukanglistrikpulaubatam.blogspot.com/' property='og:url'/>
<meta content='https://3.bp.blogspot.com/your_image_url.png' property='og:image'/>Tag data expr:content contoh: data:blog.metaDescription akan secara otomatis meng-ekspor data deskripsi situs web untuk di tampilkan oleh meta tag open graph. Kemudian pada property og:image kita perlu menambahkan meta tag property width dan height untuk mengatur lebar dan tinggi gambar thumbnail ketika tautan di share ke sosial media (Facebook, Twitter, dan Google+), berikut meta tag nya.
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='1200' property="og:image:width'/>Ukuran thumbnail di atas akan menampilkan gambar thumbnail besar sehingga menjadikan content situs lebih menonjol dari yang lainnya. Dengan thumbnail yang lebih menonjol tersebut kontent akan lebih berpeluang mendapatkan jumlah tayangan yang lebih banyak. Hanya saja size image jangan melebihi batas ukuran 5MB.
<meta content='800' property='og:image:height'/>
Bagaimana jika meta tag open graph tidak menerapkan property og:image:width dan og:image:height? Tanpa property og:image: width dan height, gambar thumbnail akan ditampilkan kecil dan sembarang atau bahkan tidak tampil sama sekali ketika tautan situs di share ke sosial media seperti contoh dibawah ini.
 |
| Fix missing meta tag open graph |
<b:if cond='data:blog.metaDescription != ""'>Instruksi:
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if></b:if>
<!-- Metadata Facebook -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='https://3.bp.blogspot.com/your_image_url.png' property='og:image'/>
<meta content='1824105131201217' property='fb:app_id'/>
<meta content='100009286926617' property='fb:admins'/>
<meta content='530560420444100' property='fb:pages'/>
<!-- Metadata Twitter -->
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@ListrikBatam' name='twitter:site'/>
<meta content='@ListrikBatam' name='twitter:creator'/>
<meta content='1200' name='twitter:image:width'/>
<meta content='800' name='twitter:image:height'/>
<link href='https://www.blogger.com/profile/116107967974314978362/about' rel='author'/>
<link href='https://www.blogger.com/profile/116107967974314978362/posts' rel='publisher'/>
<link href='https://plus.google.com/+AbdulSomad88' rel='me'/>
<meta content='Abdul Somad' name='Author'/>
<!-- Schema.org markup for Google+ -->
<meta expr:content='data:blog.pageTitle' itemprop='name'/>
- Ganti semua yang ditandai dengan warna merah pada meta tag open graph di atas (url gambar, id facebook, id fanspage, app id, id gplus, username twitter dll) dengan id sosial media kamu sendiri.
- Letakkan kode meta tag open graph diatara kode <head> dan </head> pada html situs blog anda.
Kenapa Meta Tag Open Graph Sangat Penting
Saya fikir kita semua sepakat bahwa konten merupakan tulang punggung untuk mendatangkan visitor ke situs web. Namun terkadang dalam pemasaran konten atau post baru mengalami kesulitan untuk menjangkau khalayak yang lebih luas. Solusi yang paling mudah untuk mengatasi hal tersebut adalah dengan berbagi di media sosial.Pemirsa besar yang ada di Facebook dan Twitter sering kali menjadi batu loncatan setiap konten baru untuk mendapat rating di serp melaui jumlah tayangan laman yang di dapat. Tanpa pengoptimalan meta tag open graph tentu saja sulit bagi konten untuk bersaing di media sosial kerena umumnya media sosial populer (facebook, Twitter, LinkedIn, dan Google+) memanfaatkan meta tag open graph untuk mengenali situs dan memaksimalkan kinerja tautan situs di laman mereka.
Meta Tag Open Graph Tester
Menurut saya optimasi meta tag open graph seperti yang saya bagikan sudah cukup baik untuk situs blogger, namun jika kamu masih ingin melakukan optimasi (pengoptimalan meta tag) kamu dapat memeriksakan meta tag open graph situs kamu dengan bantuan tool facebook developers debugger [kunjungi laman].Disana kamu dapat melihat missing meta tag open graph dan mendapatkan instruksi untuk memperbaiki bagian-bagian meta tag yang mis (error).
Demikian artikel "Setting Meta Tag Open Graph Media Sosial (Facebook, Twitter, dan Google+)", lebih dan kurang mohon maaf. Akan datang saya masih akan membahas mengenai meta tag lainnya yang bermanfaat untuk situs web, subscribe situs ini untuk mendapatkan pemberitahuan "informasi atau artikel" terbaru mengenai meta tag dan trick-trick blogging lain-nya. See you bye!
Tags:
Blogger Tips