Memasang Open Graph dan Twitter Card Pada HTMLy
Pernahkah anda membagikan link blog atau link artikel blog ke sosial media seperti facebook dan twitter?
Jika iya pasti anda memperhatikan ketika anda membagikan link blog anda pasti akan muncul kota hasil cuplikasin seperti judul, deskripsi, thumbnail, dll.
Mungkin anda pernah memperhatikan jika tampilan cuplikan dari link yang dishare ini bisa berbeda dari satu web ke web yang lain.
Ada yang cuplikan gambarnya kecil, ada yang besar, bahkan ada yang tidak muncul sama sekali.
Untuk bisa mendapatkan cuplikan yang baik dan sempurna ketika kita share blog atau web kita di sosial media kita perlu memasang 2 meta tag tambahan yaitu Open Graph (untuk facebook) dan Twitter Card (untuk twitter).
Nah kali ini saya akan membuatkan tutorial untuk menambahkan kedua meta tag sosial media tersebut di CMS HTMLy.
Karena secara default memang HTMLy sekarang ini belum dilengkapi kedua jenis meta tag tersebut, so akan lebih baik kita pasang sendiri terlebih dahulu.
Cara Memasang Meta Tag Open Graph dan Twitter Card di HTMLy
Pertama silakan masuk ke cpanel hosting blog kalian masing-masina.
Kedua silakan masuk ke File Manager / Pengolahan File untuk melakukan pengeditan file template HTMLy nantinya.
Jika sudah masuk ke file manager silakan ke public_html masuk ke folder instalan HTMLy kalian. Pilih folder themes lalu pilih folder themes yang sekarang ini anda gunakan, misal saya logs.
Cari file yang bernama layout.html.php silakan klik kanan dan pilih edit.
Anda bisa menambahkan meta tag open graph dan twitter card ini diantara kode <head> sampai </head> , saya sendiri menambahnya dibawah kode <meta name="description" content="<?php echo $description; ?>"/>
Silakan dicopy kode
<meta name="twitter:site" content="@usernametwitterblog"/>p
<meta name="twitter:creator" content="@usernametwitteranda"/>
<meta property="og:url" content="<?php echo $canonical; ?>"/>
<?php if (is_index()) { ?>
<meta name="twitter:card" content="summary" />
<meta property="og:type" content="website"/>
<?php } else { ?>
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="article"/>
<?php } ?>
<meta property="og:title" content="<?php echo $title;?>"/>
<meta property="og:description" content="<?php echo $description; ?>"/>
<meta property="og:image" content="<?php echo $p->image; ?>"/>
<meta property="og:locale" content="id_ID" />Silakan ganti
@usernametwitterblog dengan username akun twitter blog anda / jika tidak punya bisa username twitter anda sebagai penulis.
@usernametwitteranda dengan username akun twitter anda sebagai penulis.
Catatan:
Untuk dapat mengisi value dari og:image dimana kita mengambil value dari $p->image kita perlu menulis artikel dengan jenis Image Post
Lalu mengisikan url untuk Featured Image.
Atau jika anda sudah terlanjur menulis dengan tipe Reguler Post maka bisa melakukan pengeditan di file manager.
File Manager > public_html > content > usernamehtmlyanda > blog > categorypost > lalu klik kanan untuk edit file postingan yang sudah dipublikasi dengan tipe reguler post
Silakan tambahan kode dibawah kode <!-- tag --> , berikut kodenya <!-- image disini_link_url_gambar image -->
Contohnya seperti gambar dibawah ini.
Jika sudah tekan simpan.
Kode open graph dan twitter card diatas saya gunakan yang penting dan esensial saja sesuai dengan guideline dari situs resminya: Getting Starter Twitter Card dan Facebook Webmaster.
Anda bisa cek hasilnya melalui tools validator disini: Sharing Debugger Facebook dan Twitter Card Validator. Jangan lupa bersihkan cache sebelum melakukan pengujian.
Mungkin itu dulu sedikit pembahasan saya tentang meta tag open graph dan twitter card pada platform HTMLy, semoga bisa bermanfaat.
Jika ada pertanyaan bisa diskusikan di kolom komentar dibawah.