Mengatasi Warning Amp Dari Js-Js Amp Pada Amp Validator

Pagi hari ini, 06 Januari 2017 ada yang berbeda pada ikon AMP validator untuk blog Kompi Ajaib, yang biasanya berwarna hijau polos yang pertanda blog Kompi Ajaib sudah valid AMP, sekarang ada kotak kuning pada ikon AMP validator tersebut.

Ketika diklik ternyata muncul beberapa warning yang sebelumnya tidak ada. Ternyata warning-warning tersebut muncul dari js-js AMP yang dipasang di atas instruksi </head>.

Jadi, penempatan js-js AMP harus sesuai kebutuhan, jadi halaman hanya memuat js yang diharapkan saja. Misalnya jikalau sebuah halaman tidak memakai video youtube, maka di halaman tersebut dihentikan ada amp-youtube.js di atas </head> blog. Hal ini bertujuan untuk benar-benar memaksimalkan loading blog semoga tidak terganggu dengan js-js yang tidak diperlukan.

Karena penggunaan element amp tiap blog berbeda, maka untuk menghindari warning pada AMP validator, penempatan js AMP dapat mengunakan conditional tags. Namun jikalau element AMP tampil di semua halaman maka pemasangan js-nya tidak perlu pakai conditional tags, ibarat untuk amp-analytics.js dan amp-ad.js.

Sebagai contoh, di bawah ini ialah js-js AMP di blog Kompi Ajaib

 <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>
 
 <b:if cond='data:blog.url in {&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;,&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;,&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;,&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;,&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;,&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;}'>
 <script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>
 </b:if>
 
 <b:if cond='data:blog.url in {&quot;https://komporajaibku.blogspot.com//search?q=cara-mudah-mengedit-postingan-blog-amp&quot;}'>
 <script async='async' custom-element='amp-audio' src='https://cdn.ampproject.org/v0/amp-audio-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 memakai conditional tags alasannya ialah js-js tersebut dibutuhkan di semua halaman.

Untuk amp-sidebar.js menggunakan tags cond untuk mobile url saja alasannya ialah amp-sidebar memang aku pasang hanya untuk mobile url saja.

Untuk amp-social-share.js menggunakan tags cond hanya untuk halaman postingan saja alasannya ialah memang amp-social-share hanya ditampilkan di halaman postingan saja.

Untuk amp-youtube.js dan amp-audio.js menggunakan tags cond untuk url tertentu alasannya ialah memang amp-youtube dan amp-audio hanya tampil di url-url tersebut.

Kaprikornus jikalau Anda mengalaminya juga, silahkan sortir js-js AMP yang dipakai sesuai dengan elemen-elemen AMP yang dipakai juga.


Sumber https://www.kompiajaib.com/

Share this post