Membuat Halaman Valid AMP Hanya di URL amp=1 Pada Blogger
Membuat Halaman Valid AMP Hanya di url amp=1 pada Blogger - Sekarang membuat halaman amp pada blogger dapat dilakukan dengan 2 cara, yaitu : Membuat semua halaman blog valid amp, baik pada tampilan desktop maupun pada tampilan mobile, dan yang kedua, membuat halaman valid amp yang terpisah dari halaman canonical atau halaman desktop.Contoh halaman valid amp yang terpisah dari canonical adalah template amp yang menggunakan parameter url m=1 sebagai halaman yang valid amp-nya, sehingga orang yang berkunjung melalui ponsel atau mobile akan berada di halaman valid amp, sedangkan orang yang berkunjung melalui laptop atau desktop, maka dia berada di halaman yang bukan amp atau non-amp.
Keunggulan halaman valid amp yang terpisah dari canonical adalah anda dapat menempatkan javascript tambahan sebagai fitur penunjang seperti widget recent post di halaman yang bukan amp atau non-amp. Jangan lupa baca juga Keuntungan Blog / Web dengan AMP Template.
Menggunakan parameter m=1 sebagai halaman yang valid amp sebetulnya kurang efisien, karena tidak semua pengunjung yang berasal dari mobile ditempatkan pada halaman cache google, tergantung dari mereka berkunjung ke blog kita melalui mesin telusur google atau mesin telusur yang lainnya, jika terjadi hal demikian, berarti kita sudah menyia - nyiakan halaman mobile kita, yang seharusnya dapat di pasang javascript tambahan, hal tersebut tidak dapat dilakukan, karena itu halaman yang valid amp. Baca juga cara mengoptimalkan halaman AMP.
Saya tekankan, tujuan utama kita membuat halaman valid amp adalah agar blog kita dapat ditempatkan di halaman cache google, dengan demikian, dapat disimpulkan bahwa kita sebenarnya dapat menggunakan parameter apa saja untuk membuat halaman valid amp, yang terpenting pada parameter tersebut merupakan halaman yang valid amp.
Untuk mengatasi parameter url m=1 yang kurang efisien tersebut, kita dapat menggunakan parameter yang lain, seperti parameter url amp=1 untuk halaman yang valid amp, kenapa amp=1 ?, karena tidak ada device yang meredirect halaman canonical ke halaman dengan parameter url amp=1, selain itu parameter amp=1 mudah untuk kita ingat sebagai halaman amp. Anda juga dapat memakai parameter lainnya, misal fast=1, namun parameter tersebut kurang begitu cocok digunakan di halaman yang valid amp.
Cara membuat halaman valid amp di parameter amp=1 ini sudah saya terapkan di blog saya ini www.kangkimin.com dan Alpha AMP Template, dan buktinya berhasil. Langsung saja kita ke cara membuat halaman valid amp hanya di url dengan parameter amp=1 :
Langkah #1
Silahkan menuju tag
<html> atau cari kode yang mirip seperti dibawah ini.<HTML amp='amp' expr:dir='data:blog.languageDirection' lang='id'><HTML expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale'>
<b:attr cond='data:view.url == data:view.url params { amp: "1" }' name='amp' value='amp'/>Langkah #2
Silahkan cari kode canonical atau cari kode yang mirip seperti kode dibawah ini.
<link expr:href='data:blog.url' rel='canonical'/><b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.url + "?amp=1"' rel='amphtml'/>
</b:if>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<link expr:href='data:blog.canonicalUrl' rel='canonical'/>
</b:if>Setelah itu silahkan save atau simpan perubahan pada templatenya, dari sini langkah untuk membuat halaman valid amp di url dengan parameter amp=1 sudah selesai. Anda tidak perlu melakukan perubahan pada element - element amp, karena element tersebut akan tetap bekerja meskipun pada halaman yang bukan amp.
Kini anda dapat menempatkan javascript tambahan pada halaman yang bukan amp. Anda hanya perlu membuat 2 conditional tag untuk memisahkan halaman amp dengan halaman yang bukan amp, contohnya seperti dibawah ini :
Conditional Tag dibawah ini untuk halaman valid AMP.
<b:if cond='data:view.url == data:view.url params { amp: "1" }'><b:if cond='data:view.url != data:view.url params { amp: "1" }'>Dengan kedua conditional tag tersebut anda dapat memisahkan element blog tertentu apakah mau ditampilkan pada halaman yang valid amp atau halaman yang bukan amp.
Setelah melakukan perubahan tersebut, ada hal yang harus tetap diperhatikan, seperti untuk masalah postingan, anda harus tetap membuat postingan sesuai dengan kaidah amp seperti sebelumnya. Selain itu, hal yang perlu anda perhatikan selanjutnya adalah mengoptimalkan penempatan iklan Adsense, dengan membuat iklan Adsense yang terpisah, antara halaman valid amp dan halaman yang bukan amp.
Untuk iklan adsense pada halaman valid amp kita menggunakan
amp-ad, dan untuk iklan adsense pada halaman yang bukan amp, kita menggunakan kode iklan adsense biasa.Langkah pertama untuk memisahkan iklan adsense tersebut adalah kita harus memisahkan js ad dari halaman yang bukan amp, cari kode berikut ini.
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/><b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:view.url == data:view.url params { amp: "1" } and not data:blog.searchQuery'>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
</b:if>
<b:if cond='data:blog.pageType not in {"static_page","error_page"} and data:view.url != data:view.url params { amp: "1" }'>
<script>
//<![CDATA[
function im() {
(function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })();
}window.onload = im;
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-4293348500692453",
enable_page_level_ads: true
});
//]]>
</script>
</b:if>Ganti kode
google_ad_client dengan kode publisher adsense milik anda.Sekarang anda tinggal membuat slot iklan yang terisah pisah, antara halaman valid amp dan halaman yang bukan amp, disini kita akan menggunakan 2 conditional tag yang sudah saya jelaskan seperti diatas, contohnya seperti ini :
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
<!-- Slot iklan untuk halaman bukan amp -->
<ins class='adsbygoogle' data-ad-client='ca-pub-1234567890' data-ad-format='rectangle' data-ad-slot='1234567890' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
<b:if cond='data:view.url == data:view.url params { amp: "1" }'>
<!-- Slot iklan untuk halaman valid amp -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>
Silahkan ganti kode
data-ad-client dan data-ad-slot dengan kode iklan milik anda.Dari sini langkah untuk Membuat Halaman Valid AMP Hanya di URL amp=1 Pada Blogger sudah selesai, dan anda tinggal fokus untuk membuat postingan. Sekian pembahasan saya tentang cara membuat halaman valid amp di url dengan parameter url amp=1, semoga dapat bermanfaat bagi anda semua, selamat mencoba ^_^.
Posting Komentar