Cara Agar Postingan / Artikel Valid AMP | Tips Blog Valid AMP

Awaknyo >>

Hai sahabat Awaknyo, dikesempatan kali ini kita akan membahas mengenai amp, AMP atau accelerated mobile page, yang kata google akan membuat blog semakin ngebut, dan google bilang di pencarian blog kamu akan memiliki logo petir, amp juga dikenal sebgai mobile first index dimana ini adalah amp project juga, oke sob berikut ini adalah cara agar postingan atau artikel blog valid amp.

Cara agar Postingan/ Artikel Valid AMP

1. LOGO BLOG
jika kamu ingin menggunakan logo blog di versi AMP, cari kode ini di dalam template:

<p class='title alt-blog-logo'><b:include name='title'/></p>

Hapus kode tersebut dan ganti dengan kode :

<amp-img expr:alt='data:title' height='28' width='159' layout='fixed' src='kode gambar kamu'>
</amp-img>

 ganti URL gambar logonya dengan URL gambar logo yang ingin kamu pakai.

Ganti juga atribut height dan width agar sesuai dengan ukuran gambar logo di blog amp kamu

2. agar Gambar Postingan Valid AMP

<amp-img alt="AMP HTML" height="300" layout="responsive" src="https://ALAMATGAMBAR.jpg" width="430"></amp-img>

Atau

<amp-img
alt="alt gambar "
title="title gambar "
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="link sumber gambar"
tabindex="0">
</amp-img>

3. Menyisipkan gambar di luar postingan
agar Gambar Postingan Yang sumbernya dari luar postingan, misalnya kamu pakai gambar dengan menautkan link

Yaitu gambar yang muncul di atas postingan bukan di dalam postingan. perlu diperhatikan ketika menyisipkan gambar harus pilih “original size” kemudian hapus “link” gambar dan jangan lupa memberi “alt” dan “title” gambar.

Gambar  secara deafult ketika dilihat pada HTML terlihat seperti ini:

<div class="separator" style="clear: both; text-align: center;">
<img alt="alt gambar" border="0" src="Link Gambarnya" title="title gambar" /></div>

Ganti Menjadi

<noscript>
<img alt="alt gambar" width="650" height="350" src="Link gambarnya" title="title gambar" />
</noscript>

4. Agar embed video / video youtube valid AMP

<amp-youtube data-videoid="i7wveOu5hkQ" height="270" layout="responsive" width="480"></amp-youtube>

5. Menggunakan Tulisan Rata kiri kanan/ justify
ingat...!!! di dalam postingan amp tidak boleh ada tag HTML dengan CSS inline misalnya <div style="text-align: justify;"></div> ataupun lainnya.

<div class='center=>Tulisan yang ingin rata kiri kanan</div>

kamu bisa menggunakan kode css  dan .center{text-align:justify;} kamu harus menggunakan kode <div> tulisan yang ingin rata kanan kiri </div>

contohnya:
setelah dihilangkan HTML dengan CSS

<div class='center'>
Awaknyo adalah sebuah blog yang berisi mengenai tutorial blogger, kode html, css dan sebagainya, dimana awal mula blog ini adalah sebagai media menyimpan source kode agar tidak susah payah lagi cari cari di google cukup ketik di pencarian awaknyo langsung nemu yang pas
</div>

6. Menyisipkan slide gambar
biasanya kita suka tuh pakai slide di postingan, agar postingannya tidak banyak terlihat gambar tapi ingin memberikan detail gambar kamu bisa menggunakan slide
misalnya 3 gambar berikut, jika pengen lebih kamu bisa menambah sub kode seperti dibawah ini
ingat harus valid amp, berikut ini

<amp-carousel width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="Link gambar 1"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="Link Gambar 2"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="Link Gambar 3"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>

Nah itulah cara agar postingan kamu valid amp sob, oh iyah jika kamu dari blog non amp pindah ke amp kamu harus edit semua postingan kamu agar valid amp, terutama gambar, jika kamu tidak memiliki gambar di postingan sebelumnya maka kamu tidak perlu edit edit lagi.

dan sebenarnya amp ini bikin repot karena google belum menyertakan nya di blogger, nah cara agar bisa melakukan itu semua ketika kamu membuat postingan kamu harus berada dalam mode HTML bukan compose seperti biasanya.

jangan lupa tinggalkan komentarnya yah.. 

Imuel Official Hai, saya Imuel saya berasal dari SUMBAR dan saat ini saya bekerja sebagai penulis Blog dan web. Saya senang menulis dan berbagi ilmu, Blogging adalah hobi saya. Jika ada pertanyaan silahkan sampaikan dikomentar.

Berbagi :