Markup Data Terstruktur SiteNavigationElement Schema.org

SiteNavigationElement adalah model data terstruktur yang mendeskripsikan (menandai) objek navigasi suatu halaman web (webpage) dengan tujuan agar navigasi situs mudah dikenali oleh mesin telusur seperti Google dan Bing.

Saya memperhatikan sekarang ini banyak template blogger yang tidak menyertakan markup site navigation elements dan hanya mengadopsi role navigation saja, padahal markup site navigation elements juga sangat penting untuk memperjelas struktur halaman web.

Jadi bagi kamu yang ingin menambahkan atau menerapkan markup data terstruktur SiteNavigationElement di website/blog, silahkan ikuti contoh penerapannya berikut ini.

Contoh Markup SiteNavigationElement

[ads id="ads1"] #Contoh_1

<nav class="navigation">
  <ul itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem1</span></a></li>
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem2</span></a></li>
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem3</span></a></li>
  </ul>
</nav>

#Contoh_2

<nav class="navigation" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
  <ul>
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem1</span></a></li>
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem2</span></a></li>
   <li><a href="url" itemprop="url"><span itemprop="name">menuitem3</span></a></li>
  </ul>
</nav>

Untuk menginstal (menambahkan) markup SiteNavigationElement pada navigasi website/blog hanya diperlukan empat tindakan yakni;

1. Tambahkan itemtype pada tag <ul> atau tag <nav> seperti contoh di atas.
2. Tambahkan itemprop="url" pada tag <a> (link)
3. Tambahkan <span> pada anchor text
4. Tambahkan itemprop="name" pada span anchor text

Bagi pengguna platform blogger yang menu navigasi blognya menggunakan widget link list juga serupa bahkan lebih mudah dialakukan karena tidak perlu mengulang tindakan berkali pada itemlist element.

Contoh penerapan markup data terstruktur SiteNavigationElement pada menu navigasi blog yang menggunakan link list gatget di platform blogger.

<ul itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
 <b:loop values='data:links' var='link'>
  <li><a expr:href='data:link.target' itemprop='url'><span itemprop='name'><data:link.name/></span></a></li>
</b:loop>
</ul>

Dalam sekali penerapan secara otomatis setiap list menu pada navigasi blog akan dimasukkan pada itemlist markup data terstruktur site navigation elements.

Bahkan ketika kamu ingin menambahkan list menu baru, kamu tidak perlu melakukan tindakan apapun karena secara otomatis, itemlist menu yang baru juga ditambahkan ke dalam markup data terstruktur site navigation elements.