Malfungsi

IMG-AMP: Cara Jadi Super SAYA!
Daftar Isi Artikel []
Kok bisa yaa tag html gambar di artikel AMP dan nonAMP berubah otomatis gitu? Kasus ini membuat Saya penasaran, pokoknya bener-bener ngganjel banget dipikiran Saya.
Sebelumnya, hapus semua folder lirik lagu beserta isinya yang tersimpan dalam memori otak Anda untuk menghindari suara yang tiba-tiba terbaca di sebelah mata karena mendengarkan teks yang tidak bersuara.
Sungguh, Saya sangat tersiksa; makan Saya jadi tak enak, tidur Sayapun jadi tak nyenyak pula... Padahal, semua sendiri.

Sempat coba ingin pergi, hilang dan lupakan masalah ini, tapi gabisa. Daripada Saya tersiksa, akhirnya Saya memutuskan untuk mencari petunjuk dengan bertapa dalam gua di gunung tinggi sunyi tempat hukuman para DEWA.
Ambil lagi foldernya di recycle bin, mumpung belum lima menit!!! Soalnya, kita mau pergi ke...

Beberapa Juta Tahun Kemudian....

Setelah jutaan tahun bertapa, akhirnya ada seseorangdewa yang baru saja terbebas dari hukumannya memberikan Saya petunjuk untuk menyelesaikan masalah ini.

skip...

Maaf, Saya tidak bisa menceritakan lebih jauh siapa Dewa dan apa saja kejadian yang Saya alami ketika bertapa. Akan sangat panjang sekali nanti.

Cukup Saya aja yang tau!

Lanjut...

Ternyata Tidak Otomatis

Jadi, kita harus menulis 2 konten yang sama tapi berbeda dalam 1 artikel. Satu konten untuk halaman AMP, satunya lagi untuk non AMP.

Sama tapi beda, gimana maksudnya? 🤔

Contoh nih:
<!-- Isi Postingan AMP -->
Lorem Ipsum Dolor sit Amet
<amp-img layout="responsive" src="gambar_nonamp.jpg"></amp-img>

<!-- Isi Postingan nonAMP -->
Lorem Ipsum Dolor sit Amet
<img src="gambar_nonamp.jpg"/>
Liat kan bedanya? Ada di tag gambar! Intinya bedakan pada elemen-elemen khusus AMP seperti AMP-IFRAME AMP-YOUTUBE, AMP-INSTAGRAM, dll.
Pertanyaannya, gimana cara buat 2 konten dalam 1 artikel? Tempat untuk nulis konten di blogger kan cuma 1, kalo buat 2 konten, berarti buat 2 artikel, otomatis urlnya kan jadi beda, Mas?
Disitulah triknya, pake tag kondisional...

Iya, tag kondisional! Kalo demen oprek-oprek template blogger, mungkin akan terlintas dalam pikiran sampean kalo tag kondisionalnya langsung ditulis di editor posting, seperti ini:


<b:if cond='{kondisi amp}'>
  <!-- Isi Postingan AMP -->
  Lorem Ipsum Dolor sit Amet
  <amp-img layout="responsive" src="gambar_nonamp.jpg"></amp-img>
<b:else/>
  <!-- Isi Postingan nonAMP -->
  Lorem Ipsum Dolor sit Amet
  <img src="gambar_nonamp.jpg"/>
</b:if>
Kalo kepikiran begitu, berarti sama seperti Saya sebelum bertapa dulu. Kalo bukan, berarti kita tak sama.

Gimana hasilnya? Zonk!!!

Ternyata, template data blogger yang ditulis di dalam postingan tidak akan menampilkan apapun, kosong. Dengan kata lain, mereka tidak berfungsi ketika ditulis di dalam artikel.

Trus gimana caranya..?

Ubah Otomatis IMG jadi AMP-IMG

Pasti udah baca dan masih ingat apa yang Saya tulis tadi kan, "Buat 2 Konten dalam 1 Artikel."

KAN TEMPAT NULIS KONTENNYA CUMA 1 BAMBANG!!! GIMANA CARANYAAA!?!?!?

Yakin, cuma satu? Masa siih?

Gimana kalo <data:post.body/> halaman posting di dalem template diubah jadi gini?
<b:if cond='{kondisi amp}'>
  <data:blog.metaDescription/>
<b:else/>
  <data:post.body/>
</b:if>
Dan cara nulis (2 konten) begini...



Jadi begitu, kita memanfaatkan meta description box untuk mengubah tag IMG jadi AMP-IMG.

Bagian <data:blog.metaDescription/> untuk halaman AMP, <data:post.body/> untuk non AMP, atau sebaliknya.

Yang jam terbangnya uda tinggi dan belum tau menau soal trik ini, pasti langsung nyantol dan nyeletuk

"Njir, kok gak kepikiran yaa_-"

