Langsung ke konten utama

Cara Menggunakan AMP di Blogger Yang Perlu Diketahui

Walaupun AMP belum support di blogger, tapi blog AMP bisa dipasang dan digunakan di blogger. Untuk blogger pemula dan yang belum tau coding akan kesulitan untuk pertama kalinya menggunakan AMP di blogger, walaupun sudah ada dan template blogger yang valid AMP.

Dan disini akan belajar tentang penggunaan AMP di platform blogger, utamanya hal-hal penting yang harus diketahui pada amp blogger pemula.

Penggunaan amp-img SEO

Blog AMP tidak support html5, itu tidak masalah dalam search engine mobile (bisa AMP) maupun dekstop (tidak bisa AMP). Tapi bagaimana dengan element gambar yang merupakan elemen penting pada blog, padahal tidak support html5.

Tidak masalah juga karena di w3c validator elemen amp-img tidak termasuk dalam kesalahan, jadi jangan khawatir untuk SEO pada element gambar. Tepatnya amp-img sudah seo dalam hal html5 (valid html5).

Dalam Penggunaan Featured Image

Gambar utama pada postingan (featured image) bisa di atasi dengan menggunakan tag element <noscript></noscript> yang diperbolehkan dalam AMP, yang dimana elemen gambar ditaruh didalam teks tersebut. Nantinya featured image blogger bisa mendeteksi adanya gambar di postingan. Contoh cara menggunakannya.

<noscript><img data-original-height="454" data-original-width="737" height="393" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ajh5Qlue48uKpXS1XWT-CmNLdgnyjP9PTAG6WXW8_HtZF7j-k1zKC0AuseKJEmJvPDYshgZbMnlUq_RtH0v4fBTAhLYn7nM1Ix0lEp_I6ABt-filN0HZhI3yxxsFEA0QgtpSnCE3B04/s640/Blogger+versi+AMP.png" width="640" /></noscript>

Noscript berfungsi untuk tidak menampilkan element yang berada di dalamnya. Jadi gambar yang diberi tag noscript tidak akan muncul, akan tetapi jika javascript pada browser dimatikan, tag noscript tidak akan berfungai sehingga gambar akan muncul.

Mengedit Postingan Agar Valid AMP

Karena Blogger belum mendukung amp untuk mengaturnya ke versi AMP harus memakan waktu, yaitu untuk validasi amp di postingan, seperti mengatur element gambar amp-img atau menghapus penggunaan atribut style.

Mungkin ingin mengatur teks supaya center tengah, maka harus menmbahkan css ke dalam template dan menggunakannya di postingan. Lebih jelasnya, contoh prosesnya dengan menambahkan css .center{text-align:center} pada style style amp-custom (template html).

Lalu pada postingan ubah teks yang ingin ditampilkan center. Dan pada mode HTML cari mana yang ada class="center" diganti dengan class="center".

Penggunaan Rel Canonical

Rel kanonikal berfungsi untuk memberi tahu url halaman utama/asli pada mesin pencari, url yang dimaksud ialah versi dekstopnya. Google menjelaskan bahwa, jika blog mempunyai halaman AMP maka halaman kanonikal (dekstop) diberi tambahan meta rel='amphtml', dan pada halaman ampnya tidak perlu diberi.

Update! Sekarang blogger bisa bisa diatur pada halaman AMP untuk mobile, sementara Non-AMP untuk dekstop. Cara ini memanfaatkan parameter m=1, jadi halaman dekstop bisa menggunakan javascript dan bisa menggunakan iklan versi standart.

Robot Noindex & Nofollow

Biasanya para blogger yang berusaha untuk meningkatkan kualitas blog di mesin pencari. Seperti memberi tag noindex nofollow pada versi mobile supaya versi mobile tidak di index dengan tujuan menghindari duplikat konten. Tapi menurut saya itu tidak perlu dilakukan, karena meta rel canonical itu sebagai rujukan halaman asli.

Begitu pula dengan penggunaan AMP jika terdapat tag noindex nofollow maka halaman AMP tidak bisa di indeks dan ditampilkan oleh Google.

Penutup Itulah seputar menggunakan AMP di platform blogger. Semoga aja nanti kedepannya blogger bisa mendukung AMP. Jika ada kekurangan bisa bahas dikomentar. Sekian, semoga dapat membantu bagi pengguna AMP di blogger.

