AMP Dengan Parameter ?amp=1

Cara Membuat AMP Blogger Mobile ?m=1 Menjadi ?amp=1
Daftar Isi Artikel []
Mengganti ?m=1 ke ?amp=1 Blog AMP - Cara Membuat Url Khusus Untuk Halaman AMP Pada Blogger.

Seperti yang sudah saya bahas pada artikel kelebihan template amp. Template blogger amp adalah terobosan terbaik bagi blog dengan niche yang memiliki target visitor dari mobile (handphone/smartphone).

Misal blog sobat menyajikan artikel tentang tips dan trik bermain PUBG Mobile, dapat dipastikan bahwa lebih dari 70% visitor blog sobat akan mengaksesnya dengan smartphone Android.

Maka amp sangatlah cocok digunakan untuk blog sobat, template amp memiliki loading jauh lebih cepat dibanding template non amp.

Selain itu, adanya logo petir (tanda valid AMP) dibawah judul artikel pada mesin pencari secara tidak langsung dapat berfugsi sebagai daya tarik tersendiri bagi visitor.

Adapun kekurangan template amp, yakni tidak memperbolehkan penggunaan inline JavaScript, sehingga tidak memungkinkan untuk memasang widget baca juga (related post) dan iklan tengah artikel pada halaman amp.

Salah satu konsekuensi yang di dapat adalah menurunnya pendapatan iklan. Tapi, jika ingin tetap mendapatkan penghasilan yang besar, dan tetap ingin memakai template AMP. Maka hal yang harus dilakukan adalah mengubah url amp yang awalnya ?m=1 menjadi ?amp=1. Bagaimana Caranya? Baca Lebih lanjut...

Mengubah Halaman AMP Blogger ?m=1 Menjadi ?amp=1

Sebenarnya saya sudah cukup lama menggunakan url khusus untuk halaman amp, dan saya juga tidak ada niatan untuk membuat artikel ini.

Tapi, berhubung template terbaru kompi ajaib sudah memakainya, pasti tidak sedikit blogger yang penasaran bagaimana cara mengimplementasikannya, jadi tidak ada ruginya saya membuat artikel ini.

Manfaat Url Khusus ?amp=1 Blogger

Dengan Menggunakan ?amp=1, maka halaman desktop dan mobile (m=1) menjadi non amp, jadi halaman amp hanya untuk visitor mobile dari search engine (visitor organik). Jika bukan, halaman yang mereka akses adalah non-AMP (kecuali langsung menambahkan ?amp=1).

Itu artinya, blog amp bisa tetap valid meskipun melanggar ketentuan AMP (e.g, memasang inline JavaScript, CSS !important). Namun pemasangannya harus di dalam template dan dibugkus tag kondisional non amp.

Cara Membuat AMP Blogger Menjadi ?amp=1

Tutorial ini mungkin sedikit membingungkan bagi:
  1. Yang Belum Paham Struktur Template Blogger
  2. Blogger Pemula Yang Memakai Template AMP
  3. Belum Begitu Paham Tentang AMP
  4. Masih Bingung Dengan Tag Kondisional Blogger. Rekomendasi Bacaan: Tag Kondisional Blogger
Rekomendasi: Backup Template!

1. Pertama Masuk Menu Editor Template
2. Cari Dan Ganti
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

Dengan Kode ini
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>

3. Cari Dan Ganti.
Setiap template mungkin berbeda , jika buatan kompi ajaib kemungkinan besar seperti ini

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>

<link expr:href='data:blog.url' rel='canonical'/>

<link expr:href='data:blog.url + &quot;?m=1&quot;' rel='amphtml'/>

</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

<link expr:href='data:blog.url' rel='canonical'/>

</b:if>

Ubah Menjadi Seperti ini
<link expr:href='data:blog.canonicalUrl + &quot;?amp=1&quot;' rel='amphtml'/>

<link expr:href='data:blog.canonicalUrl' rel='canonical'/>

Sampai disini, sudah berhasil membuat halaman amp blogger menjadi ?amp=1, kemungkinan besar akan muncul error jika melakukan validasi.
The tag ‘amp extension .js script’ is missing or incorrect, but required by ‘amp-’. This will soon be an error.

4. Langkah terakhir yaitu memperbaiki error AMP.
Caranya, cari element khusus amp yang sebelumnya dibungkus dengan tag kondisional
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>

Ganti dengan tag kondisional untuk amp
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>

Jika bukan amp, ganti == menjadi !=.

