Cara Mengatasi AMP Warning Menggunakan Conditional Tags


Seperti yang kita tahu bahwa dalam menggunakan Template AMP tidak bisa asal-asalan, berbeda dengan Template non AMP yang bisa menggunakan script apapun asal sesuai dengan sintaksnya dan gak eror hehe, untuk Template AMP script atau kodenya harus sesuai dengan kebutuhan, misalnya memasang beberapa js amp baru, pastilah terjadi eror, saya pernah mencoba mengutak-atik beberapa template AMP dan memang benar, harus benar-benar sesuai kebutuhan, seperti yang pernah di ulas oleh suhu template AMP yaitu Brother Adhy Suryadi hehe..

Karena penggunaan element amp tiap blog berbeda, maka untuk menghindari warning pada AMP validator, penempatan js AMP bisa mengunakan conditional tags. Namun jika element AMP tampil di semua halaman maka pemasangan js-nya tidak perlu pakai conditional tags, seperti untuk amp-analytics.js dan amp-ad.js, sebenarnya bukan tidak boleh, tapi ini demi kenyamanan blog anda, dan tujuannya jelas adalah untuk memaksimalkan loading blog agar wusssss... pada semua device.

Cara Mengatasi Warning JS AMP Dengan Menggunakan Conditional Tags Seperti dibawah ini, pada template AMP

 
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/>
<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
<script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-0.1.js'/>

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
</b:if>


Penjelasannya.

Untuk amp-form.js, amp-iframe.js, amp-analytics.js, amp-carousel.js, amp-ad.js, dan amp-accordion.js tidak menggunakan conditional tags karena js-js tersebut dibutuhkan di semua halaman.

Untuk amp-sidebar.js menggunakan tags cond untuk mobile url saja karena amp-sidebar memang saya pasang hanya untuk mobile url saja.

Untuk amp-social-share.js menggunakan tags cond hanya untuk halaman postingan saja karena memang amp-social-share hanya ditampilkan di halaman postingan saja.
Selamat mencoba,

Reaksi:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser