Langsung ke konten utama

Membuat Format Instant View Dari Blogspot

Punya konsep yang sama dengan Google AMP, setiap artikel web yang diformat Instant View akan ditampilkan dalam kecepatan ekstrim zero time loading. Berikut tips dalam mengkonversi artikel Blogspot untuk tampil dalam Instant View.

Tampil dalam kecepatan tinggi dimungkinkan karena dua hal penting: Cache Server-side dan konten minimalis. Ini artinya anda harus siap mengorbankan aksesoris-aksesoris di tampilan web atau blog yang dianggap pemborosan oleh Instant View. Menampilkan dalam Instant View atau AMP punya andil penting mendongkrak rating SEO.

#1 - BERALIH KE MODE EDITOR HTML VIEW

Google tidak terlalu memberikan ruang bebas kustomisasi di Blogspot. Sisi kekurangan dari Blogspot adalah editor post bawaannya seringkali bertindak di luar keinginan terkadang menambahkan kode tidak perlu menyelusup ke dalam artikel.

Inilah yang membuat anda harus perlu mengubah mode editor dari Compose view ke HTML view di Blogspot untuk memaksakan kustomisasi.

Perlu trik untuk mengatasi error dalam Instant View Editor saat mencoba mengkonversi artikel Blogspot. Hampir semua trik tersebut dilakukan dalam mode HTML view.

#2 - PASTIKAN KELENGKAPAN META INFORMASI

Telegram Instant View selalu membaca terlebih dulu informasi-informasi yang disediakan di bagian <HEAD> dari laman web untuk mendapatkan informasi yang dibutuhkan saat men-generate preview seperti judul dan deskripsi, alamat link dari fitur gambarnya, alamat link dari artikel tersebut, nama blogspot atau nama situs, yang biasanya ditempatkan di bagian tag <META> di bagian <HEAD>

Versi terbaru Blogspot memobilisasi semua informasi META dalam satu perintah tag <b:include data='blog' name='all-head-content'/> jadi sulit untuk mengkustomisasinya. Kelengkapan informasi META ini sangat penting untuk kesempurnaan preview di Telegram atau aplikasi manapun saat sebuah link artikel di share.

#3 - TEMPATKAN GAMBAR FITUR PALING ATAS

Ini adalah trik yang tidak selalu efektif tapi terkadang berpengaruh ketika gambar fitur dari artikel ditempatkan terlebih dulu sebelum potongan paragraf awal [snippet]. Setidaknya untuk memudahkan Instant View nantinya dalam mendeteksi gambar fitur di dalam artikel sebagai pengganti bilamana tidak tersedia di informasi META HEAD.

#4 - MERUJUK KE TEMPLATE CONTOH

Gunakan Template Instant View atau jadikan rujukan untuk percepatan meracik Instant View laman web artikel anda.

#5 - GUNAKAN EDITOR INSTANT VIEW

Telegram menyediakan editor online untuk meracik komposisi Instant View dari laman web artikel anda tanpa perlu instalasi. Preview akan reflek tampil setiap kali ada perubahan di template.

Gunakan tombol View in Telegram di sudut kanan atas untuk melihat hasil tampilannya di aplikasi Telegram.

Klik tombol Track Changes untuk mencatat perubahan-perubahan template anda

#6 - KONTEN MINIMAL UNTUK GENERATE INSTANT VIEW

Instant View mempunyai format bahasa tersendiri mengutamakan efisiensi dan presentatif. Cukup dengan konten minimalis berikut untuk men-generate Instant View dari artikel Blogspot:

#7 - TROUBLESHOOTING

Umumnya error terjadi karena terdapat kode html yang belum didukung oleh Instant View. Selengkapnya daftar format yang kompatibel dengan Instant View bisa dilihat di sini.

ERROR IMG

Error ini dikarenakan Instant View tidak memperkenankan gambar yang mengadung link saat gambar tersebut diklik. Blogspot secara default akan menambahkan Image lightbox semacam overlay untuk menampilkan secara instan dari ukuran sebenarnya gambar tersebut.

Perilaku ini mengakibatkan setiap gambar akan disisipkan kode anchor link, dan inilah yang membuat tidak kompatibel dengan Instant View.

Untuk mengakalinya bila memang tetap diperlukan adanya link pada gambar tersebut triknya mengganti dengan tambahan parameter onclick:

Dari yang semula:

Menjadi:

ERROR EMBED

Default Blogspot akan selalu menggunakan tag embed setiap kali anda menyisipkan video ke dalam artikel yang belum kompatibel dengan format Instant View. Embed iFrame yang didukung terbatas dari kanal populer seperti Youtube dll [selengkapnya]. Untuk memperbaiki ini ganti penggunaan tag embed menjadi tag video HTML5:

REFERENSI MANUAL

Anda bisa lebih banyak berimprovisasi dengan merujuk pada Referensi Manual Instant View.

#8 - PUBLIKASI HASIL KREASI

Publikasi template kreasi anda akan di-review oleh Tim Telegram dengan ketentuan catatan Track Changes dari 10-15 laman artikel dipastikan tidak ada error.

Segera setelah tercatat berhasil dalam Track Changes, akan muncul tombol Submit Template di tampilan Instant View Editor untuk dikirimkan ke Tim Telegram.

Pada akhirnya nanti setiap kali link publik blog atau situs anda di share di Telegram akan otomatis dihadirkan tombol untuk melihat versi Instant View.

Dapatkan skrip semua materi di repository

Dukung donasi agar tutorial ini tetap operasional:
Trakteer Saya SiLiKiDi

Komentar

Postingan populer dari blog ini

Tombol Menu Reply Markup Dengan Custom Keyboard dan Inline Keyboard

Membuat tombol menu di Bot Telegram dapat menambah aktraktif tampilan bot dan tentunya mengganti peran command bot dari yang masih konvensional dengan kode karakter.

Posting Telegram Otomatis dan Terjadwal Tanpa Coding Pemrograman

Konten yang dinamis selalu up-to-date akan membuat Group dan Channel terasa hidup dan segar. Dengan Telegram anda bisa melakukan postingan otomatis yang terjadwal dengan dua cara tanpa perlu membuat script cron job atau bot.