Tutorial: Cara Menciptakan Template Blogger Valid Amp Google 100%

Wednesday, 3 January 2018

Pengertian AMP Google dan Cara Membuat Template Blogger Valid AMP HTML

AMP atau Accelerated Mobile Pages, -- "Laman Seluler yang Dipercepat" ialah project Google untuk menciptakan laman web yang lebih cepat ditampilkan saat di kanal untuk pertama kalinya.

Dalam pembuatan dan pengembangannya, AMP Google membatasi penggunaan HTML, CSS, dan JavaScript serta pengelolaan dan pemuatan sumber daya eksternal menyerupai gambar, iklan, dan video.

Meski pun pembatasan penggunaannya yang cukup drastis, tidak serta merta template blogger yang valid AMP tidak bagus. Malah, tema Blogger yang sudah valid AMP Google dikatakan gampang memenangi peringkat halaman pertama Google dan bisa mendapat banyak trafik organik dalam waktu yang cukup cepat.

Nah, template valid AMP HTML ini pun mempunyai kelebihan dan kekurangan sebagaimana template blogger lainnya. Semua penjelasannya sudah tertuang pada posting pengalaman memakai template blogger AMP Google.

Tutorial: Cara Membuat Template Blogger Valid AMP Google 100%

Bagi teman yang ingin mengubah template blogger biasa menjadi template blogger valid AMP Google, postingan ini merupakan tumpuan atau panduan yang paling tepat perihal cara mengintegrasikan template blogger biar tervalidasi dengan tepat pada AMP Google.

Tutorial pada artikel ini pun mengusahakan dan/atau mengupayakan teknik tanpa mengorbankan sebanyak mungkin fungsi Blogger yang ada.

1. Membuat Artikel yang Banyak di Blog

Pada tahap pertama, buat terlebih dahulu beberapa artikel di dalam blog. Pastikan artikel tersebut mempunyai judul, teks yang panjang, gambar, label (kategori), dan dipublikasikan.

Pastikan, artikel yang dipublikasikan lebih dari 5 konten, misalnya 8 konten namun 12 artikel lebih bagus.

Untuk permasalahan teks yang panjang, gunakan Lorem Ipsum. Lorem Ipsum merupakan situs yang menyediakan pola teks guna kepentingan mengecek gaya tulisan, ukuran font, jenis abjad yang digunakan, dan lain-lainnya.

2. Menerapkan/Memasang Komponen HTML AMP Google di Blogger Template

Pada langkah kedua ini, kita akan menonaktifkan file CSS dan file JavaScript eksternal yang ada di dalam template orisinil bawaan Blogger.

Penting! Apabila ingin menerapkan tutorial ini, gunakan template blogger bawaan Blogger yang orisinil sebagai materi percobaan.

Here we go...!!!

Hapus semua instruksi awal yang ditunjukkan panah pada gambar di bawah ini, hingga instruksi </head>

Copy (Salin) instruksi Markup di bawah ini untuk mengganti instruksi di atas yang telah di hapus (Replace/Change):

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html amp='amp' lang="id"> &lt;head&gt; &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin> <meta charset='utf-8'/> <meta content='width=device-width,minimum-scale=1,initial-scale=1,user-scalable=no,minimal-ui' name='viewport'/> <link expr:href='data:blog.canonicalUrl' rel='canonical'/> <link expr:href='data:blog.url' rel='amphtml'/> <link expr:href='data:blog.url' rel='canonical'/> <title><data:blog.title/></title> <b:if cond='data:blog.metaDescription'> <meta expr:content='data:blog.metaDescription' name='description'/> </b:if> <!-- Required AMP styles -->  <style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>  <style amp-custom='amp-custom'> /*<![CDATA[*/ /* @platform: Blogger @theme_name: {{Arief Ghozaly}} @created: May 2018 @last_mod: May 2018 @version: 1.0.0 */ /* BROWSER RESETS - inspired by Eric Meyer */ body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {  margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content:' '; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* TYPOGRAHY */ body { font: normal normal 16px Helvetica, Arial, sans-serif; line-height: 1.428; color: #3b3b3b; } h1, h2, h3, h4, h5, h6 { font: normal normal 16px Helvetica, Arial, sans-serif; line-height: 1.1; color: #333; margin-bottom: 10px; } h1 { font-size: 225%; margin-top:20px; margin-bottom:20px; } h2 { font-size: 200%; margin-top:20px; } h3 { font-size: 150%; margin-top:10px; } h4 { font-size: 125%; margin-top:10px; } h5 { font-size: 100%; margin-top:10px; } h6 { font-size: 80%; margin-top:10px; } p { margin-bottom: 10px; } a:link, a:visited { text-decoration: none; color: #06c; } b, strong { font-weight:700; } .small, small { font-size: 80%; } blockquote { font: normal normal 16px Times New Roman, serif; } ul, ol {  padding-left:20px; } /*]]>*/ </style> <!-- Required AMP-JS --> <script async='async' src='https://cdn.ampproject.org/v0.js'/> &lt;/head&gt;&lt;!--<head/>--&gt;

CSS Style yang ingin ditambahkan harus memakai instruksi <style ='amp-custom'> .... </style> dan harus berjumlah satu buah, -- instruksi "amp-js" disediakan sebagaimana syarat AMP HTML.

Selanjutnya, temukan instruksi </body> di dalam template blogger. Sobat akan melihat citra kodenya menyerupai di bawah ini:

<script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;); }, 10); </script> </body>

