Ditulis oleh: Ditulis pada: 10/01/2016
Hal ini baru saya sadari ketika pengguna Kompi Design dengan Google AMP dengan domain non HTTPS. Ternyata ada error pada search box Blogger-nya untuk invalid URL protocol HTTP: pada atribut action pada amp-form.Untuk action Blogger search box ini menggunakan URL http://www.yourdomain.com/search atau https://www.yourdomain.com/search pada action form-nya. Ternyata URL blog non HTTPS dengan http://www.yourdomain.com/search ini error pada validasi AMP seperti pada gambar di bawah ini. Hal ini ternyata sudah dijelaskan bahwa action pada amp-form HARUS dengan https dan bukan link CDN.
Setelah saya coba-coba, ternyata solusi sementara ini sangat simple. Kita gunakan Google URL Shortener yang memang menggunakan https untuk URL action amp-form Blogger AMP.
Silahkan masuk ke goo.gl dan paste-kan http://www.yourdomain.com/search kemudian copy link shortener yang didapat lalu paste di edit HTML. Untuk template Kompi Design silahkan cari kode seperti ini (ada 2 buah, rubah dua-duanya).
<div class='search-wrapper'>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta content='https://kompidesign.blogspot.co.id/' itemprop='url'/>
<form action='https://kompidesign.blogspot.co.id/search' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://kompidesign.blogspot.co.id/search?q={q}' itemprop='target'/>
<input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='material-icons'></i></button>
</form></div>
</div>
<div class='clear'/>
</div>
Silahkan ganti kode
https://kompidesign.blogspot.co.id/search dengan URL shortener blog Anda yang tadi dibuat kemudian https://kompidesign.blogspot.co.id/ silahkan ganti dengan URL blog Anda.Dengan Google URL Shortener maka URL pada action amp-form search box Blogger menjadi tidak error. Untuk blog yang tidak menggunakan custom domain, saya sarankan sebaiknya aktifkan fitur HTTPS blogspot blog Anda. Untuk blog dengan custom domain dan menggunakan SSL berarti tidak perlu mengikuti trik ini.
UPDATE:
Ternyata cara di atas masih error, bukan pada AMP tapi penelusurannya menjadi tidak berfungsi. Setelah saya coba beberapa cara, akhirnya menemukan juga solusinya. Namun untuk ini tidak menggunakan penelusuran Blogger, melainkan menggunakan Google Custom Search dengan Results Only.Silahkan buat Google Custom Search untuk blog Anda DI SINI.
Kemudian pada Look And Feel pilih Results Only untuk Layout-nya lalu Save and Get Code dan silahkan copy kodenya.
Kemudian silahkan gunakan kode di bawah ini dan hosting di Github. Simpan dengan ekstensi *.html misalnya search-results.html
<!DOCTYPE html>
<html>
<head>
<title>Results Only Layout</title>
<!-- Put the following javascript before the closing </head> tag. -->
<script>
(function() {
var cx = '006106396690849460662:uu9rowlerie';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
</head>
<body>
<!-- Place this tag where you want the search results to render -->
<gcse:searchresults-only></gcse:searchresults-only>
</body>
</html>
Silahkan ganti kode
var cx = '006106396690849460662:uu9rowlerie'; dengan kode yang tadi Anda dapatkan dari Google Custom Search.Kemudian pada kode HTML Search Box di edit HTML seperti di bawah ini (ada 2 buah) rubah menjadi seperti di bawah ini.
<div class='search-wrapper'>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta content='URL BLOG ANDA' itemprop='url'/>
<form action='URL HOSTING GITHUB' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='URL HOSTING GITHUB?q={q}' itemprop='target'/>
<input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='material-icons'></i></button>
</form></div>
</div>
<div class='clear'/>
</div>
Sebagai contoh maka penampakan kode di atas akan menjadi seperti di bawah ini.
<div class='search-wrapper'>
<div id='search-box'>
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<meta content='http://kompidesign.blogspot.com/' itemprop='url'/>
<form action='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/search-reasults.html' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://cdn.rawgit.com/KompiAjaib/kompi-html/master/search-reasults.html?q={q}' itemprop='target'/>
<input class='search-form' id='feed-q-input' itemprop='query-input' name='q' placeholder='Search' required='required' type='text'/>
<button class='search-button' title='Search' type='submit'><i class='material-icons'></i></button>
</form></div>
</div>
<div class='clear'/>
</div>