Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

11 Maret 2013

Use of structured data for SEO website


Check microdata di website dengan Google Webmaster Tools

Pilih salah satu situs Anda  >>  Optimization  >>  Structured data

Gunakan data terstruktur untuk website SEO Fiendly


Semua data terstruktur akan ditampilkan di Google Webmaster Tools. Anda dapat melacak kemajuan nyata dalam mengelola website. Anda akan tahu, apakah Google melihat semua Microformats yang telah dibuat. Ini tool troubleshooting hebat dari Google Webmaster. Anda akan paham kehebatan tool ini terhadap SEO jika memahami konsep microformat (microdata) atau structured data.

Structured Data website download

Structured data (microdata) bisa dilekatkan (embedded) ke website dengan opsi 3 markup languages berikut :
Dari ketiga markup formats tersebut, Google menyarankan penggunaan opsi Microdata.

Mengapa menggunakan microdata untuk SEO website?

  • Microdata adalah seperangkat tag dan diperkenalkan dengan HTML5
  • A microformat is a technical semantic markup that can be used to better structure the data submitted to search engines.
ILUSTRASI
Halaman web mempunyai arti dasar bahwa orang akan mengerti ketika mereka membaca halaman web.  Misalnya situs Anda punya halaman tentang Avatar – suatu halaman dengan dilengkapi link ke sebuah film trailer disertai informasi tentang director (sutradara film), genre dan informasi lain. Kode HTML halaman web tersebut akan terlihat seperti ini :

<div>
<h1>Avatar</h1>
<span>Director: James Cameron (born August 16, 1954)</span>
<span>Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Namun mesin pencari dengan sifat impersonal memiliki pemahaman terbatas tentang apa yang sedang dibahas di halaman tersebut, maka diperlukan tag tambahan seperti di bawah ini.

Penggunaan elemen itemscope dalam Snippet*

div itemscope>
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954) </span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>

Dengan tag tambahan tersebut, yaitu “itemscope,” seolah website Anda mengatakan,

"Hei mesin pencari! Informasi ini menggambarkan film tertentu, atau sutradara, atau orang, atau genre"

Sampai disini, Anda telah membantu mesin pencari dan aplikasi lain agar lebih memahami content website dan menampilkannya dalam cara yang berguna dan relevan. Microdata sebagai seperangkat tag yang diperkenalkan dengan HTML5, memungkinkan Anda untuk melakukan tugas ini.

Ada beberapa hal yang dapat diperbuat dengan microdata terkait Structured Data situs Anda.

Penggunaan elemen Itemscope dan itemtype - arsip website

Kembali pada contoh snippet diatas. Agar mesin pencari mengdentifikasi bagian dari webpage yang merupakan "tentang", misalnya, film Avatar atau topik lain. Untuk melakukan hal ini, tambahkan elemen itemscope dengan tag HTML yang membungkus informasi tentang item tersebut, (seperti terlihat diatas : Penggunaan elemen itemscope dalam Snippet*).

Dengan menambahkan elemen itemscope, berarti Anda menentukan bahwa HTML yang terkandung dalam blok <div> ... </ div> adalah “tentang” item tertentu. Informasi “tentang” disodorkan ke mesin pencari. Dan akan lebih bermanfaat jika item yang sedang dibahas juga ditentukan apa jenis item itu. Anda bisa menentukan jenis item menggunakan atribut ItemType segera setelah itemscope. Contoh seperti ini :

<div itemscope itemtype="http://schema.org/Movie">
  <h1>Avatar</h1>
  <span>Director: James Cameron (born August 16, 1954)</span>
  <span>Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html">Trailer</a>
</div>
Hal ini menentukan bahwa item yang terkandung dalam div sebenarnya adalah sebuah film, sebagaimana didefinisikan dalam tipe hirarki schema.org. Jenis item ini disediakan sebagai URL, dalam hal ini adalah http://schema.org/Movie.


Penggunaan elemen itemprop
Masih terkait contoh sebelumnya. Informasi tambahan apa saja yang dapat kita berikan ke search engine “tentang” film Avatar? 