Jika ada, ganti instruksi bukaan <script type='text/javascript'> di atas dengan instruksi <script> atau menggantinya menyerupai ini: <script> ... </script>

Ganti instruksi </body> dengan instruksi di bawah ini:

&lt;!--</body>--&gt;&lt;/body&gt;

Selanjutnya, cari instruksi macro:includable dan b:sections-contents, HAPUS semuanya alasannya nantinya tidak akan digunakan. Untuk menghapus instruksi macro:includable, caranya menyerupai berikut:

<macro:include id='*-sections' name='sections'> ... </macro:include>

Kode <macro:include merupakan awalannya, sedangkan instruksi </macro:include> merupakan tag penutupnya. Ulangi langkah-langkah ini hingga semua instruksi makro tidak ada lagi di dalam template blogger.

Menghapus Elemen Tata Letak Blogger

Template default Blogger dilengkapi beberapa elemen pemanis yang berfungsi menangani tampilan template dengan cara memakai Blogger Template Designer.

Karena fitur ini akan dinonaktifkan alasannya pengaturan template blog gres (AMP Google), maka hapus elemen yang tidak dipakai ini. Hapus semua instruksi <div class="faux-*">...</div> yang ada di dalam template blog. Hasilnya kurang lebih akan tampak menyerupai di bawah ini:

Pada dasarnya, template blogger default bawaan orisinil Blogger sudah disediakan elemen HTML5. Yang perlu dilakukan pada tahap ini ialah menambahkan instruksi <article> dan </article> di dalam Blogger Theme. Lihat gambar SS di bawah ini:

Menghapus JavaScript Otomatis, Editing Helpers, dan Menonaktifkan Komentar Blogger

Secara otomatis, Blogger menambahkan JavaScript saat fungsi posting blog diaktifkan. Nah, hapus fungsi posting blog tersebut. Lihat gambar di bawah ini:

Selanjutnya, menghilangkan instruksi "Obeng dan Tang", -- disebut juga Widget Editing Helpers dengan cara menghapus instruksi <b:include name='quickedit'/> yang ada di dalam template blogger.

Kode ini: <b:include name='quickedit'/> akan terus muncul secara otomatis setiap kali adanya aktifitas penambahan widget-widget di tata letak Blogger. Jadi, simpulan memasang/menambahkan sebuah widget, masuk ke HTML Template, hapus instruksi tersebut!

Masih pada panduan gambar di atas, hapus centang OK pada kolom komentar. Itu artinya, menonaktifkan komentar Blogger -- Disable Comments.

Penggunaan Gambar di Template Blogger AMP Google

Semua tag HTML dari gambar yang ada, harus memakai elemen <amp-img> ... <amp-img/>. Lihat gambar di bawah ini:

Atau teman juga boleh memakai instruksi di bawah ini sebagai penggantinya:

<amp-img src="/img/amp.jpg" width="1080" height="610" layout="responsive" alt="Pengertian AMP Google dan Cara Membuat Template Blogger Valid AMP HTML Tutorial: Cara Membuat Template Blogger Valid AMP Google 100%"></amp-img>

Menghapus Inline Style Rules

Pada laman AMP, hanya akan ada 1 hukum gaya CSS sebaris menyerupai <style amp-custom="amp-custom">....{{Your custom CSS}}...</style>.

Selain itu, hapus semua instruksi style= alasannya atribut ini tidak mendukung validasi template blogger ke versi AMP Google.

Selanjutnya, teman juga harus menghapus elemen HTML dengan atribut name= alasannya atribut ini tidak diizinkan untuk ditempatkan di halaman AMP Blogger Teme.

Simpan template blogger dan cek kesannya di Validasi AMP Google: Blogger Template.

Ada beberapa hal yang harus diperhatikan apabila ingin mengubah/mengganti template blogger orisinil Blogger menjadi AMP HTML, diantaranya adalah:

Tidak boleh memakai dua tag <style>
Hanya diperbolehkan memakai instruksi <style amp-custom> sebanyak satu kali
JavaScript eksternal harus bersifat Asinkron (async)
Script dihentikan memakai atribut type='text/javascript'

Jika semuanya berjalan dengan lancar dan sukses diterapkan, ada satu CATATAN penting. Menulis artikel di template blogger AMP Google itu berbeda dari pada biasanya. Untuk keterangan lebih lanjut, klik disini: Cara Menulis Artikel di Template Blogger AMP HTML/Google.

Itulah pengertian AMP HTML dan tutorial cara menciptakan template blogger valid AMP Google 100% dengan baik dan benar.

Source:

https://www.ampproject.org/docs/getting_started/create
https://www.quora.com/Is-it-possible-to-implement-AMP-on-Blogger-platform
https://super-sip.blogspot.com//search?q=pengalaman-template-amp-blogger
https://productforums.google.com/forum/#!msg/blogger/5TALTSIN1nA/LUq6qAs5CQAJ
https://productforums.google.com/forum/#!topic/blogger/jVBRS0WLTmQ
https://mercury.postlight.com/amp-converter/
https://super-sip.blogspot.com//search?q=pengalaman-template-amp-blogger