Cara Mengatasi Template Viomagz AMP yang tidak Valid AMP

Cara Mengatasi Template Viomagz AMP yang tidak Valid AMP
Bagikan :
Cara Mengatasi Template Viomagz AMP yang tidak Valid AMP

AMP saat ini sudah menjadi alasan kuat untuk mempercepat loading halaman suatu website / blog kususnya di bagian versi seluler. AMP ini juga sudah mulai banyak yang menggunakannya untuk bisa bersaing di halaman pertama Google.

Sebab saat ini, halaman yang cepat lebih (SEO) dan di utamakan Google, maka tidak sedikit banyak yang menggunakan tema valid AMP agar bisa mendapatkan peringkat terbaik di mata pencarian Google.

Dalam ulasan kali ini, saya tidak menjelaskan lagi apa itu AMP buat kepentingan website / blog dan juga keuntungan menggunakan template AMP.

Hanya saja dalam bahasan ini, saya akan berbagi tentang mengatasi masalah template tidak valid AMP kususnya untuk template blogger VioMagz AMP.

Jika template yang kamu gunakan bukan template VioMagz, saya rasa trik ini akan sedikit berbeda bahkan tidak berfungsi maka dari itu saya jelaskan terlebih dahulu bahwa cara ini hanya buat pengguna VioMagz versi AMP seperti blog saya satunya.

Sebelumnya saya sempat bingung dengan template VioMagz AMP ini, saat saya mencoba merubah warna tema bagian navigasi lalu saya SIMPAN.

Setelah itu saya mendapatkan masalah saat mencek halaman AMP lewat Pengujian AMP. Bahwa halaman blog saya tidak valid AMP, padahal tidak ada kode lain yang saya ubah hanya di bagian kode warna saja.

Lalu saya cek dibagian kesalahannya ternyata di bagian <html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/> dan setiap kali kita mencoba mengedit bagian warna atau lainnya otomatis bagian kodenya otomatis berubah sendiri.

Untuk mengatasinya cukup mudah, kamu hanya perlu menyalin kode dibawah ini setiap ingin mengedit tema VioMagz versi AMP agar blog tetap valid AMP.
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>
Ganti kode yang saya beri tulisan merah tadi, dengan kode ini.

Ada beberapa alasan halaman blog kamu tidak valid AMP.

  • Pertama cara membuat postingan konten kamu salah, untuk membuat postingan kamu valid AMP di blogspot bisa kamu baca ulasan saya sebelumnya yang berjudul cara membuat postingan valid AMP di blogspot.
  • Kode HTML gambar menggunakan <div=style atau semacamnya.
  • Kolom komentar yang tidak mendukung AMP. Contohnya komentar bawaan blogspot, kamu bisa ganti dengan komentar yang mendukung AMP seperti Disqus.
  • Ada beberapa kode style terdapat didalam postingan blogspot. Sudah saya jelaskan juga beberapa tips mengatasinya disini.
  • Template memang bukan tipe AMP. Jika kamu mencoba mencek blog kamu ke halaman validator AMP sedangkan template kamu tidak support AMP maka akan mengalami eror.

Membuat Template VioMagz Tetap Valid AMP


Sebelum mengedit template lalu menyimpannya, pastikan menyimpan dengan kode dibawah ini.
<html b:css='false' b:responsive='true' b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='id'>
<b:attr cond='data:blog.isMobileRequest == &quot;true&quot;' name='amp' value='amp'/>

Buat postingan sesuai aturan AMP, dimana tidak di perbolehkan membuat kode HTML yang mengandung <div style= saat membuat gambar kedalam postingan.

Cara ini tidak bisa di lakukan secara otomatis, maka kamu harus membuat cara manual dengan menggunakan kode dibawah ini untuk gambar yang valid AMP di postingan blog kamu.
<amp-img
alt="alt gambar "
title="title gambar "
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="//www.ampproject.org/static/img/home/home_hero_phone.png"
tabindex="0">
</amp-img>

Menyisipkan video juga tidak bisa sembarangan, agar bisa valid AMP kamu harus meletakan kode script dibawah ini tepat dibagian bawah <head> template.
<script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/>

Untuk membuat video kedalam post bisa gunakan dengan kode dibawah ini.
<amp-youtube
data-videoid="ID VIDEO YOUTUBE"
height="270"
layout="responsive"
width="480"></amp-youtube>

Penutup


Mungkin itu saja trik yang bisa saya sampaikan tentang template VioMagz AMP kali ini, jika ada pertanyaan maupun masukan dari sahabat semua silahkan berikan komentarnya ya.
Tags

Subscribe to our Newsletter

Jangan lupa untuk Berlangganan update artikel terbaru via email:

Previous article
Next article

0 Disqusi to "Cara Mengatasi Template Viomagz AMP yang tidak Valid AMP"

Post a Comment

Read Comment Policy Click Here

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel