Membuat Halaman Sitemap Pada Blog AMP

Mei 02, 2017

AMP HTML atau Accelerated Mobile Pages HTML menjadi salah satu pilihan bagi webmaster agar bisa merancang halaman web yang loading cepat, tanpa banyak pengaruh JS atau lainnya.

Blog dengan AMP HTML tidak memperbolehkan terdapat javascript eksternal sehingga dalam membuat widget tertentu diperlukan trick dan cara khusus untuk mengatasinya.

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya.

Sitemap yang dimaksud pada postingan kali ini berupa halaman blog yang berisi daftar artikel yang telah dipublikasikan oleh blog tersebut. Sitemap menjadi salah satu navigasi yang dapat memudahkan pengunjung dalam mencari artikel di blog anda.

Bagaimana membuat sitemap di Blog template AMP?

Setelah mencari cara membuat sitemap/daftar isi pada blog template AMP dan tidak menemukannya, akhirnya saya mencari cara dengan mengadopsi javascript milik blog DTE dan menyimpannya di hosting gratis serta memanfaatkan query url blog untuk memanggil sitemap agar muncul pada halaman seperti contoh berikut ini.

Demo

Bagi anda yang menggunakan blog AMP HTML, cukup dengan copy code di bawah kemudian pastekan pada halaman yang ingin dijadikan sebagai halaman sitemap / daftar isi.

<amp-iframe width="500"
  height="600"
  layout="responsive"
  sandbox="allow-scripts allow-same-origin allow-popups"
  allowfullscreen
  frameborder="0"
  src='https://cdn.rawgit.com/w4hyou/host/f475d7e9/5itemap.html?url=//info-kmu.blogspot.co.id'>
  <amp-img layout="fill"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCEjVoc5h_m4n_gfCUpKGySd3y26GKhHd8kJ2qVNnRX3cF-0Z_CrF0Ni2u1eRxAwoWP3asjdkViKzPDOoUMflt-fWy5XcAcJmZQwA2UsmFudxzTTuyxS7ME3YMaIf3hvnin0m6QLEMJZA/s1600/sitemap.jpg"
    placeholder></amp-img>
  </amp-iframe>

Langkah-langkah

  1. Pilih dan Buka Tata Letak
  2. Tambah Gadget
  3. Tambah widget HTML/JavaScript
  4. Copi Kode di atas
  5. Ganti kode yang ditandai dan berwarna abu-abu dengan url blog anda
  6. Buat Posting/Laman baru
  7. Pastekan kode yang dicopy tadi
  8. Publikasikan
Latest
Previous
Next Post »
Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

Tidak ada komentar