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:
- Tutorials Desain Blog di Smartphone
- Tutorials Desain Blog di Smartphone II
- Tutorials Desain Blog di Smartphone III
- Tutorials Desain Blog di Smartphone IV
- Tutorials - Cara Registrasi Blogger ke Adsense Google
- How To Create Menu Tabs
- Blogger - Cara Edit Hyperlink
- Blogger - Kode ID Pelacakan
- Tip Mengembalikan Postingan Blog Terhapus
- Cara Verifikasi Blog Ke Webmaster Tools
- Tips For Blog Validation Into Webmaster Tools
- Tips - Membuat Sitemaps Blog
- Tips To Create Sitemaps Blog
- Tips - Membuat Meta Tags SEO Friendly Blog Dan Website
- Tutorials - Create Mark Up Structured Data At Webmaster Tools
- Tips SEO - Cara Memperbaiki Kesalahan Data Terstruktur
- Tutorials SEO -Tentang Itemscope
- Tutorial - Highlighter Webmaster Tools
- Tutorials - Highlighter Webmaster Tools For Blog And Website
- Webmaster Tools - Fix Crawl Error
- Website - Tip Membuat Button Share Ke Sosial Media
- Cara Menghapus Image_Url, BlogId Dan PostId
- Tip Cara Memasang Lencana Profile Twitter di Blog
- Tips - Memasang Postingan Twitter Di Blog Dan Website
- Tips - Menambahkan Plugin Fanpage Facebook di Blog Dan Website
- Tips - Menambahkan Profile Google + Di Blog Dan WebPage
- Tips - Memasang Lencana Profile Linkedin Di Blog Dan Website
- Blogger - Cara Memasang Postingan Instagram
No comments:
Post a Comment