Cara Agar Artikel Valid AMP di Blogger 2021



Hai sobat blogger, kali ini saya akan membahas tutorial cara mengedit postingan blogger agar menjadi AMP HTML yang valid.

Seperti diketahui, sejak diluncurkannya algoritma Mobile First Index pada pertengahan 2018 lalu, tersiar kabar bahwa Google memprioritaskan cash dari situs-situs yang sudah mendukung fitur AMP (Accelerated Mobile Page).

Cara Membuat Postingan Blogger yang Valid AMP


Sesuai dengan namanya, Mobile First Index Algorithm mengutamakan situs dengan kecepatan yang mobile-friendly agar lebih cepat terindeks di mesin pencari dan memiliki posisi teratas dengan lebih mudah.


Oleh karena itu, banyak penerbit mulai menggunakan template AMP Blogger yang valid di situs mereka.


Karena fitur AMP akan menggunakan cache Google untuk menyimpan file/data dari situs yang sudah support AMP.


Sehingga diakses lebih cepat oleh pengguna yang mengakses mesin pencari Google melalui perangkat mobile.


Namun untuk platform Blogger sendiri, menggunakan AMP tidak semudah WordPress Self-Host atau sejenisnya, Anda harus mengedit postingan sesuai aturan/rules di Accelerated Mobile Page Implementasi.


Oleh karena itu disini saya akan membagikan tutorial cara menulis artikel blogger agar valid di template blog AMP.


A. Tata Letak Postingan/Artikel Blogger

Sebelum Anda mempelajari cara menulis artikel yang tepat untuk AMP yang valid.

Anda perlu memastikan apakah saat ini Anda sedang memulai blog baru dan tidak ada postingan atau jika Anda sudah memiliki blog yang sebelumnya HTML5 dan saat ini menggunakan AMP HTML. 

Karena jika sebelumnya Anda adalah pengguna template HTML5, Anda perlu mengedit artikel agar valid.


(Jika Anda baru memulai blog/tidak memposting sama sekali, lewati tutorial berikutnya dan langsung ke tutorial penulisan artikel AMP yang valid di bawah ini)

Jika Anda sudah memiliki pesan, Anda perlu menghapus format terlebih dahulu, klik CTRL + A untuk memblokir semua pesan dalam pesan, lalu klik tombol Hapus Format


Setelah selesai membersihkan postingan, mari kita lanjutkan ke tutorial cara menulis artikel blogger agar postingan valid untuk AMP.



B. Edit artikel sehingga postingan blog 100% AMP valid


Berikut pengaturan yang perlu Anda lakukan untuk mengedit artikel blog agar bisa menjadi AMP yang valid:


A. Cara memasang gambar AMP di luar postingan/gambar utama

Yang pertama adalah cara mengatur gambar di luar postingan, maksudnya gambar sebagai thumbnail halaman rumah, postingan terkait dan postingan populer atau thumbnail yang akan muncul saat memposting artikel kita di media sosial seperti Facebook, Twitter, dll.

Berikut adalah kode untuk memasang gambar utama atau postingan thumbnail:

<noscript><img alt=" Gambar-Deskripsi " width=" 600 " height=" 338 " src=" https://IMAGE ADDRESS.jpg " title=" Judul Gambar " /></noscript>



Di dalam kode ada beberapa informasi yang saya tandai BOLD / TEBAL, ubah dan sesuaikan dengan deskripsi foto Anda.



Contoh :

  • Image-Captions = kamu ganti dengan Picture Caption seperti saat kamu memasukkan IMG ALT.
  • Judul gambar = Anda ganti dengan judul/nama gambar.
  • Width = angka 600 menunjukkan lebar gambar dalam Pixel, sesuaikan dengan lebar gambar Anda.
  • Tinggi = angka 338 menunjukkan ukuran tinggi gambar dalam satuan Pixel, sesuaikan dengan tinggi gambar Anda.
  • https://ADDRESS GAMBAR.jpg = Ganti dengan URL/link gambar anda

B. Cara memasang gambar dalam artikel agar menjadi AMP yang valid

Jika ini adalah cara mengedit gambar di postingan menjadi AMP yang valid, biasanya Anda menulis artikel yang membutuhkan banyak gambar sehingga Anda perlu menggunakan kode berikut untuk membuat postingan Anda menjadi AMP yang Valid.

<amp-img alt=" image-description " height=" 300 " layout="responsive" src=" https://IMAGEADDRESS.jpg " width=" 430 "></amp-img>


Untuk informasi yang saya tandai Tebal/Tebal, ubah seperti pada tutorial nomor 1, dimulai dengan deskripsi gambar, lebar dan tinggi gambar Anda, dan tautan URL gambar.



C. Instal Video YouTube Responsif AMP yang Valid


Selanjutnya, pelajari cara menyematkan video dari YouTube untuk blogger yang sudah menggunakan template AMP. Jika template masih HTM5, biasanya Anda harus mengedit/menambahkan banyak kode script ke format template.


Tapi tidak dengan AMP. Ikuti tutorial berikut untuk informasi lebih lanjut:

Pemeriksaan skrip AMP Youtube

Pertama, temukan dulu kode berikut / atau yang serupa di template HTML Anda:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Jika belum, pasang script di atas tepat setelah kode <head> di template blog Anda. Jika sudah ada langsung saja ke cara pasang video youtube di blogger.


Kode untuk menginstal video YouTube responsif di AMP Blogger


Pertama, buka postingan tempat Anda ingin menambahkan video dari YouTube, ubah mode editor dari Compose ke HTML . Kemudian gunakan skrip berikut:

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


Nah pada kode diatas ada bagian yang saya tandai Bold/Bold, ganti dengan ID video youtube kamu. Untuk mendapatkan ID video, buka YouTube, tonton video dan di akhir Anda akan melihat URL


D. Menggunakan Tombol Fungsi di Dasbor Blogger


Yang terakhir adalah bagaimana Anda menggunakan tombol fungsi di dashboard Blogger, pada dasarnya sama.

Anda tidak perlu mengedit postingan yang menggunakan salah satu fitur di dasbor blogger agar valid untuk AMP.


Namun untuk fitur Alightment selama ini kebanyakan blogger mengatakan untuk tidak menggunakan fitur ini, jadi jika anda sedang menulis artikel, usahakan tulisan anda menggunakan Auto Align Links.

Tetapi Anda juga dapat membuat teks Align Center menggunakan kode berikut:

<div class='center'> Kata-kata Anda </div>

Ganti apa yang saya tandai dengan BOLD/Bold dengan kata-kata yang diinginkan.

Untuk fungsi lain, Anda tidak perlu menambahkan kode apa pun, 


Penutupan

Demikian artikel AMP yang valid di Blogger, semoga dapat membantu sobat mengedit postingan blog agar menjadi AMP yang valid.

Karena seperti yang Anda semua tahu, Google semakin mempromosikan fitur ini sekarang.

Nah, cukup sekian tulisan saya kali ini, 

0 Comments