Menambahkan Meta Open Graph ke Blogger

-
Seorang bloger membuat konten, mungkin itu teks, video, gambar bahkan mungkin audio, atau mungkin kombinasi satu atau lebih dari teks, video, gambar. Setelah konten jadi, mau diapakan? Selain menunggu agar di-indeks mesin pencari, kita pengen juga membagikan konten kita tersebut melalui media sosial yang kita punya. Nah, agar konten yang kita share menarik, ada standar yang harus dipenuhi sebuah konten, yang dinamai dengan Open Graph, dengan meta ini, nantinya media sosial akan melakukan crawling dan secara otomatis menemukan bagian mana yang title, bagian mana description, dan mana gambarnya, sehingga ketika di-share jadi terlihat menarik seperti gambar di bawah ini, heheheh...

Contoh Open Graph Blogger di Facebook

Blogger Template Data

Berikut ini daftar template data yang berhasil muncul di blog ini:
+---------------------------------+---+----------------------------------------------------------+
| Variabel                        | : | Keterangan                                               |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.url                   | : | Current page URL                                         |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.homepageUrl           | : | Homepage URL                                             |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.pageTitle             | : | Nama blog, dalam contoh ini "@kholidfu"                  |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.pageType              | : | Page type:                                               |
|                                 |   | 'item'        => halaman single (detail),                |
|                                 |   | 'static_page' => halaman statis                          |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.pageName              | : | diambil dari H1 (judul) artikel                          |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.title                 | : | Nama blog, dalam contoh ini "@kholidfu"                  |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.postImageUrl          | : | Gambar pertama dalam artikel (kalau ada)                 |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.postImageThumbnailUrl | : | Gambar pertama dalam artikel versi thumbnail (kalau ada) |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.canonicalUrl.https    | : | Current page URL (https)                                 |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.metaDescription       | : | -                                                        |
+---------------------------------+---+----------------------------------------------------------+
| data:blog.snippet               | : | -                                                        |
+---------------------------------+---+----------------------------------------------------------+
| data:view.description           | : | Post snippet                                             |
+---------------------------------+---+----------------------------------------------------------+

Bagaimana caranya

Pertama, masuk ke bagian theme blogger, kemudian pilih Edit HTML, kemudian cari baris berikut:

<b:include data='blog' name='all-head-content'/>

Hapus dan ganti dengan baris berikut:

<!-- OpenGraph starts-->

<meta content='summary_large_image' name='twitter:card'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta expr:content='data:blog.pageTitle' name='description'/>
  <meta content='coder, programmer, developer, python, php, unix, linux, macos, nerd, geek' name='keywords'/>
  <meta expr:content='data:blog.pageTitle' property='og:title'/>
  <meta expr:content='data:blog.pageTitle' property='og:description'/>
  <meta expr:content='data:blog.pageTitle' property='twitter:description'/>
  <meta content='https://pbs.twimg.com/profile_images/1073146888436609024/47T26cn2_400x400.jpg' property='og:image'/>
  <meta content='https://pbs.twimg.com/profile_images/1073146888436609024/47T26cn2_400x400.jpg' property='twitter:image'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> - <data:blog.title/></title>
  <meta expr:content='data:blog.pageName' property='og:title'/>
  <meta expr:content='data:blog.pageName' property='og:description'/>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
  <meta expr:content='data:blog.pageName' property='twitter:description'/>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='twitter:text:title'/>
<meta content='@kholidfu' name='twitter:creator'/>
<meta expr:content='data:blog.canonicalUrl.https' name='twitter:site'/>

<!-- Title and URL -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl.https' property='og:url'/>
<meta expr:content='data:blog.canonicalUrl.https' property='twitter:url'/>

<!--Description-->
<meta expr:content='data:view.description' property='og:description'/>
<meta expr:content='data:view.description' property='twitter:description'/>
    
<!-- Image -->
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:elseif cond='data:blog.postImageUrl'/>
  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>   
<b:else/>
  <meta content='https://pbs.twimg.com/profile_images/1073146888436609024/47T26cn2_400x400.jpg' property='og:image'/>
  <meta content='https://pbs.twimg.com/profile_images/1073146888436609024/47T26cn2_400x400.jpg' name='twitter:image'/>
</b:if>

<meta expr:content='data:blog.locale' property='og:locale'/>

<!-- OpenGraph ends-->


Notes

content vs expr:content
Ini penting saya sampaikan bahwa keduanya direspon berbeda oleh server Blogger, kalau Anda ingin mengisi string, silakan gunakan tag content, tapi kalau ingin nilai dari sebuah variabel (data), maka gunakan expr:content. Contohnya, dalam baris meta berikut:

