Jumat, 04 September 2020

Membuat Postingan Blogger Valid AMP

   
Membuat Postingan Blogger Valid AMP - Semakin banyak saja website dan blog yang telah menerapkan Accelerated Mobile Pages (AMP) yang secara teknis memang menjadikan website atau blog bisa diakses lebih cepat. Setidak-tidaknya kelebihan teknis ini yang telah terbukti, adapun kelebihan lainnya masih perlu waktu untuk membuktikannya. Di antara yang perlu dibuktikan adalah peningkatan kunjungan atau penayangan.

Setelah menerapkan template blogger valid AMP, dan postingan-postingannya juga valid AMP, jumlah penayangan blog saya memang meningkat cukup signifikan. Tetapi saya tidak berani memastikan bahwa itu karena AMP.

Pendahuluan, ini bagian yang penting dibaca

Hingga hari ini konten tetaplah merupakan bagian terpenting dari sebuah website atau blog. Dan sebagian besar konten adalah tulisan. Dalam hal ini posisi gambar atau video misalnya, dapat menjadi pendukung tulisan atau malah sekedar pemanis.

Bila anda menulis konten tentang sejarah contohnya, kemudian anda menyisipkan gambar yang relevan dengan paparan yang ditulis, maka fungsi gambar di situ adalah sebagai pendukung. Tetapi bila anda menulis cerita bersambung, maka gambar yang anda sisipkan bisa saja hanya berfungsi sebagai pemanis.

Atau bila kita menulis berita, lalu di sana disisipkan foto yang relevan, maka fungsi foto tersebut adalah pendukung. Kehadiran foto tersebut memperkuat isi berita. Berbeda bila yang disisipkan hanyalah foto sebagai ilustrasi, itu hanya akan berfungsi sebagai pemanis semata.

Bila blog anda menggunakan AMP Auto Ads seperti blog saya ini, kehadiran gambar pemanis sebenarnya sudah tidak lagi dibutuhkan, karena iklan-iklan yang tampil di antara paragraf tulisan bisa sekaligus berfungsi sebagai pemanis. Jika prinsip ini dipakai, maka membuat postingan blogger yang valid amp menjadi sedemikian mudah, karena kita tidak perlu menyisipkan gambar.

Postingan Tanpa Gambar

Ketika kita memosting di blogger, antar paragraf biasanya dipisahkan oleh simbol <br />. Sebenarnya itu sudah cukup dan valid AMP, tetapi tidak akan bisa menampilkan AMP Auto Ads di tengah artikel. Solusinya adalah ganti simbol <br /> dengan simbol <p>. Jadi seperti ini :

Paragraf 1

<p>

Paragraf 2

<p>

Paragraf 3

<p>

Paragraf dan seterusnya.

<p>

Lakukan itu di work area HTML, bukan di work area Compose.

Postingan Gambar Valid AMP

Lalu bagaimana cara membuat postingan blogger valid AMP yang menggunakan gambar atau foto? Inilah caranya.

Gambar untuk Thumbnail

Thumbnail adalah gambar kecil yang biasa disertakan bersama snippet. Snippet sendiri adalah potongan awal postingan yang terdiri dari beberapa kata atau kalimat. Untuk Blogger yang valid AMP, cara menambahkan thumbnail-nya dengan format script berikut ini :

<noscript><img src='url gambar' width='lebar gambar' height='tinggi gambar' title='title gambar' alt='alt gambar' /></noscript>

Contoh :

<noscript><img height="56" width="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb_fo5L5ooSqmKbQEQ658Ebz06SdS99g1eEOZyuM3yo-A7steM4K1LoOUTzKrf-1nA1NUauJg4ZtsoOH6uhii8heWTMJ4g645uRlUsK4LsFGumJpxLdbIN7JpvfGYmAi2hYOympNdAtH8j/s1600/As-Shaff.thumb.webp" title="Mengajak Berbuat Baik Tapi Lalai" alt="Mengajak Berbuat Baik Tapi Lalai"/></noscript>

Penting : Cantumkan ukuran thumbnail sesuai dengan template Anda. Saya menyarankan rasionya adalah 16 :9. Saya sendiri menggunakan thumbnail berukuran tinggi 56px dan lebar 100px. Dan itu ukuran gambar sesungguhnya, bukan hasil dari parameter "responsive". Manfaat memberikan thumbnail berukuran kecil secara "real size" adalah akses blogger menjadi lebih cepat.

Gambar Postingan

Untuk gambar di postingan, gunakan script sebagai berikut :

<amp-img src='url gambar' height='720' width='1280' title='title gambar' alt='gambar' layout='responsive' noloading='noloading' > </amp-img>

Catatan : Berikan ukuran gambar dengan rasio 16 : 9. Tinggi minimal 720px dan lebar minimal 1280px. Bila tidak, akan ada peringatan tentang "gambar di bawah ukuran yang disarankan" ketika divalidasi oleh AMP Test.

Contoh :

<amp-img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXL2j-25FHrqg-vo_1lCGI9L6tgUhn7iMcNQH2hQL8WeTXEztELh6aKhAIY1bT6uywf4Pwf1ZEo2j3abIRMl5eC-hTjBq3plK8WuE4vzdHpcNbkJGjOClsxHY4r8A1ALWB1ZCPfbeaQlN/s320/Masker-min.JPG' height='720' width='1280' title='title gambar' alt='gambar' layout='responsive' noloading='noloading' ></amp-img>

Jangan lupa, lakukan itu di work area HTML, bukan di Compose. Selamat mencoba.

Demikianlah artikel dari Kontakmedia yang berjudul Membuat Postingan Blogger Valid AMP, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.