Monday, 8 January 2018

Tutorial SEO Tentang Itemscope

Tutorial SEO Tentang Itemscope


Dalam penambahan struktur data pada console google, terdapat sedikit perbedaan antara blog dengan website, terutama pada itemscope. Pada bulan yang lalu telah dibahas mengenai permasalah dan solusinya untuk pembahasan penambahan struktur data pada blog, jika ingin membacanya lagi, silahkan buka disini. Pada artikel ini kita akan bahas penambahan struktur data khusus pada website.




Pada blog, dalam penambahan struktur data, tidak dengan menambahkan "itemscope", jadi ketika ditambahkan struktur data, ketika melakukan copy paste dari console google ke template blog, maka jangan menambahkan "itemscope" pada blog. Karena blog itu berisi artikel, tidak seperti pada website yang bisa berisi multi halaman dengan berbagai sub halaman dan database.


Itemscope adalah salah satu atribut dari microdata, Jika kita artikan ke dalam bahasa Indonesia, maka arti scope itu secara leterlek adalah ruang lingkup, cakupan, bisa juga diartikan batasan atau bagan / bagian. Jadi itemscope itu cakupan barang atau bagian atau bagan, cakupan item dan paling pas bisa juga disebut cakupan konten yang ingin ditampilkan. Dalam hal ini adalah konten atribut tag dari sebuah meta data.


Dalam penampahan tag meta ini tujuannya selain agar website Anda dapat dengan mudah dikenali oleh googlebot dalam search engine google, juga orang lain yang membaca website atau situs Anda di google pencarian, dapat dengan mudah memahami website atau situs Anda, karena selain memuat gambar juga memuat konten inti dari website Anda


Untuk lebih jelasnya, bagimana penambahan struktur data pada website, kita ambil contoh sebuah buku novel. Secara umum keingin tahuan atau minat orang pertama kali pada sebuah novel adalah tokoh utama, sinopsis dan pengarangnya. Maka untuk dapat menampilkan itu pada halaman pencarian google, dengan menambahkan tag pada elemen konten, misalkan seperti contoh dibawah ini; 



<div> 
<h1>Deep Freeze</h1> 
<span>Author: John Sandford(Agustus 23, 1944)
</span> 
<span>fiksi
</span> 
<a href ="../novel/deep-freeze-synopsis.html" target="_blank">synopsis</a> 
</div>


Pada contoh diatas konten tentang novel itu pada elemen division, <div> ... </div>, maka untuk dapat membantu mesin pencarian mengenai novel tersebut pada elemen division, kita tambahkan atribut itemscope didalam division, contohnya seperti dibawah ini; 



<div itemscope>
<h1>Deep Freeze</h1>
<span>Author: John Sandford (age:Februari 23, 1944)
</span> 
<span>fiksi
</span> 
<a href ="../novel/deep-freeze-synopsis.html">Synopsis</a>
</ div>




Kemudian tambahkan juga atribut "itemtype" di dalam division atau div, yaitu menambahkan link Itemtype="http://schema.og/Novel". Juga dapat menampilkan pengarangnya dengan menambahkan itemprop="author". Contohnya seperti dibawah ini; 


<div itemscope itemtype = "http://schema.org/Novel">
<h1>Deep Freeze</h1>
<span>Author: John Sandford (age: Februari 23, 1944)
</span>
<span>fiksi
</span> 
<span>
<a href="../novel/deep-freeze-synopsis.html">Synopsis</a> 
</div>


Dan jika dibuatkan sedikit lebih lengkapnya, yaitu sebagai berikut; 



<div itemscope itemtype = "http://schema.org/Novel"> 
<h1 itemprop ="name">Deep Freeze</h1>
<span>Author:
<span itemprop="author">
John Sandford
</span>
(age Februari 23, 1944) 
</span>
<span itemprop="genre">Fiksi 
</span>
<a href="../novel/deep-freeze.html" itemprop="novel">
Synopsis
</a>
</div>


Sampai disini, cakupan item yang ingin ditampilkan pada halaman pencarian google pada elemen division telah selesai, jika ingin menambahkan gambar atau icon pada halaman pencarian google, maka tambahkan itemprop="image" pada elemen "source img".


Itemscope juga dapat di tag ke sosial media, dan agar ketika di share ke sosial media, dapat menampilkan image berikut dengan konten tag meta. Dibawah ini contoh tag secara lengkapnya dalam satu halaman situs atau website Anda 

<html itemscope itemtype="http://schema.org/WebPage" xmlns:fb="https://www.facebook.com/">

<head>

<title>Judul/Title</title>

<meta content="judul" itemprop="name" property="og:judul" /> 

<meta content="paraghrap content" itemprop="description" name="description" property="og:description" />

<meta content="http://www.domain.com/image.jpg" itemprop="image" property="og:image" />

<meta content="http://www.domain.com/permalink" itemprop="url" property="og:url" />

<link rel="canonical" href="http://www.domain.com/permalink" /> 

</head>

<body> ...content... </body>

</html>


Demikian tutorial SEO tentang itemscope. Semua yang ditampilkan dalam contoh tidak berlaku baku seperti diatas, jadi Anda dapat menambahkan struktur data pada website yang sesuai dengan yang Anda inginkan pada tampilan url situs Anda di search engine google.


Semoga bermanfaat.



Artikel Terkait:

di

No comments:

Post a Comment