Bagi yang sudah paham, harus teliti pada langkah ini. Disinilah step yang mungkin membingungkan bagi pemula. Jika mengalami kesulitan, bisa tanyakan melalui komentar.
Baca diskusi menarik pada seksi komentar, barangkali bisa dijadikan solusi untuk mengatasi (jika terjadi) masalah setelah mengubah parameter halaman AMP menjadi ?amp=1.
Intinya, mengubah url amp blogger dari m=1 menjadi amp=1 hanyalah mengubah tag kondisional, rel amphtml, dan canonical url. Semoga Berhasil.
  1. Admin

    Admin

    20/7/19

    selamat malam mas, dari eksperiment yang saya lakukan menggunakan tag conditional amp=1 ternyata tag tersebut menyebabkan double link yaitu link asli dengan akhiran html dan link akhiran html/amp=1. Untuk mengatasi hal tersebut bagaimana ya mas?, makasih sebelumnya.

    example tag amp=1 pada blog selain link aktif yang tidak ikut terdapat amp=1 adalah milik kompiajaib.

    • Dian Sandi Utama

      Dian Sandi Utama

      20/7/19

      Selamat malam,

      Pertanyaan saya,
      1. Double link yang dimaksud yang seperti apa ya? Mungkin bisa dicontohkan langsung dengan url, agar saya lebih paham seperti apa masalahnyaa ...
      2. Dibagian mana yang mengalami double link?

      • azid zainuri

        azid zainuri

        21/7/19

        Misal mas d blog kompiajaib. Di home page kita buat amp=1 na d bagian home page ada beberapa postingan tp tidak terpengaruh amp=1 jd tetap kompiajaib,com/07/2019/link,html link2, html dan seterusnya. Akan tetapi ketika menggunakan parm milik mas yg terjadi adalah pada semua link terdapat amp=1 baik itu home sebagai link aktif maupun link list postingan.

        Maaf mas ya. Barangkali ada solusi. Hehehe

    • Dian Sandi Utama

      Dian Sandi Utama

      21/7/19

      Masalahnya ada di "daleman" template blogger, coba periksa data xml blogger yang diambil pada setiap anchor ( expr:href='data' ).

      • data:blog.homepageUrl
      • data:blog.url
      • data:post.url
      • data:label.url
      • data:olderPageUrl
      • data:olderPageUrl

      Di dalam template (contoh)
      <a expr:href='data:blog.url'/>

      Hasil jika halaman diakses:
      Menggunakan desktop atau mobile (m=1)
      <a href='https://www.masihterjaga.id/'></a>
      Dengan parameter m=0
      <a href='https://www.masihterjaga.id/?m=0'></a>
      Dengan parameter amp=1
      <a href='https://www.masihterjaga.id/?amp=1'></a>

      Untuk membuat hasilnya menjadi sama pada semua perangkat dan parameter, data xml blogger yang harus diambil adalah url kanonis.

      💡 SOLUSI TERBAIKMU!!! 💡
      Yang saya tulis ketika memakai template
      blogger AMP dengan parameter ?amp=1, seperti ini:

      epxr:href='data:blog.canonicalHomepageUrl'
      epxr:href='data:blog.canonicalUrl'
      epxr:href='data:post.url.canonical'
      epxr:href='data:label.url.canonical'
      epxr:href='data:olderPageUrl.canonical'
      epxr:href='data:olderPageUrl.canonical'

      • Dian Sandi Utama

        Dian Sandi Utama

        21/7/19

        Maaf, terdapat dua olderPageUrl secara berurutan.
        Baca salah satunya jadi newerPageUrl ya, soalnya itu yang saya maksud 😁

  2. Azid Zainuri, S.Pd

    Azid Zainuri, S.Pd

    22/7/19

    work mas, sip. makasih banyak atas ilmunya.

    boleh saya post ulang mas dengan menyertakan sumbernya?

    ada yang kebalik mas asalnya expr jadi epxr, hehehe

    • Dian Sandi Utama

      Dian Sandi Utama

      22/7/19

      Terimakasih kembali,,

      Boleh sekali dong,
      Oh iya typo, kok baru ngeh yaa 😅

  3. Azid Zainuri, S.Pd

    Azid Zainuri, S.Pd

    22/7/19

    ada ketambahan lagi mas pada pagelist expr:href='data.link.href.canonical'

    • Dian Sandi Utama

      Dian Sandi Utama

      22/7/19

      Termasuk widget PopularPost, Label, dan Archive juga Mas. Perlu disesuaikan lagi.

  4. Abdul Hamid

    Abdul Hamid

    19/8/19

    Mas, mau tanya, ketika saya akses blog.masihterjaga.id melalui ponsel, kok tidak ada query string ?m=1 ya? Triknya bagaimana, nih, untuk menghilangkan ?m=1 ketika kita akses blog lewat ponsel?

    Sedangkan jika saya akses www.masihterjaga.id lewat ponsel malah ada query strng ?m=1 di akhir url? Apa yang membedakan?

    Apakah itu berkaitan dengan tautan kanonik milik Blogger? Atau sampeyan manipulasi denga Javascript?

    Apakah bisa dihilangkan dengan tag b:attr?

    Sebelumnya, terimakasih atas tanggapan baiknya.

    Salam coding

    • Dian Sandi Utama

      Dian Sandi Utama

      19/8/19

      Sengaja saya hilangkan parameter ?m=1 ketika blog.masihterjaga.id diakses menggunakan perangkat mobile.

      Alasan saya menghilangkannya, parameter tersebut (?m=1) masih nyantol di SERP mobile meskipun sudah terpasang rel="canonical"

      Kunjungi tautan gambar ini untuk melihat perbedaan blog yang memasang/tidak pada serp mobile:
      https://4.bp.blogspot.com/-GTMpRKu9cVM/XVpuXToZdDI/AAAAAAAADYQ/NaIT2P90OhMgy2KtmzJD3l2c5y-K2aZ6ACLcBGAs/s1600/20190819_163808.png


      Sengaja juga tidak saya bandingkan www.masihterjaga.id dengan blog.masihterjaga.id sebagai contoh, template yang dipakai blog.masihterjaga.id merupakan template blogger berbasis AMP. Jadi, yang terindeks pada serp mobile merupakan tautan AMP (tautankanonis?amp=1), tidak bisa dijadikan contoh. ^^

      Saya memanipulasinya dengan memasang JavaScript di area <head>

      Seperti ini script yang saya gunakan:

      <b:if cond='data:blog.isMobileRequest'>
      <script>//<![CDATA[
      var noPm = window.location.toString();
      if (noPm.indexOf("&m=1", "&m=1") > 0) {
      var cUri = noPm.substring(0, noPm.indexOf("&m=1"));
      window.history.replaceState({}, document.title, cUri)
      }
      var noPm = window.location.toString();
      if (noPm.indexOf("?m=1", "?m=1") > 0) {
      var cUri = noPm.substring(0, noPm.indexOf("?m=1"));
      window.history.replaceState({}, document.title, cUri)
      }
      //]]></script>
      </b:if>


      *Maaf, balasan komentar terlalu banyak menggunakan gaya fon miring, saya sedang mengembangkan gaya penulisan konten pada area komentar.

      Salam Terjaga Dalam Coding!

  5. Abdul Hamid

    Abdul Hamid

    19/8/19

    Oh, ternyata pakai Javascript kondisional mobile toh. Pantes saya view source lewat PC nggak ada tanda-tanya pakai script. Saya kira ada tag tertentu milik blogger yang bisa menghilangkan parameter query string bagian ponsel.

    Cukup terjelaskan. Komenter panjang dan teks miring tidak apa-apa bagi saya, yang penting bisa menghasilkan bahan diskusi, bisa menjadi web yang bukan hanya ngasih tutorial langsung pasang. Kolom komentar blog yang menjadi tempat diskusi hari ini jarang, paling-paling DTE, dan kawanannya yang memang kredibel.

    Web sampeyan adalah penerusnya. Apalagi bisa membuat kolom komentar menjadi elemen json "article". Trik seo-nya boleh juga, Mas.


    Oh ya css otorisasi bawaan Blogger, saya juga sudah membuat css dan js Blogger dengan boolean bernilai false. Namun, kok sampeyan bisa ya menghilagkan css otorisasi Blogger tepat di atas tag head penutup. Apakah itu manipulasi javascript juga?

    • Dian Sandi Utama

      Dian Sandi Utama

      19/8/19

      Karena ?m=1 hanya muncul pada perangkat mobile, jadi script tersebut lebih baik dibungkus dengan kondisi khusus mobile.

      Waduh, berat sekali itu. MT dengan DTE itu bagikan langit dan bumi, Mas.

      Dasar dari Trik SEO pada blog ini saya temukan di blog Areapandang (Mba Padya):
      » https://areapandang.blogspot.com/2017/03/seo-with-section-widget-blog1-in-head-blogger.html

      https://www.blogger.com/dyn-css/authorization.css, "Dia" hilang ketika atribut b:css pada html bernilai false. Namun, hanya halaman indeks yang kehilangan css otorisasi blogger, tidak dengan halaman item (yang saya alami ketika berusaha menghilangkannya).

      "Dia" juga tetap aktif jika tag pembuka dan penutup head ditulis normal. Jika ditulis dengan &lt; dan &gt; seperti tutorial (menonaktifkan CSS_Bundle) yang banyak dibahas, css otorisasi akan terbungkus <!-- comment tag -->.

      Sebenarnya, ini tidak menjadi masalah serius kan? Tapi saya yakin, Mas pasti agak, bahkan mungkin sangat risih dengan keberadaannya dalam dokumen (sama seperti saya 😁).

      Untuk mencegah munculnya css otorisasi blogger, tag pembuka html harus mempunyai atribut dan nilai amp, akan lebih baik jika diikuti dengan b:attr, seperti yang saya terapkan berikut:

      <html amp='amp' ...>
      <b:attr name='amp' expr:value='data:view.url == data:view.url params { amp : "1" } ? "amp" : ""'/>


      *jawaban diskusi menghilangkan css otorisasi blogger (+dasar trik seo yang sama seperti bahasan pada artikel Mba Padya) ada di blog Triksonic (Pak Adi Jaya) » https://triksonic.blogspot.com/2018/05/tag-b-section-blogger-tutorial.html#c5705113174903564035

      Tidak ada JavaScript disini ^^