Komentar

  1. saya pake amp, tapi foto utamanya ga bisa keluar, masalahnya kenapa ya??
    mohon bantuannya kang
    makasih

    BalasHapus
    Balasan
    1. Di amp butuh untuk mengatur gambar mas. Di postingan bagian HTML, letakkan gambar di bagian atas biar mudah.
      setelah itu beri tag <noscript> disebelum dan tag </noscript> sesudahnya.

      Contoh: <noscript><img data-original-height="454" data-original-width="737" height="393" src="https://3.bp.blogspot.com/-VyQYgidLbUM/WYHQmFlEKxI/AAAAAAAAAak/ntccYlF3yMcUNgWcGuBQ6txmWOsIQsWlACLcBGAs/s640/Blogger%2Bversi%2BAMP.png" width="640" /></noscript>

      Ingat gambar yang berada didalam tag noscript tidak muncul.

      Hapus
  2. sip solve gan, nah kalo di artikel sebelumnya pake link cara nanganinnya gimana kang biar bisa di terapin di amp?

    BalasHapus
    Balasan
    1. Tetap bisa mas, yang penting di dalam tag noscript ada kode untuk gambar. Dan gambarnya tidak perlu valid amp, di blognya mas sudah tampil.

      Hapus
  3. mau tanya mas
    cara memperbaiki eror pengindeksan (url amp mengarah ke non amp) itu gimana ya ?

    BalasHapus
    Balasan
    1. Mungkin kesalahan penggunaan link Canonical dan AMP html.
      Untuk penggunaannya: 1. Pada halaman AMP beri satu tag link yaitu Canonical. Dengan link halaman dekstop. Gunakan kode berikut data:view.url.canonical.
      2. Untuk halaman dekstop beri satu tag link yaitu amphtml. Dengan link halaman valid AMP.
      Jadi halaman dekstop tidak perlu ada link Canonical, dan halaman AMP tidak perlu ada link amphtml.

      Hapus

Posting Komentar

Postingan populer dari blog ini

Membuat Komentar Blogger Simple SEO Ringan dengan Schema.org

Komentar merupakan salah satu bagian dari blog yang digunakan untuk pertanyaan, pendapat, dan bisa juga berdiskusi. Komentar bawaan blogger tersedia dalam 2 jenis yaitu yang biasa tidak ada fitur balas komentar (Comments) dan yang bertingkat (Threaded Comments) dengan fitur balas komentar. Kedua jenis komentar tersebut tidak menyertakan schema data terstruktur, yang tentunya berfungsi untuk SEO. Dengan adanya schema.org komentar yang positif dapat dengan mudah dibaca / index oleh mesin google dan tentunya dapat berguna untuk reputasi blog di pencarian google. Karena google sendiri juga menggunakan komentar untuk menilai konten, intinya reaksi pengunjung setelah membaca artikel. Mungkin dengan ditambahkannya schema akan lebih baik jika dibandingkan dengan tanpa schema. Blog ManKoin menggunakan komentar dengan schema.org, pada postingan kali ini membahas tentang membuat komentar dengan banyak fitur tapi sederhana. Awalnya ini dari blogger lain yang meminta membuat komentar seperti blog

Emulator Android terbaik 2020, Cepat dan Ringan

Emulator merupakan suatu software yang memungkinkan untuk menjalankan sistem operasi android. Dengan emulator, menjalankan aplikasi-aplikasi android akan terasa lebih nyaman sebab memiliki layar yang lebih luas. Terdapat banyak software emulator yang membuat kita kesulitan untuk memilih nya, di sini membahas beberapa Emulator ringan, terbaik, dan mungkin bisa memilih mana yang cocok untuk di pakai komputer atau laptop kamu. Memu, Emulator Android yang Sangat Cepat dan Ringan Memu adalah emulator yang sangat cocok untuk bermain games. Banyak game yang kompatibel, tetapi sebagian aplikasi tidak kompatibel dengan emulator memu, seperti chrome dan lainnya, jikalau kompatibel mungkin hanya sedikit. Memu juga dilengkapi dengan akses root juga. Dalam segi tampilan layaknya seperti android dan desain emulatornya menarik dan rapi. Untuk performanya terbilang ringan dan cocok dengan spesifikasi yang rendah. Memu bisa di dapatkan dan di unduh gratis dan tidak ada iklan dalam emulator ini. Sistem

Nama Bagian Komponen Halaman blog dan penjelasannya

Bagian-bagian blog itu harus diketahui oleh seorang blogger. Bagi yang baru mengenal dan membuat sebuah blog atau istilah masih seorang pemula mungkin ada bagian yang tidak dimengerti nama dan kegunaannya. Beberapa bagian dari blog itu ada yang penting dan ada juga yang hanya untuk pelengkap saja. Dalam membuat sebuah bagian dari blog, banyak para blogger yang sudah mahir menyediakan tutorial mengelola blog. Seperti halnya membuat,menambah,mengedit, dan memodifikasi bagian-bagian pada halaman blog. Mungkin dalam mencari tutorial akan kesulitan jika tidak tahu namanya. Itulah alasan utama mengapa saya tulis artikel ini, karena saya dulu sebagai blogger pemula juga mengalami hal yang sama. Mengenal Bagian-bagian Komponen Halaman Blog Di sini hanya akan menjelaskan beberapa saja yang mungkin namanya belum kamu diketahui. Breadcrumb Breadcrumb merupakan sebuah komponen yang menunjukkan (menginformasikan) dalam bagian apa halaman itu berada dan jenis apa halaman yang sedang di buka. Dalam