Cara Mudah Mengedit Postingan Blogger Valid AMP


Penggunaan AMP HTML kini telah banyak beredar di kalangan publisher Blogger. Pasalnya projek yang dikembangkan oleh Google ini dianggap cukup bermanfaat bagi pengunjung karena kelebihannya dari segi kecepatan, sehingga pengunjung bisa merasa nyaman dan mendapatkan pengalaman internet yang lebih baik.

Namun karena belum adanya dukungan dari Blogger terhadap projek AMP HTML tersebut, berbagai optimasi yang dilakukan harus secara manual. Bagian awal mungkin masih cukup mudah yaitu mengganti template blog dengan template yang AMP HTML.

Masalah yang lebih rumit bukanlah pada penggantian template. Akan tetapi saat mengedit dan membuat postingan aturan AMP HTML juga perlu diterapkan. Mengapa? Karena kode HTML pada postingan juga akan berpengaruh pada HTML blog secara keseluruhan pada halaman tersebut.

Ada beberapa tips yang cukup mudah yang bisa kamu gunakan agar optimasi postingan yang valid AMP HTML bisa lebih mudah.

Membuat perpustakaan tag

Perpustakaan yang saya maksud di sini bukanlah kumpulan buku. Melainkan membuat kumpulan tag umum yang biasanya kamu gunakan dalam membuat postingan. Seperti tag amp-img, amp-iframe, amp-youtube, serta tag <noscript>. Kamu bisa membuat sesuai kebutuhan misalnya seperti yang biasa saya gunakan adalah:

<noscript>IMG_HERE</noscript><amp-img src="PIC_URL" width="700" height="364" layout="responsive" alt="ALT_TEXT"></amp-img>

<amp-img src="/static/samples/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

  <amp-youtube width="480"
  height="270"
  layout="responsive"
  data-videoid="lBTCB7yLs8Y"
  autoplay>
</amp-youtube>

<amp-ad width="100vw" height=320
     type="adsense"
     data-ad-client="ca-pub-6123986618538580"
     data-ad-slot="9801744158"
     data-auto-format="rspv"
     data-full-width>
  <div overflow></div>
</amp-ad>

<amp-iframe width="600"
  height="400"
  title="Google map pin on Googleplex, Mountain View CA"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  frameborder="0"
  src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ">
</amp-iframe>

Menghapus komponen tak valid

Bagian yang satu ini biasanya akan terasa cukup merepotkan. Bagi kamu yang sudah memiliki cukup banyak postingan lalu memilih menggunakan blog AMP, maka postingan lama itu perlu diedit kembali.

Misalnya dengan menghilangkan atribut style yang biasanya berada pada tag <div style="text-align: justify;"> diubah menjadi <div>. Menurut saya cara paling cepat yaitu dengan menggunakan search and replace. Karena editor post di Blogger tidak mempunyai fitur tersebut jadi kamu bisa menggunakan coding editor seperti Notepad++ atau Sublime Text.

Untuk mendapatkan Notepad++ kamu bisa download di sini. Namun jika kamu mampu membeli software seharga $80 saya sarankan kamu menggunakan Sublime Text 3. Aplikasi editor kode yang lengkap dan memiliki fitur yang sangat memudahkan, kamu bisa mengedit kode yang panjang sekalipun dengan mudah dan cepat dengan shortcut canggih.

Memeriksa dengan validator

Proses ini biasanya dilakukan di bagian paling akhir setelah postingan sudah siap untuk dipublikasikan. Validator memungkinkan kamu untuk mengetahui apakah di postingan yang kamu buat masih terdapat error AMP HTML atau sudah pass.

Kamu bisa memeriksa valid tidaknya postingan yang kamu buat dengan menggunakan fitur bantuan AMP Validator dari AMP Project atau AMP Test dari Google. Pada dasarnya kedua validator tersebut sama saja jadi kamu bebas memilih mana yang kamu sukai.

Penutup

Dengan cara-cara di atas mungkin kamu akan bisa lebih mudah saat membuat postingan pada blog yang menggunakan AMP HTML. Cara diatas bisa kamu kembangkan sesuai kebutuhan kamu saat menulis atau jika ada cara lain yang menurut bermanfaat bisa kamu sampaikan melalui kotak komentar agar pengguna yang lain juga bisa mengetahuinya. Terima kasih dan sampai jumpa!
Disqus Comments