Cara Membuat Sitelink Search Box pada Blog

 HiiroDev - halo temen temen pada artikel kali ini saya akan membagikan "Cara Membuat Sitelink Search Box di Blog" dengan menggunakan schema markup Microdata dan LD-JSON.

Pasti kalian pernah menemukan atau pernah mendapatkan sitelink dari google berupa menu category / navigasi ataupun beberapa artikel temen - temen, saat temen - temen mengunjungi blog kalian sendiri dengan mengetik alamat blog kalian. Contohnya seperti ini

Dari gambar yang di atas, di blog saya sudah memperoleh sitelink dari google walaupun artikel masih sedikit wkwk. Namun pada kesempatan kali ini saya tidak akan membahas cara bagaimana mendapatkan sitelink tersebut karena saya akan lebih berfokus untuk membahas cara mendapatkan sitelink search box dari google untuk blog milik sobat.

Lalu apa bedanya sitelink artikel / menu category seperti gambar di atas dengan sitelink search box yang akan di bahas?. Oke pasti di antara kalian pasti pernah menemukan atau melihat sitelink search box tapi tidak tau namanya kan.

Secara umum kita akan mendapatkan sitelink berupa tulisan category menu atau beberapa artikel yang sudah kita post pada blog kita, akan tetapi lain cerita dengan sitelink search box akan tampil pada pencarian google berupa kotak pencarian ( atau search ) yang letaknya tepat di atas sitelink artikel kita. Biasanya sitelink ini tampil di website besar seperti layanan jasa hosting, Lebih jelasnya kalian bisa lihat gambar di bawah ini

Untuk pengguna wordpress kalian bisa mendapatkan search box dengan menginstall plugin.

Apakah bagi pengguna blogger bisa mendapatkan sitelink search box? Yap tentu saja bisa, kalau tidak bisa ngapain saya cape - cape buat artike ini wkwk. Kita langsung ke langkah - langkahnya saja

Sitelink Search Box Google dengan Skema Markup LD-JSON

script ini menggunakan skema markup LD-JSON kalian bisa copy pastekan kode dibawah ini dan letakkan di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type="application/ld+json">   
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "<data:blog.canonicalHomepageUrl/>",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "<data:blog.canonicalHomepageUrl/>/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
 </script>
 </b:if>

Sitelink Search Box Google dengan Skema Markup Microdata

Untuk kalian yang ingin menggunakan script skema markup Microdata kalian bisa copy pastekan kode ini

<div itemscope itemtype="https://schema.org/WebSite">
  <meta itemprop="url" expr:content="data:blog.canonicalHomepageUrl"/>
  <form itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction">
    <meta itemprop="target" expr:content="data:blog.canonicalHomepageUrl/search?q={search_term_string}"/>
    <input itemprop="query-input" type="text" name="search_term_string" required/>
    <input type="submit"/>
  </form>
</div>

Secara default script microdata-nya seperti diatas. Anda tinggal mengolah script tersebut sesuai dengan kebutuhan Anda seperti penambahan div class atau id. Selamat berkreasi.