Sekarang ini jika membuat website, dimana website tersebut dapat masuk dalam index penelusuran Google dengan membuat pengaturan di webmaster tools, Google telah membuat aturan harus mobile friendly menurut Google. Ini berlaku aktif sejak 2017, diujicobakan sejak akhir 2015. Karena media promosi menggunakan mesin penulusuran hanya satu - satunya dikuasai Google sehingga Google dengan mudah memonopoli berbagai aturan main. Satu tingkat aturan ini tampak menjadi tidak produktif, sisi lain kondisi ini mau tidak mau, provider pembuat website harus mengikuti aturan itu, untuk sementara.
Video diatas adalah panduan dalam mengubah struktur open-source general html ke open-source amp html. Struktur ini, Google telah membuatkan formulasinya untuk diikuti, setelah melakukan perubahan Anda dapat melakukan pengujian hasil apakah sudah memenuhi yang diiinginkan Google atau belum, pengujiannya di link ini https://search.google.com/test/amp. Jika berhasil, berarti website telah masuk kategori mobile friendly menurut Google.
Dalam struktur kode penambahan menggunakan amp, semua file image atau video, maka open source img menjagi amp-img dan video menjadi amp-video. Amp itu sendiri singkatan darai istilah yang dibuat Google, yaitu "Accelerated Mobile Pages", halaman web yang resulusinya bersahabat dengan layar handphone, itupun menurut Google.
Perubahan yang dilakukan pada head dengan menambahkan script, link dan css dari struktur yang dibuat Google, strukturnya seperti ini dari apa yang telah dibuat di video diatas:
Sebelum
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scala=1.0"/> <title>Profile</title> <script type="application/ld+json"> [ { "@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "Elog Bimbel adalah Elog Bimbingan Belajar, membantu siswa - siswi dalam mata pelajaran di tahun pertamanya." , "url": "http://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png" },{"@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "yang memiliki kesulitan beradaptasi dengan mata pelajarannya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png" } ] </script> <style type="text/css"> <!-- body{ background:url(image/backgroundProfile.jpg) no-repeat ; background-color: transparent; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; width:1024px; height:1600px; padding: 15px 5px 15px 0; } #head{ width:1024px; position:relative; background-position:center; height:120px; padding-left:35px; padding-top:0; padding-right:35px; padding-bottom:25px; top: 0; </style> </head> <body> <div clas="wrapper"><img src="image/logoHD.jpg" width="150" height="75" /></div> </body> </html>
Sesudah
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html amp lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scala=1.0"/> <script async src="https://cdn.ampproject.org/v0.js"> </script> <title>Profile</title> <script type="application/ld+json"> [ { "@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "Elog Bimbel adalah Elog Bimbingan Belajar, membantu siswa - siswi dalam mata pelajaran di tahun pertamanya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png" }, {"@context" : "https://schema.org", "@type" : "Dataset", "name" : "Profile - ELOG Bimbel", "description" : "yang memiliki kesulitan beradaptasi dengan mata pelajarannya." , "url": "https://www.elog-bimbel.id/profile.php", "logo": "https://www.elog-bimbel.id/images/logoBimbel1.png" } ] </script> <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none} </style></noscript> <style amp-custom> <!-- amp-img{ backgroung-color; white or gray etc; border:1px solid white; } body{ background:url(image/backgroundProfile.jpg) no-repeat ; background-color: transparent; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; width:1024px; height:1600px; padding: 15px 5px 15px 0; } #head{ width:1024px; position:relative; background-position:center; height:120px; padding-left:35px; padding-top:0; padding-right:35px; padding-bottom:25px; top: 0; </style> </head> <body> <div clas="wrapper"><amp-img src="image/logoHD.jpg" width="150" height="75" /></div> </body> </html>
Pada perubahan struktur html, penambahan amp lang dapat diganti dengan menggunakan "⚡", <html amp lang="en"> menjadi <html ⚡>. Untuk style boilerplate, lengkapnya bisa anda dilihat di sini https://www.ampproject.org/id/ atau dapat sekalian mempelajarinya di sana, secara bertahap sampai benar - benar dikuasai.
Yang lain-lainnya pada dasarnya sama, artinya perubahannya baku, tidak perlu melakukan variasi, hal yang lain dalam pembuatan slide img, mungkin ini yang harus mengikuti open-source amp. Sebetulnya perubahannya sangat simple, panduannya cukup jelas, namun memang perubahan ini agak sedikit terganggu bagi yang sudah terbiasa dengan open-source sebelumnya.
Demikian tuorial singkat cara mengubah html ke amp html. Anda pun tidak perlu melakukan perubahan jika web Anda tidak ingin didaftarkan ke webmaster tools. Pada dasarnya sekarang Anda dapat melakukan share website ke sosial media tanpa harus mempromosikan ke index penulusuran Google.
Semoga bermanfaat.
Artikel Terkait:
- Tutorials Desain Blog di Smartphone
- Tutorials Desain Blog di Smartphone II
- Tutorials Desain Blog di Smartphone III
- Tutorials Desain Blog di Smartphone IV
- Tutorials - Cara Registrasi Blogger ke Adsense Google
- How To Create Menu Tabs
- Blogger - Cara Edit Hyperlink
- Blogger - Kode ID Pelacakan
- Tip Mengembalikan Postingan Blog Terhapus
- Cara Verifikasi Blog Ke Webmaster Tools
- Tips For Blog Validation Into Webmaster Tools
- Tips - Membuat Sitemaps Blog
- Tips To Create Sitemaps Blog
- Tips - Membuat Meta Tags SEO Friendly Blog Dan Website
- Tutorials - Create Mark Up Structured Data At Webmaster Tools
- Tips SEO - Cara Memperbaiki Kesalahan Data Terstruktur
- Tutorials SEO -Tentang Itemscope
- Tutorial - Highlighter Webmaster Tools
- Tutorials - Highlighter Webmaster Tools For Blog And Website
- Webmaster Tools - Fix Crawl Error
- Website - Tip Membuat Button Share Ke Sosial Media
- Cara Menghapus Image_Url, BlogId Dan PostId
- Tip Cara Memasang Lencana Profile Twitter di Blog
- Tips - Memasang Postingan Twitter Di Blog Dan Website
- Tips - Menambahkan Plugin Fanpage Facebook di Blog Dan Website
- Tips - Menambahkan Profile Google + Di Blog Dan WebPage
- Tips - Memasang Lencana Profile Linkedin Di Blog Dan Website
- Blogger - Cara Memasang Postingan Instagram
- Membuat File Robots txt Untuk Website - SEO Tutorials
- AMP - Cara Mengubah Html ke Amp Html
No comments:
Post a Comment