AMP merupakan proyek sumber terbuka gratis! Menyediakan cara untuk membuat halaman situs web yang dirancang cepat, pemuatan lancar, dan memprioritaskan pengalaman pengguna. AMP adalah singkatan dari Accelerated Mobile Pages dan merupakan proyek open source, didukung oleh Google dan dirancang untuk membuat web (seluler) lebih cepat dan hemat waktu. Contoh-contoh dapat disederhanakan untuk meningkatkan kemampuan membaca, dan kecepatan sebuah situs web untuk memungkinkan Anda menawarkan pengalaman cepat secara konsisten di semua perangkat dan platform. Sehingga sangat mungkin untuk melihat keuntungan terbesar dari AMP di Google pencarian.
Kapan teknologi AMP dimunculkan?
Teknologi AMP dimunculkan sekitar awal tahun 2016. Sejak itu banyak orang yang terus belajar dan mengejar prestasi untuk menerapkan situs web yang mencul dengan ikon AMP di situs mereka. Sampai saat ini, Anda sudah dapat mengingat berapa banyak ikon petir yang dapat Anda lihat di hasil Google. Pada Februari 2017, setahun setelah peluncuran publik AMP, Adobe melaporkan halaman AMP menyumbang 7% dari semua lalu lintas web untuk penerbit top di Amerika Serikat. Dan pada Mei 2017, Google melaporkan 900.000 domain web menerbitkan halaman AMP dengan lebih dari dua miliar halaman AMP diterbitkan secara global menurut Wikipedia.
AMP cukup baru di pasaran dan gratis untuk diterapkan. Itu merupakan berita hebat bahwa AMP diterma dengan baik di luaran sana untuk mereka kembangkan lebih baik di situsnya.
AMP cukup baru di pasaran dan gratis untuk diterapkan. Itu merupakan berita hebat bahwa AMP diterma dengan baik di luaran sana untuk mereka kembangkan lebih baik di situsnya.
Bagaimana dengan situs Web yang didukung dengan komponen AMP?
Situs Web yang didukung dengan komponen AMP; Hal tersebut terlihat menambah pengalaman yang sangat mengaggumkan untuk mereka dapatkan untuk situsnya. Namun ada beberapa batasan yang mungkin tidak digunakan untuk situs web AMP. Anda tidak dapat menjalankan beberapa JS pada kustom di situs Anda. Seperti halnya pada pustaka pihak ketiga yang mungkin dulu selalu Anda gunakan untuk membangun situs web. Sehingga dalam hal ini, AMP mengurangi beberapa penggunaan komponen yang mungkin melebihi batas / jumlah komponen dalam membangun sebuah situs, sehingga kemungkinan sekali hasil render situs lambat. Itulah salah satu alasan mengapa situs AMP menginginkan kerja cepat, dan menjadi rekomendasi terbaik untuk membangun sebuah web site.
Mengingat tentang batasan; tidak ada JavaScripts khusus dan sedikit CSS. Jadi pada dasarnya Anda tidak bisa begitu saja menempelkan kode itu di situs AMP Anda. Di sisi lain; Tidak semua situs mampu hidup dalam kondisi ini, namun situs Anda dapat tetap menjadi satu aplikasi yang responsif pada desktop dan seluler, karena kecil dan sederhana. Anda dapat mempertimbangkan untuk memindahkan hanya sebagian dari proyek ke AMP.
Kelebihan membangun Web AMP
Banyak sekali kelebihan membangun Web AMP seperti yang saya sebutkan diatas, salah satunya adalah Anda dapat mengurangi jumlah ukuran HTML, CSS dan JavaScript.
Jadi sebelum menerapkan AMP, sebaiknya luangkan waktu dengan Sumber Pustaka - AMP. Maka dari itu semuanya tergantung pada tujuan proyek Anda.
Komponen AMP
Dibawah ini merupakan elemen HTML dari bagian AMP template. Apabila anda sudah memiliki template, kemungkinan sekali ada perbedaan struktur HTML AMP seperti dibawah ini. Ini-lah bagian-bagian terpenting dimana AMP dijalankan di Goole Pencarian.
Catatan:
Catatan:
- Gunakan JavaScrip di bawah ini seperlunya saja (Berdasarkan fungsi Elemen yang dipasang pada HTML). Bahwa tidak semua JavaScrip ini harus digunakan pada template. Menambahkan elemen yang tidak sesuai akan menyebabkan error.
- HTML dibawah
<!DOCTYPE html>harus menyertakanamp="amp". - Style (CSS pengaturan Anda sendiri) menyertakan
amp-custom='amp-custom'. - Tambahkan
amp-boilerplatedanampproject v0atau yang telah ditengkatkan. - Elemen
b:skindanb:sectionmerupakan salah satu elemen-elemen yang harus ada dalam bagian Edit HTML pada Blogger.
• HTML
<!DOCTYPE html>
<HTML amp='amp' lang='en'>
<head>
<link expr:href='data:blog.canonicalUrl' rel='amphtml'/>
<!-- ADD META TAG -->
<!-- BLOGGER PLATFORM -->
<b:skin><![CDATA[]]></b:skin>
<!-- AMP CUSTOM -->
<style amp-custom='amp-custom'>
/* CSS Style */
.clearfix:after,.clearfix:before,.container:after,.container:before,.nav:after,.nav:before,.pager:after,.pager:before,.row:after,.row:before{display:table;content:" "}
.clearfix:after,.container:after,.row:after{clear:both}
</style>
<!-- AMP ELEMENTS -->
<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>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
<!-- OTHER AMP ELEMENTS -->
<script async='async' custom-element='amp-lightbox-gallery' src='https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js'></script>
<script async='async' custom-element='amp-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-0.1.js'></script>
<script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'></script>
<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'></script>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'></script>
<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'></script>
<script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'></script>
<script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'></script>
<script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'></script>
<script async='async' custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<script async='async' custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async='async' custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
<script async='async' custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
</head>
<body>
<!--Blog1-->
<div class='main-wrapper'>
<b:section class='main' id='page-body' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'></b:widget>
</b:section>
</div>
<div class='clearfix'/>
<!--Footer-->
<footer id='mainFoo' class='main-footer'>
</footer>
</body>
</HTML>Catatan:
Jika Anda sudah membuat halaman post satu atau lebih, dan membuatnya terdia untuk publik; element
Jika Anda sudah membuat halaman post satu atau lebih, dan membuatnya terdia untuk publik; element
Blog1 diatas ditampilkan secara default di halaman beranda. Sehingga harus menambahkan elemen; halaman mana yang harus di ubah dan mebuatnya lebih ringkas.• HTML
<!--Tampilkan and Sembunyikan Element--> <b:if cond='data:blog.pageType == "item"'> </b:if> <b:if cond='data:blog.pageType != "item"'> </b:if> <b:if cond='data:blog.pageType == "static_page"'> </b:if> <b:if cond='data:blog.pageType != "static_page"'> </b:if> <b:if cond='data:blog.pageType == "error_page"'> </b:if> <b:if cond='data:blog.pageType != "error_page"'> </b:if>
Bagaimana cara menambahkan Image AMP untuk Beranda?
Sebagian besar posting, banyak sekali tidak ditampilkan secara utuh di halaman beranda, sehingga kebanyakan mereka lebih memilih snippet text (Text Pendek) dibagian halaman beranda dan disertai image diberanda tersebut. Dibawah ini dimana amp-img ditambahkan di bagian beranda, Anda dapat mengatur nilai height width.
• HTML
<!--Image Bagian Beranda-->
<div class='firstimage'>
<b:if cond='data:post.firstImageUrl'>
<!--Respon image bagian posting tersedia-->
<amp-img expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title' height='383' layout='responsive' lightbox='lightbox' width='750'/><b:else/>
<!--Respon image bagian posting tidak tersedia-->
<amp-img alt='Thumbnail' height='383' layout='responsive' lightbox='lightbox' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh65LTWR_TIflwOyEIXGv6Dj9OkJF0yv2DVPE2UT7N4Iv29b1jsRUQyJQXpG6jtru_2KhW8Bl6gVU3bXsi6MvaeeUaIzATFiOi48s3f-Azag5dc9-MW5HBFWfcLuGI_96dkC3sa1NZNUks/s0/no-image.jpg' title='Thumbnail' width='750'/>
</b:if>
</div>Catatan:
Penggunaan elemen
Penggunaan elemen
amp-img beberapa testing tool kemungkinan tidak mengalami masalah, namun perilaku atribut ukuran amp-img tampaknya berbeda dari non-AMP imgBagaimana cara menerapkan img AMP dibagian Posting?
Untuk mengatasi eror pada saat pengujian atau validasi, silahkan gunakan metode penerapan img di bagian posting seperti di bawah ini. Ini untuk menghindari trumbail yang kosong di tinjuan dashboard Blogger Post. Jika merekatkan img/gambar lebih dari satu dalam post, Anda dapat menambahkan
amp-img pada tag pembuka.• HTML
<!--Image Bagian Posting--> <div class='image-post'><noscript><img alt='Your Title' title='Your Title' src='Your Image-link (png/jpg)' height='383' width='750'/></noscript></div> <!--Menambahkan img lebih dari satu--> <amp-img alt='Thumbnail' height='383' layout='responsive' lightbox='lightbox' src='Your Image-link (png/jpg)' title='Thumbnail' width='750'/>
Bagaimana cara menambahkan AMP Social-Share?
Buka Edit Theme di bagian Blogger Dashboard, kemudian Customize. Social-Share ini dapat direkatkan sesuai keinginan Anda.
• HTML
<!--Social-Share--> <div class='socmed'> <amp-social-share height='30' title='whatsapp' type='whatsapp' width='65'/> <amp-social-share height='30' title='facebook' type='facebook' width='65'/> <amp-social-share height='30' title='twitter' type='twitter' width='65'/> <amp-social-share height='30' title='linkedin' type='linkedin' width='65'/> <amp-social-share height='30' title='pinterest' type='pinterest' width='65'/> </div>
Cara menambahkan AMP Google Analytics
Salin HTML
amp-analytics kemudian ganti code ini "UA-XXXXXXXXX-X" dengan id anda.• HTML
<!--Analytics-->
<amp-analytics id='analytics1' type='googleanalytics'><script type='application/json'>{"vars":{"account":"UA-XXXXXXXXX-X"},"triggers":{"trackPageview":{"on":"visible","request":"pageview"}}}</script></amp-analytics>Contoh AMP Blogger Template
UjiCode telah membuat beberapa kerangka kerja template yang didukung dengan komponen AMP. Beberapa template tersebut sebagian telah digunakan oleh pecinta template UjiCode. Anda dapat berkunjung di situs: AiXtro.
Validasi
Naah... agar AMP Template Anda didukung di Search Google, lebih baik lakukan pengujian di AMP Test - Search Console. Silahkan berkunjung di AMP Test Tool atau AMP Validator.
Mengapa memilih Situs Web yang didukung dengan komponen AMP?
AMP memiliki format sederhana dan kuat untuk memastikan situs web Anda cepat, dan mengutamakan pengguna. AMP memberikan keberhasilan jangka panjang untuk strategi web melalui distribusi di seluruh platform populer dan biaya operasi dengan pengembangan yang lebih sedikit.
Anda dapat menciptakan pengalaman web luar biasa bagi pengguna di seluruh web terbuka. AMP memungkinkan pembuatan situs web yang cepat, indah, dan berkinerja tinggi secara konsisten di berbagai distribusi perangkat dan platform. Agar halaman web siap untuk AMP, Anda perlu menyusun halaman dengan HTML AMP, JS AMP, dan Cache AMP. Sekian artikel kali ini tentang: Bagaimana cara membuat AMP Blogger Template?
Anda dapat menciptakan pengalaman web luar biasa bagi pengguna di seluruh web terbuka. AMP memungkinkan pembuatan situs web yang cepat, indah, dan berkinerja tinggi secara konsisten di berbagai distribusi perangkat dan platform. Agar halaman web siap untuk AMP, Anda perlu menyusun halaman dengan HTML AMP, JS AMP, dan Cache AMP. Sekian artikel kali ini tentang: Bagaimana cara membuat AMP Blogger Template?
0 Comments
Post a Comment