Mengatasi Warning Dari JS-JS AMP Pada AMP Validator

Pada waktu yang lalu, saya sudah membagikan artikel tentang Cara Uji Validasi AMP Dengan Ekstensi AMP Validator. Dan pada kesempatan kali ini saya akan mencoba membagika artikel tentang Mengatasi Warning Dari JS-JS AMP Pada AMP Validator.

Mungkin sebelumnya blog Anda sudah Valid AMP dan ketika di uji menggunakan AMP Validator pun ikon berwarna hijau polos, tanpa adanya warning yang berwarna kuning pada blog Anda.

Namun sekarang Ketika di uji dengan AMP validator muncul beberapa warning yang sebelumnya tidak ada. Ternyata warning-warning tersebut muncul dari js-js AMP yang dipasang di atas kode </head>.

Jadi, penempatan js-js AMP harus sesuai kebutuhan saja, jika template blog Anda terdapat js yang tidak di perlukan, maka akan terjadi warning pada AMP validator, jadi halaman hanya memuat js yang diperlukan saja. Misalnya jika sebuah halaman tidak menggunakan video youtube, maka di halaman tersebut tidak boleh ada amp-youtube.js di atas </head> blog. Hal ini bertujuan untuk benar-benar memaksimalkan loading blog agar 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 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.
Baca juga: Fungsi Tag Kondisional Dan Cara Penggunaanya

Sebagai contoh, di bawah ini adalah js-js AMP di blog Coba Ngetik


<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;http://www.cobangetik.com/2017/03/memasukan-gambar-video-di-postingan.html&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;http://www.cobangetik.com/2017/07/cara-memasang-gambar-animasi-di.html&quot;}'>
<script async='async' custom-element='amp-anim' src='https://cdn.ampproject.org/v0/amp-anim-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.

Untuk amp-youtube.js dan amp-anim.js menggunakan tags cond untuk url tertentu karena memang amp-youtube dan amp-anim hanya tampil di url-url tersebut.

Jadi jika Anda mengalaminya juga, silahkan sortir js-js AMP yang digunakan sesuai dengan elemen-elemen AMP yang digunakan juga.
Demikian artikel tentang Mengatasi Warning Dari JS-JS AMP Pada AMP Validator.
Jangan lupa, baca juga: Memasang Script Google Analytics Valid AMP. Semoga bermanfaat.

Source: http://www.kompiajaib.com/2017/01/mengatasi-warning-amp-dari-js-js-amp.html

Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser