GagakTekno

Cara Membuat Postingan Valid AMP


Banyak sekali blogger yang belum paham dengan AMP (Accelerated Mobile Pages) termasuk saya sendiri yang masih belajar AMP meski sekarang sudah paham dari segi penambahan class pada AMP dan membuat sebuha postingan benar-benar valid amp. Kebanyakan bagi yang baru menggunakan AMP akan pusing dengan penambahan img di amp dan juga bagaimana untuk membuat post yang valid amp? Tentu saja ini yang akan saya bahas untuk sobat yang baru belajar dengana AMP, kebanyakan untuk post sekarang saya akan membahas AMP karena untuk membagikan pengalaman juga dan agar sobat bisa paham dengana AMP.

Kenapa sebuah post dikatakan tidak valid amp? dari yang saya pelajari untuk blog kita harus melakukan optimasi secara manual dari Tag seperti img, style, iframe dan lainnya. Saya sendiri waktu pertama belajar amp kebanyakan postingan tidak valid amp dan semuanya Error. Pastinya jika sebuah post tidak valid amp kita tidak akan mendapatkan keuntungan menggunakan Template AMP karena jika post valid amp pasti ada keuntungannya yaitu pada search engine blog kita akan ada tanda AMP disebelah urlnya dan itulah keuntungan dari amp selain disukai oleh Google sendiri.

Lantas apa saja yang harus dilakukan untuk membuat post yang valid amp? yang harus sobat lakukan adalah melakukan optimasi pada beberapa Tag saja dengan begitu postingan yang tadinya tidak valid akan berubah menjadi valid amp dan hal ini sobat terus pelajari sampai bisa dengan begitu akan mudah sekali jika sudah terbiasa menggunakan Template AMP.

Langsung saja ke topik pembahasan agar mempercepat pembelajar tentang AMP dan sobat bisa paham dengan beberapa Tag yang saya maksud ini. Bila sobat tidak paham bisa berkomentar atau contact saya mungkin nanti akan saya balas jika tidak sibuk.

Cara Membuat Postingan Valid AMP


Tidak Boleh ada style Pada Postingan


Kenapa Tag style ini dapat berpengaruh ke AMP? pada template amp kita tidak diperbolehkan untuk membuat sebuah tag HTML dengan CSS inline seperti
ataupun lainnya. Hal ini dikarenakan pada sebuah template amp kita tidak bisa leluasa untuk menambahkan sebuah tag tanpa aturan yang terdapat pada amp berbeda dengan non amp yang bisa kita sesuaikan bila ada yang kurang. Lantas bagaimana cara untuk mengatasi hal tersebut? tentu saja kita harus menambahkan class pada tag tersebut, untuk lebih jelasnya seperti kode dibawah ini :
Kode yang belum dioptimasi
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="408" data-original-width="765" src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" /></a></div>
Kode yang sudah dioptimasi
<div class="separator">
<img data-original-height="408" data-original-width="765" src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" /></div>
Sobat pasti akan melihat perbedaanya di tag style dan class, kenapa menggunakan class? karena class bukan inline tetapi eksternal mungkin itu menurut saya tapi bila salah sobat bisa berkomentar agar saya bisa lebih paham lagi.

Menambahkan Gambar Postingan di Luar

Dari kebanyakan orang pasti akan bermasalah pada bagian ini karena kebiasaan yang langsung Publish Post tanpa disadari seletah selesai membuat sebuah postingan. Akan tetapi jika di template amp kita harus merubah tag img tersebut agar valid amp kenapa tidak bisa langsung saja? seperti yang saya katakan diatas pada tag img ada tag inline yang tidak boleh di amp.

Maka dari itu kita harus merubahnya agar menjadi valid amp untuk merubahnya cukup mudah sobat klik pada bagian HTML pada postingan setelah menambahkan sebuah gambar.

Kemudian lihat kode berikut :
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="408" data-original-width="765" src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" /></a></div>
Sobat ubah menjadi seperti ini :
<noscript><img data-original-height="408" data-original-width="765" src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" /></noscript>

Menambahkan Gambar Postingan di Dalam

Cara ini masih sama dengan yang diatas hanya saja yang berbeda cuman menampahkan Tag amp saja agar gambar bisa dilihat dibagian postingan blog. Untuk lebih jelasnya seperti ini kodenya.
<amp-img 
alt="alt gambar "
title="title gambar "
width="650"
height="350" 
layout="responsive" 
on="tap:lightbox1" 
role="button" 
src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" 
tabindex="0">
</amp-img>
Dan tambahkan kode di dibawah ini pada postingan paling atas supaya ketika gambar di klik bisa full screen. Jika tidak ingin menambahkan kode di bawah ini maka kode tabindex=”0” pada <amp-image di atas harus dihapus.
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
Sehingga menjadi seperti ini:
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

<noscript>
<img alt="alt gambar " 
title=" title gambar "
width="650" 
height="350" 
src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg"/>
</noscript>

TULISAN ARTIKEL

<amp-img 
alt="alt gambar "
title="title gambar "
width="650"
height="350" 
layout="responsive" 
on="tap:lightbox1" 
role="button" 
src="https://1.bp.blogspot.com/-d51LKEnG2ao/W4G4zMKyfrI/AAAAAAAACBo/rUgSaH0I72I3XIh1Dc0H0DmgjNJoiiVuwCLcBGAs/s1600/amp.jpg" 
tabindex="0">
</amp-img>
TULISAN ARTIKEL dst..

Sobat ubah ukuran gambar harus disesuaikan dengan lebar dan tinggi gambar asli
Mungkin waktu pertama kali melakukan optimasi pasti Error tapi disitu lah telak keberhasilan yang akan sobat dapatkan, maka dari itu jangan menyerah jika saat membuat postingan menjadi valid amp tapi masih Error. Cara diatas sudah saya pakai dan semua postingan saya sudah valid amp memang untuk beberapa postingan yang menyisipkan seperti Iframe dan sebagainya mungkin akan error karena saya belum membahas kode tersebut untuk AMP.

Tapi bila untuk hanya menambah gambar saya yakin sudah valid amp dengan cara diatas dan memang agak ribet karena blogspot berbeda dengan wordpress yang ada pluginya jadi tidak perlu susah payah untuk setting manual.
Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
BERI KOMENTAR