Film memiliki “property” seperti actor, director, rating, etc. Untuk memberi label pada properti sebuah item, gunakan atribut itemprop (“prop” singkatan dari property). Sebagai contoh, untuk identifikasi director pada sebuah film, tambahkan itemprop="director" ke elemen tersebut yang terkandung di dalamnya nama director (sutradara) film.

Berikut ini penggunaan ketiga elemen (atribut) diatas – yaitu itemscope, itemtype dan itemprop – secara bersama dikaitkan dengan film di URL http://schema.org/Movie.

<div itemscope itemtype ="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div>

Search engine sekarang dapat memahami tidak semata-mata link ini - http://www.avatarmovie.com - hanya sebagai sebuah URL, tetapi mesin pencari juga mendapat supply informasi tambahan bahwa URL itu adalah trailer untuk film Avatar dengan genre Science fiction, yang disutradarai (Director) oleh James Cameron, yang lahir tanggal 16 Agustus 1954.

Rich Snippet ini yang akan membantu mesin pencari meningkatkan presentasi halaman website di halaman hasil pencarian search engine  karena akan memenangkan website ketika pengunjung memasukkan query : Avatar, James Cameron, Science fiction dan Trailer.
Keempat snippet diatas, yaitu – (1). HTML murni, (2). HTML plus elemen itemscope, (3). HTML plus elemen itemscope dan itemtype, dan (4). HTML plus elemen itemscope, itemtype dan itemprop  -  semuannya akan menampilkan hasil yang sama  dan terlihat di halaman website seperti ini :

hasil tampilan snippet HTML Microdata itemscope

Original Source: http://www.schema.org/docs/gs.html



LATIHAN
Berikut ini contoh Microdata yang saya buat (nama elemen (atribut) sesuaikan dengan kata-kata kunci yang relevan dengan blog Anda)



<div style="padding-bottom: 15px; background-color: #f6d690; padding-left: 30px; padding-top: 1px" itemtype="http://schema.org" itemscope="itemscope">
<h1 itemprop="description">Deskripsi</h1>
  <span temprop="definition">Definisi</span> <br />

<span><a href="http://en.wikipedia.org/wiki/Microformat" itemprop="rich snippet">A microformat</a> is a technical semantic markup that can be used to better structure the data submitted to search engines.</span> <br />
<span itemprop="recommendation">Saran</span>   <br />
<span itemprop="description">Halaman website atau blog idealnya harus memanfaatkan markup semantik microformats untuk struktur lebih baik atas data yang disodorkan ke mesin pencari. (advis website review untuk <a href="http://website-download.blogspot.com" itemprop="website design">website design</a> oleh <a href="http://www.woorank.com" itemprop="website review">www.woorank.com</a>) </span>   <br />
<span itemprop="advantage">Keuntungan</span>   <br />
<span itemprop="description">Berkat microformats Google secara teratur meningkatkan presentasi data yang disajikan di halaman hasil pencarian search engine (SERP).</span> <br />  <br />
<span itemprop="seo">SEO in Microformats</span> : <a href="http://website-download.blogspot.com/2013/03/rich-snippets-for-seo-konsep-dasar.html" itemprop="seo">Rich snippets for SEO</a> </span>
</div>

----------------------------------------------------------------------------------------------


Rich Snippets diatas akan terlihat seperti ini (lihat Trik SEO : Memasang Microformats di Blogroll)

rich snippets Microdata di Blogroll website design

Untuk menguji Rich Snippets microdata diatas, copy seluruh isi code HTML, kemudian Buka :

Google Webmaster Tools >> Optimization>> Other Resources >> Rich Snippets Testing Tool >> HTML

Hapus teks “Paste html here.” dan tekan tombol CTRL dan V secara serentak (Paste). Klik tombol Preview (Pratinjau).     HASILNYA seperti di bawah ini.

Google Structured Data Testing Tool


That's all we know - Happy blog blogger


Comments

0 komentar:

Poskan Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading