Cara Membuat Postingan Valid AMP HTML di Blogger


Accelerated Mobile Pages atau yang sering disingkat AMP, halaman seluler yang dipercepat merupakan salah satu projek yang dirilis oleh Google pada bulan Oktober tahun 2015. Projek ini merupakan prakarsa sumber terbuka yang digunakan untuk menyediakan halaman web yang dapat dimuat dengan sangat cepat pada perangkat seluler dan mempunyai tampilan yang bagus. Hal tersebut bertujuan untuk meningkatkan pengalaman pengguna dan kenyamanan pengunjung situs web.

Akan tetapi, penggunaan AMP masih belum cukup populer di kalangan pembuat situs. Khususnya pada blog engine Blogger. Pada WordPress.org telah tersedia sebuah plugin resmi yang mendukung pengguna untuk membuat situs AMP. Namun meskipun demikian kemunculan situs AMP terus bertambah setiap harinya. Salah satu diantaranya adalah PintarAMP.id. Situs ini berkomitmen untuk membagikan berbagai hal tentang AMP, dan memberikan dukungan untuk memanfaatkan fitur AMP.

Membuat postingan AMP Blogger

Bagi kamu yang belum tau, menulis postingan pada blog AMP berbeda dengan postingan blog biasa. Perbedaannya terletak pada elemen yang ada dalam posting tersebut, seperti gambar, video, serta penggunaan attribut pada tag. Kebanyakan pengguna AMP mungkin lebih familiar dengan tag khusus untuk gambar AMP. Mari kita bahas lebih jauh.

Untuk memasang gambar pada postingan blog AMP, tidak bisa dengan cara biasa. Pertama-tama perlu anda ketahui bahwa tag img pada AMP HTML dianggap sebagai kesalahan. Jadi yang digunakan adalah tag amp-img.

Basic usage

Untuk menampilkan gambar pada blog AMP HTML bisa menggunakan kode berikut:

<amp-img src="URL_GAMBAR"
  width="1080"
  height="610"
  layout="responsive"
  alt="Teks ALT Gambar"></amp-img>

srcset

Gunakan scrset untuk menspesifikkan gambar pada variasi lebar viewport dan kepadatan pixel. Jadi anda akan menggunakan beberapa gambar dengan ukuran berbeda-beda pada satu tag amp-img.

<amp-img src="/static/samples/img/amp.jpg"
  srcset="
  /static/samples/img/amp.jpg 1080w, 
  /static/samples/img/amp-900.jpg 900w, 
  /static/samples/img/amp-800.jpg 800w, 
  /static/samples/img/amp-700.jpg 700w, 
  /static/samples/img/amp-600.jpg 600w, 
  /static/samples/img/amp-500.jpg 500w, 
  /static/samples/img/amp-400.jpg 400w, 
  /static/samples/img/amp-300.jpg 300w, 
  /static/samples/img/amp-200.jpg 200w, 
  /static/samples/img/amp-100.jpg 100w"
  width="1080"
  height="610"
  layout="responsive"
  alt="AMP"></amp-img>

No script

Jika Anda ingin memastikan bahwa pengguna dengan JavaScript dinonaktifkan dapat melihat gambar Anda, Anda dapat menambahkan elemen img tambahan di dalam tag noscript. Ini juga memungkinkan pembuat web tanpa runtime JavaScript untuk menemukan gambar Anda.

<amp-img src="URL_GAMBAR_YANG_SAMA"
  alt="AMP"
  width="475"
  height="268"
  layout="responsive">
  <noscript>
    <img src="URL_GAMBAR_YANG_SAMA" width="475" height="268" alt="AMP">
  </noscript>
</amp-img>

Gambar utama pada postingan

Kode ini biasanya digunakan untuk menampilkan gambar utama pada blog. Gambar utama ini tidak akan tampil pada postingan. Tetapi jika menggunakan template dengan thumnail di bagian homepage, maka kode ini bertugas untuk menampilkan gambar thumbnail tersebut. Serta menampilkan gambar saat postingan dibagikan ke media sosial.

<noscript><img alt="Teks ALT gambar" width="680" height="382" src="URL_GAMBAR" title="Teks judul untuk gambar" /></noscript>

Ganti bagian yang ditandai sesuai kebutuhan kamu, lalu letakkan kode tersebut pada bagian paling atas dari posting pada blog yang AMP HTML.

Penutup

Dengan menggunakan cara di atas postingan yang kamu buat pada blog yang AMP HTML akan valid. Perhatikan fungsi dari jenis-jenis tag yang berbeda dan gunakan sesuai kebutuhan. Semoga bermanfaat dan sampai jumpa!
Disqus Comments