Malfungsi

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 sese~~orang~~dewa 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!!!

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 <head>

Masih gabisa disimpen? Hapus tag </head> penutup, trus ganti pake ini </head>

Cara Ngakalin JS Blogger

Tambahin atribut b:js bernilai false di tag HTML.

<html b:js='false'>

Yang terjadi setelah mematikan javascript blogger:

Loading jadi cepet (dikit),
Tata letak ancur, kepotong, jadi gak bisa edit widget.

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...?