Pas Saya dikesitau sama si Dewa juga sama, sempat ada rasa menyesal telah menyia-nyiakan waktu berjuta-juta taun hanya untuk mencari solusi masalah ini.

Apalagi beberapa hari setelahnya, Saya menemukan artikel terbitan tahun 2017 yang membahas masalah ini, tambah nyesel dong, kenapa baru nemu_-

Tapi, saat itu juga, sisi baik versi bar-bar diri Saya tiba-tiba berkata:
Eh TOD!!!! Gada terimakasihnya sih lu, TOLOL!!!!

Coba bayangin kalo gak ada Si Dewa?! Sampe kapan lu mau tapa di gunung tinggi sunyi tempat hukuman para dewa itu?!

SAMPE RATUSAN JUTA TAHUN CAHAYA?!!!

GOBLOK!!!

Kembali ke laptop....

Belum selesai! Tidak semudah itu FERGUSO!

Ingat! Bagian apa yang kita manfaatkan? Meta Deskripsi!

Coba liat gambar ini...



Jadi, kalo sampean gak ngelanjutin tutorialnya, badan artikel akan menjadi deskripsi halaman posting.

Alhasil, deskripsi pada meta tag dan script bawaan blogger akan sangat panjang, BOROS!!!.

Tentu ini jadi masalah serius, Kenapa?