<meta expr:content='data:blog.pageTitle' name='description'/>

nilai dari data:blog.pageTitle secara otomatis akan berubah menjadi @kholidfu, karena ada keyword expr:content.

Simpan theme, kemudian kita uji apakah berhasil atau tidak dengan mengunjungi alamat berikut:

https://developers.facebook.com/tools/debug/sharing/

dan, untuk Twitter:

https://cards-dev.twitter.com/validator

Jika muncul seperti yang terlihat di gambar di atas, berarti Anda sudah berhasil, kalau belum ya silakan utak-atik lagi... 😝

Referensi

  1. The Open Graph protocol
  2. Facebook Sharing Debugger
  3. OpenGraph for Blogger (Gist)
  4. [SO] - Open Graph protocol code for Blogger and get the Post's Body
  5. Template data documentation

Comments

Post a Comment

Popular posts from this blog

Adding Image Alternate Text into WordPress Image Attachment using python-wordpress-xmlrpc Library

-
Problem I'm using python-wordpress-xmlrpc to create a post remotely into WordPress, all doing fine except when I'm uploading an attachment image, I can't set image alternate text ( alt="" ) to the corresponding image. Solution Create a custom WordPress plugin to extend the built-in WordPress XMLRPC method. Create a class in your python script to access that custom method. Example Here is the custom plugin I mentioned above [ link ]: <?php /** * Plugin Name: xmlrpc-extend * Description: xmlrpc-extend * Author: edgar galliamov * Author URI: * Version: 0.1 * Plugin URI: https://github.com/g-gabber */ /*************************************************************** * SECURITY : Exit if accessed directly ***************************************************************/ if ( ! defined ( 'ABSPATH' ) ) { die ( 'Direct acces not allowed!' ); } function wp_editMedia ( $args ) { global $wp_xmlrpc_server ; ...
Read more

Keutamaan Tidur yang Sedikit Menurut para Ulama

-
محمد بن الحسن لا ينَامُ من الليل إلا قليلا وقال العلامة طاشكبري زاده في مفتاح السعاده ومصباح السياده: (( كان محمد بن الحسن الشيباني الكوفي البغدادي، الإمام الفقيه المجتهد المُحدّث، تلميذ الإمام أبي حنيفة، ــ المولود سنة ١٣٢، والمتوفى سنه ١٨٩ رحم الله تعالى ــ لا ينامُ الليل، وكان يضع عنده دفاتر، ــ يعني كتباً ــ، فإذا ملّ من نوعٍ نظرَ في آخر، وكان يُزيلُ نومَهُ بالمءِ ويقول: إنَّ النوم من الحرارة )) "Muhammad bin Hasan hanya tidur sebentar pada malam hari" Imam Thoskubriy Zadah berkata di kitab "Miftahussa'adah wa Misbahusssiyadah": Muhammad bin Hasan Syaibaniy al Kufiy al Bagdadi, seorang imam yang ahli fikih, seorang mujtahid & muhadis murid Imam Abu Hanifah, lahir pada tahun 132 H dan wafat pada tahun 189 H, Tidak tidur pada malam hari kecuali hanya sebentar , beliau meletakkan kitab kitab di depannya, ketika ia bosan dari satu kitab ia akan membuka kitab yang lain dan saat ia merasa kantuk menghampiri, ia menghilangkannya dengan air seraya berkata "...
Read more

Kisah Nabi Uzair a.s.

-
Seorang nabi Allah meninggal selama 100 tahun, kemudian Allah SWT. menghidupkannya kembali dengan mukjizat yang belum pernah terjadi pada siapapun sebelumnya. Dia meninggal selama satu abad penuh dan terbangun seperti halnya ketika dia meninggal, sebagai seorang pemuda yang kuat. Selama kematiannya, hal-hal besar sudah terjadi (dengan kaum kerabat dan masyarakatnya), dan ketika dia bangun kembali, terdapat peristiwa yang lebih besar yang baru dimulai. Bagaimana kisahnya?  Para nabi dari Bani Israil begitu banyak sehingga tidak semua dari mereka disebutkan dalam Al-Quran. Hanya beberapa dari mereka yang disebutkan. Salah satu dari para nabi ini yang disebutkan dalam Al-Quran adalah nabi yang kisahnya akan kita ceritakan sekarang, kisah yang jarang diketahui banyak orang. Kisah nabi ini kembali ke lebih dari tiga ribu tahun yang lalu. Pada hari yang panas di sebuah desa (yang) tandus dan kering yang terletak beberapa kilometer jauhnya dari Baitul Maqdis (Palestina), hiduplah seorang ...
Read more