CSE: Membuat Pencarian di Form Search Blog, Menjadi Hasil Penelusuran Google

Sebuah custom search engine yang mampu membantu pengindeksian artikel di blog atau website Anda, yaitu dengan menjadikan hasil pencarian di widget searh box (form search) yang terpasang di blog/website, muncul sebagai hasil pencarian di search engine Google.

Singkatnya, input keyword di search form blog kita, output dan action-nya di halaman pencarian Google. Menarik bukan? Kalau dirasa menarik, berarti Anda sudah mengerti what i mean.

Saya jelaskan sekali lagi.

Jadi begini, saat Anda menggunakan kolom pencarian di blog/website Anda dengan mengetikan beberapa kata untuk mencari artikel tertentu, maka hasil pencarian itu akan muncul di halaman pencarian Google, bukan di blog Anda. Tetapi link yang muncul di hasil pencarian Google itu, semuanya mengarah ke blog/website Anda sendiri.

DEMO? Silahkan gunakan kolom search di blog ini, dengan mengetikkan kata kunci Tips Blogger, kemudian enter atau klik search, lalu perhatikan apa yang terjadi selanjutnya. Maka hasil pencarian pada keywords Tips Blogger untuk blog ini akan terpampang di halaman pencarian Google.

Menarik bukan? Cara bikinnya sebagai berikut.

Cara membuat yang seperti itu!

Kalau Anda sudah sedikit paham tentang HTML pasti akan dengan mudah menerapkan beberapa baris kode ini ke dalam HTML template Blogger Anda. Kodenya adalah sebagai berikut:

<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-wrapper' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input class='search-form' itemprop='query-input' name='q' placeholder='Search here...' required='required' type='search'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/>
<button class='search-button' title='Search' type='submit'SEARCH</button>
</form></div>

Adapun kode di atas tidak perlu Anda copy seutuhnya, coba perhatikan dengan mata kepala Anda sercara seksama lalu bandingkan dengan susunan kode search form di template blog Anda. Tambahkan kode di search form Anda bila ada yang kurang. Ganti atau sesuaikan class dan id dari kode di atas dengan punya search form Anda.

ID dan CLASS yang perlu Anda ganti atau disesuaikan adalah:
id='search-wrapper'
class='search-form'
class='search-button'

Cara tersebut lebih mudah dilakukan biar Anda tidak perlu lagi mengganti CSS dari search form tersebut.

Baca juga: Cara Membuat Search Form Show-Hide Onclick Event Bersama Keyframes

Demikian tutorial kali ini, semoga membantu.

Jika kurang paham dalam penerapannya, silahkan kirimi saya surat dengan tulisan rapi melalui kantor pos Indonesia. Terima kasih.