MOZ merekomendasikan agar meta deskripsi itu:

  • Panjangnya 50-160 karakter,
  • Tidak menuliskan tanda petik dua ("),
  • Selengkapnya, baca di MOZ.

Selain itu, trik yang sampean pake juga akan mudah diketahui blogger lain yang suka intip-intip. Soalnya bakal keliatan di script bawaan blogger yang ada diatas </body> itu.

Cara Ngakalin Meta Deskripsi

Memakai trik ini, mau gak mau, kita harus pake cuplikan artikel untuk dijadikan meta deskripsi.

Nah, karena cuplikan artikel itu ada di dalem postingan, jadi cara ngambil datanya itu harus pake data:post. Sedangkan data:post, iu hanya bisa befungsi jika dituliskan di dalam widget Blog, PopularPosts, FeaturedPost, Archive.

Jadi, kita juga harus menerapkan trik lain, yaitu memasang widget Blog ke dalam tag head template blogger.
Yang pengin baca penjelasan yang lebih lengkap pake banget terkait pemasangan gadget Blog ke dalam tag head, baca di blog Mba Padma.

Saking lengkapnya, inti artikel ini juga dijelaskan disana.
Cari dan hapus semua meta deskripsi;

  • name='description',
  • property='og:description',
  • property='twitter:description'

Kalo udah dihapus, pasang ini di dalem tag head
<b:if cond='data:view.isPost'>
  &lt;!--<b:section id='meta'>
    <b:widget id='Blog2' type='Blog'>
      <b:includable id='main' var='top'>--&gt;
        <b:loop values='data:posts limit 1' var='post'>
          <meta name='description' expr:content='data:post.body snippet { length: 170, links: false, linebreaks: false, ellipsis: true }'/>
          <meta property='og:description' expr:content='data:post.body snippet { length: 170, links: false, linebreaks: false, ellipsis: true }'/>
          <meta property='twitter:description' expr:content='data:post.body snippet { length: 170, links: false, linebreaks: false, ellipsis: true }'/>
        </b:loop>
      &lt;!--</b:includable>
    </b:widget>
  </b:section>--&gt;
<b:else/>
  <meta expr:content='data:blog.metaDescription' name='description'/>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
  <meta expr:content='data:blog.metaDescription' property='twitter:description'/>
</b:if>
Kalo gak bisa simpan tema, ganti <head> jadi &lt;head&gt;

Masih gabisa disimpen? Hapus tag </head> penutup, trus ganti pake ini &lt;!--<head/>--&gt;&lt;/head&gt;

Cara Ngakalin JS Blogger

Tambahin atribut b:js bernilai false di tag HTML.

<html b:js='false'>

Yang terjadi setelah mematikan javascript blogger:


Masih Ingat Gak

Sudah lupa artikel yang Saya tulis sebelumnya (Blogger Juga Bisa)? Pasti ingat kan?

Kalo belum baca, berarti sampean pembaca setia blog ini.

Sedikit gambaran untuk sampean yang udah baca dan masih ingat, artikel itu intinya bahas cara buat judul artikel yang muncul di penelusuran google dan di blogger jadi beda.
(CONTOH)
Scroll ke atas, judul artikelnya apa?
Malfungsi

Liat judul tab browsermu!
AMP-IMG: Cara Jadi Super SAYA!
Dijelaskan pada artikel sebelumnya, penerapannya bisa dilakukan dengan 3 cara. Tapi, Saya baru njelasin cara yang pertama.

Tertulis di akhir artikel kalo cara-cara selanjutnya akan diupdate secara berkala. Nah, buat sampean yang gak nunggu cara-cara selanjutnya.

Artikel inilah cara yang kedua untuk membedakan judul posting blog dan SERP jadi beda (manipulasi title). (maaf gak dijelasin rinci, intinya sama laa, manfaatin meta description box)

Jadi, kalo mau nerapin manipulasi judul, sampean gak bisa nerapin ubah otomatis tag IMG jadi AMP-IMG.

Ininya gak bisa diterapin barengan lah, kecuali kalo pake cara yang ketiga (beresiko). Manipulasi title & ubah otomatis IMG ke AMP-IMG bisa diterapin bareng-bareng.

Tunggu aja cara yang ketiga, mumpung Saya males nulis. Udah yaa...

ARTIKEL MACAM APA INI!?

Menurutmu...?
  1. maxcorps.space

    maxcorps.space

    13/10/19

    teknologinya canggih, tapi sayang design nya jelek dan bahasa yang dipake norak dan kampungan! maap loh ya, cuma kritisi supaya jadi lebih baik.

  2. maxcorps.space

    maxcorps.space

    13/10/19

    nulis teks nya pake bahasa yang bener lahhh... saya pingin belajar jadi males, baca kalimat2nya norak!

    • Dista

      Dista

      13/10/19

      Terimakasih kritiknya. 😅
      Saya amat sangat suka banget sekali dengan kritik sampean ini. Mau dikritik apapun, pokoknya saya tetep suka. 😘

      Kalo Saya liat dari kritikannya, sampean sepertinya pembaca setia blog ini, yaa kan?

      Soalnya, sampean udah tau betul kalo artikel berkategori blogger disini sengaja ditulis/dibuat begitu, suka suka Saya. Kadang serius, kadang juga ga, terserah Saya.

      Desen templet ini juga konsepnya terserah Saya, gk peduli desen yg baik & benar itu gimana, yang penting beda.

      Males baca? ya dibaca lah
      Penulisnya suka-suka, pembaca juga berhak bertindak sesuka hati. Mau pergi kek, males baca kek, apa kek. pokoknya, dia harus tetep baca, kalo gak baca, bukan pembaca namanya.

      Dari pada waktu kebuang sia-sia buat baca artikel super duper bermanfaat ini, mending dipake buat nglakuin kegiatan lain yg gk ada manfaatnya.

      Simple kan...
      Oh iya, kelupaan saya.
      Selamat datang.

  3. imansani93

    imansani93

    13/10/19

    agak ribet juga yah.. butuh tenaga ekstra.. hahaha. tp kasian juga kolom deskripsinya 😞
    btw, kira kira cara seperti ini ngaruh ke seo gak yah?

    • Dista

      Dista

      14/10/19

      Iya Mas, cara ini (Masih) Ribet 😂
      Siapa suruh blogger gak nyediain plugin kek wordpress, ya fiturnya disalahgunakan lah 🤣🤣

      Pendapat saya soal SEO nih yaa, bisa ngaruh, bisa engga.
      Jangan dipercayai seutuhnya, soalnya Saya bukan ahli pakar SEO. Untuk nambah wawasan aja yaa.

      Tapi, Saya lebih berharap kalo pendapat Saya ini cuma dijadikan hiburan (receh) aja, soalnya nyeleneh 😂.

      Ngaruh,
      Kalo meta deskripsi yang muncul di SERP itu itu aja (sesuai meta deskripsi). Apalagi kalo (170) karakter di awal artikel gk ada keywordnya.

      Bisa gak ngaruh.
      Soalnya, deskripsi artikel di SERP itu gk selalu ngambil dari <meta name='description' content='ini deskripsi'/>, dia biasanya ngambil keyword dalam artikel yang relevan dengan kueri yang ditulis oleh pencari Informasi di Internet.

      Bahkan, blog resmi webmaster juga gk masang meta deskripsi (<meta name='description' content='ini deskripsi'/>).

      Aneh gak tuh? Nyuruh webmaster buat pasang meta deskripsi di websitenya. Eh, dia sendiri malah gak pasang.

      Hmmm... 🤔
      Apakah ini sebuah konspirasi, kebohongan besar SEO yang sengaja dibuat oleh segelintir elite global agar semua orang di dunia (baca: webmaster) tunduk kepada mereka. 🤣

  4. admin

    admin

    14/10/19

    walah...yung....kiye pancen mastah oprek template.....mantab Mas Dista. Lanjutken. Kunanti yang ketiga juga nih....

    • Dista

      Dista

      14/10/19

      MrHadi, kamu hoax! Tapi aku tahu itu, gak tahu kalo tempe, makan aja lah ya!!! Jadi, pangil Saya Mastahu tempelete.
      ~ Dista, 2019

      • admin

        admin

        14/10/19

        Asiap....mas tahu tempe lete. ..nek mau tempe kemul mampir Wonosobo......maksude ....banyak yg jual......hehe