Memasang Gambar Utama Valid AMP Pada Blogger

Rekan blogger dan pembaca, ada beberapa hal yang saya pertimbangkan ketika memasang gambar utama untuk postingan di blogger. Pertimbangan-pertimbangan tersebut bukan semata-mata mengacu pada AMP tetapi juga pada hal lain. Poin-poin selengkapnya adalah :

1. Cara pemasangan gambar harus valid AMP,
2. Cara pemasangan gambar harus responsive,
3. Cara pemasangan gambar harus SEO Friendly,
4. Cara pemasangan gambar harus memiliki data terstruktur,
5. Dan muncul secara proporsional ketika sharing di Google+ serta Facebook.

Untuk mencapai itu semua, maka langkah yang pertama saya lakukan adalah men-disable settingan default gambar utama pada Blogger. Caranya adalah dengan menambahkan css berikut :

.separator {display:none;}

Selanjutnya saya memodifikasi bagian ini :

<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

Hasil modifikasinya menjadi seperti ini :

 <div class='post hentry uncustomized-post-template' itemprop='mainEntityOfPage' itemscope='itemscope' itemtype='http://schema.org/Article' role='main'>
<meta itemType='https://schema.org/WebPage' itemid='http://www.kontakmedia.com' itemprop='mainEntityOfPage' itemscope='itemscope'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.firstImageUrl'>
<b:if cond='data:post.title'>
<amp-img class='desaturate' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='250' itemprop='thumbnailUrl' layout='responsive' noloading='noloading' width='400'/>
</b:if></b:if></b:if>
<meta expr:content='data:blog.blogId' itemprop='accessibilityControl'/>
<meta expr:content='data:post.id' itemprop='accessibilityControl'/>

Lho koq, katanya AMP itu mengurangi sintaks tapi ini malah jadi banyak? Mungkin ada rekan yang bertanya seperti itu.

Pada bagian ini memang ada penambahan tetapi di bagian lain justru jauh berkurang. Dengan demikian bila ditinjau secara keseluruhan maka AMP ini memang mengurangi banyaknya sintaks. Dampak positifnya adalah ukuran template menjadi jauh berkurang.

Perlu saya garis-bawahi, hasil modifikasi menjadi lebih banyak sintaks-nya, karena saya tidak hanya mengejar valid AMP, tapi juga hal lain sebagaimana telah disinggung di atas.

Salah-satu pengurangan itu terjadi di salah-satu bagian css. Sintaks untuk post body yang biasanya agak panjang cukup ditulis pendek seperti ini :

.post-body amp-img {max-width:100%;height:auto;padding:0.1em;}
.post amp-img {max-width:100%;height:auto;padding:0.1em;}

Cara pemasangan gambar utama seperti ini adalah dasar yang nanti akan bisa digunakan ketika memasang aneka gambar lain, termasuk iklan.

Sekian artikel saya yang berjudul Memasang Gambar Utama Valid AMP Pada Blogger. Semoga bermanfaat.

Demikianlah artikel dari Kontakmedia yang berjudul Memasang Gambar Utama Valid AMP Pada Blogger, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.