[SHARE] Tips Penggunaan Struktur Data HTML dan Schema Dalam SEO

Kali ini saya mau bahas lagi seputar struktur web yang sebelumnya pernah saya bahas disini : https://ads.id/forums/index.php?thr...tuk-seo-jangka-panjang-tips-onpage-seo.234893

thread ini sekaligus menjawab pertanyaan di thread ini : https://ads.id/forums/index.php?threads/tanya-struktur-html-mempengaruhi-seo-kah.260995/

yang bertanya "Apakah Struktur HTML Mempengaruhi SEO ?"

Saat bicara soal Struktur Data Web (baik HTML ataupun Schema) bukan berarti hanya dengan menerapkannya dengan benar web kalian bisa langsung di posisi teratas. Penerapan struktur data hanya untuk membantu google mempermudah melakukan crawl ke situs kita. Jadi soal content dan link itu di bagian (part) yang berbeda dari serial SEO.

kebanyakan tidak memperdulikan masalah ini karena hampir 90% kalian membuat website menggunakan pihak ke-3 seperti wordpress, jomla, blogspot, dll yang semua coding HTML dan Schema sudah terintegrasi didalamnya. Padahal tidak semua website menggunakan platform tersebut. Dan walaupun sebagian besar sudah menerapkannya masih ada juga yg kurang sempurna atau sering terjadi error karena kesalahan penulisan code.

Pertama saya coba bantu jawab dulu masalah ini :

Tag <article> itu menjelaskan section atau elemen dalam sebuah halaman karena standarnya setiap halaman di bagi berbagai elemen. jadi yang bener :

HTML:

<article>
<h1>judul content</h1>
<p>isi content</p>
</article>

Akankah beda dengan?
<H1>judul</h1><article>isi web</article>

secara struktur jelas beda gan,..
itu artinya Tag heading berada di section/elemen lain. bukan menggambarkan heading untuk isi web yg berada dalam <article> isi web </article> yang agan contohkan tersebut.

Live webpagenya seperti ini :




Tag html ini bisa kalian gunakan untuk memaksimalkan konten kalian :

1. Tag Heading <h1> - <h6>

Menurut saya, Title Heading <h1> - <h6> yang memiliki peran penting di banding tag <title>. coba tes hapus code <title> didalam web agan, dan biarkan tag <h1> yang menggambarkan title. nanti saat rechace, yang di list menjadi title di SERP adalah code Tag H1.

Code <Meta> tag adalah ALTERNATIF ke-3 yang diambil google sebagai tampilan di snipet. google lebih prefer mengambil potongan dari isi konten yang lebih relevan dengan yang di ketikan oleh user sebagai snipet bukan hanya dari Meta Tag. jadi tidak menggunakan Meta Tag pun sebenarnya ga masalah selama isi konten kalian menjawab apa yang di ketikan user.

Tips :
- Setiap sub title didalam sebuah halaman selalu gunakan tag heading (H2)


2. Maksimalkan image dengan <figure> dan <figcation>

kalian bisa memaksimalkan image dalam sebuah halaman menggunakan tag <figure> dan tag <figcaption>. <figcaption> mendefinisikan dari gambar tersebut, gunakan code <p>. contohnya seperti ini :

HTML:

<figure class="large "><a class="zoom" href="https://cms-images.idgesg.net/images/article/2015/03/playonlinux-wine-100574846-orig.png"><img src="https://cms-images.idgesg.net/images/article/2015/03/playonlinux-wine-100574846-large.png" alt="playonlinux wine" width="580" height="435"/></a>
<figcaption>
<p>PlayOnLinux's version of Wine, running on Ubuntu.</p>
</figcaption>
</figure>

3. Detail data menggunakan Tag <table>

Untuk yang sering menampilkan data tabel di dalam konten seperti website spesifikasi HP, kandungan nutrisi dan konten lain yang menggunakan table, semaksimal mungkin menggunakan code <table> jangan hanya screenshoot gambar di excel atau lainnya. karena kita bisa membuat table menggunakan HTML tag. source :

Code:

http://www.w3schools.com/html/html_tables.asp

Untuk Pembelajaran silakan cek di : www.w3schools.com/tags/

pakai plugin ini juga bisa :

Code:

https://wordpress.org/plugins/mce-table-buttons/

bukan struktur tampilan web nya secara keseluruhan gan,, tapi lebih ke kontennya aja.. semuanya bisa di masukan di konten saat posting artikel baik di WP maupun di Blogspot.

sementara ane cuma bahas 3 (Tag Heading, Figure & Figcaption dan Table) semua element ini bisa di masukan saat posting artikel.


Penerapan Schema didalam struktur website

Schema secara sederhana berfungsi untuk memberika informasi yang lebih detail/spesifik ke search engine agar lebih mudah dalam mengenali bagian webpage dalam rangka relevancy . Saat ini schema menjadi perhatian di berbagai kalangan webmaster. banyak webmaster yang fokus penerapan schema didalam web mereka. Kalau kalian perhatikan rata-rata themes untuk WP yang terbaru sudah memperbaiki atau menambahkan fitur ini di themes mereka. bahkan saat ini template blogspot pun sudah banyak yang menerapkan struktur schema.

Perlu di ingat HTML dan Schema markup itu berbeda, hehehe
untuk microdata letaknya biasanya berada di dalam code HTML. Contoh :

Untuk tag html <body> untuk microdata schema mark up bisa di tambahkan seperti ini

HTML:

<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>

Tag Header <header>

HTML:

<header itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<div id='header-wrapper'>
<div class='titlewrapper'>
<h1 class='title' itemprop='headline'>
<a href='http://domain.com/' itemprop='url' title='Judul Blog '><span itemprop='name'><amp-img alt='Logo' height='30' src='http://domain.com/link-gambar.png' title='Judul Blog ' width='30'></amp-img>
Judul Blog </span></a>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description' itemprop='description'>
deskripsi Blog</p>
</div>
</div>
</header>

Untuk navigasi menu <nav>

Code:

<nav class='page-menu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul>
<li><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' title='Privacy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' title='Sitemap'><span itemprop='name'>Sitemap</span></a></li>
</ul>
<div class='clear'></div>
</nav>

untuk Article <article>

HTML:

<article class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'></article>

Perlu di perhatikan untuk "itemprop='blogPost', Ada value yang perlu diisi supaya tidak terjadi error :
- Headline
- ArticleBody
- Image
- Author
- DatePublished
- DateModified
- Publisher
- mainEntityOfPage

saya bahas lebih detail dan lengkap di post selanjutnya...
contoh :
Isi konten (article body)

HTML:

<div class='post-body entry-content' id='post-body-208070731452114034' itemprop='articleBody'>isi konten blog</div>

penerapan kedalam image :

HTML:

<div itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject'>
<meta content='https://domain.com/url-image.jpg' itemprop='url'/>
<meta content='700' itemprop='width'/>
<meta content='700' itemprop='height'/>
</div>

yang perlu di perhatikan adalah saat kalian sudah memasukan kode schema markup, usahakan tidak terjadi error. untuk melakukan test apakah terjadi error bisa menggunakan structure data testing tools google :

Code:

https://search.google.com/structured-data/testing-tool

biasanya yang sering terjadi error adalah pada bagian image, publisher, datemodified dan mainentityofpage.

untuk schema image (itemprop='image' itemscope='itemscope' itemtype='https://schema.org/ImageObject') pastikan kalian masukan value nya yaitu URL, Width dan Height, kalau tidak pasti struktur nya terjadi error. biasanya untuk themes (WP) yang sulit di edit.. Cara paling gampang adalah menggunakan TAG HTML <meta> sama seperti di atas.

HTML:

<meta content='https://domain.com/url-image.jpg' itemprop='url'/>
<meta content='700' itemprop='width'/>
<meta content='700' itemprop='height'/>

di bagian yang lain juga bisa seperti itu untuk mengisi value yang diwajibkan didalam schema markup..
sementara segitu dulu,, belum kepikiran yg lainnya,,
kalau ada yang mau di tambahkan silakan.. atau kalau ada kendala silakan di share aja disini.. ^_^

 

mantap !!!! suhu turun gunung lagi nih

 

kalo plugin untuk buat table apa ya mas?, apa harus ketik htmlnya kan repot?

 

wuihh thanks gan penjelasannya, menurut ane sih pengaruh atau engganya itu tergantung algoritma mesin pencarinya ya, tapi cuma memastikan apakah berpengaruh struktur HTML tsb.
Jawaban agan @daffyshaci sangat mantap! .. jadi gak boleh asal-asalan nih ngebuild.

 

pakai plugin ini juga bisa :

Code:

https://wordpress.org/plugins/mce-table-buttons/

di bilang ngaruh atau tidak nya ke SERP tentu ada faktor lain yang di perhitungkan.. karena tidak semu web yang di rank di google itu struktur nya bagus,..
tapi kalau kita bisa menanpilkan yang lebih baik tidak ada salahnya,..
kalau hanya memperbaiki Struktur HTML saja tanpa memperhatikan faktor lainnya juga percuma kan,..

iya ga bisa sembarangan gan karena nanti jadi error atau salah posisinya..

 

Ilmu SEO tingkat lanjut ini.
Terima kasih.

Tanya:

1. Plugin Wordpress apa yang mendukung untuk merapikan Schema? Dengan kata lain, yang direkomendasikan berdasarkan tulisan ini.
2. Tema wordpress apa yang rapi dengan schema? Sebutin merek dong... Genesis? Thesis? Eleganthemes? Mythemeshop? de el el.


1-2 bulan ini belajar ini, belum khatam.
Mending langsung cari themes dan pluginnya.
Terima kasih.

Spoiler

PEJAWAN di Trit berbobot 250 Kg

Oh ya tambahan, biar yang lain pada tau juga.
Ada CMS (selain wordpress) buatan anak negeri. HTMLy namanya.
Kayaknya enak buat manual masukin schema satu-satu, tapi pegel juga. #mainanmanual
Dan untuk urusan kecepatan, gak usah ambil pusing.

 

nice bro

 

Wah ini ngoprek struktur HTMLnya ya

 

wahhh harus update ilmu html lg ini, slma ini sy jg tdk pernah memperhatikan yg seperti ini.
trmksih pencerahannya.

sent from heaven with ZenFone

 

super sharing... mastah thx

 

nampang pejwan juga ahh

 

wedewww ada kalimat ane diqoute jadi malu hehehehe


sedikit berbagi pengalaman tambahan,

setau ane meta deskripsi tidak terlalu prioritas , karena seluruh isi artikel sudah masuk dalam deskripsi, mesin pencari akan otomatis membuat meta deskripsi dinamis sesuai isi artikel kita (maksudnya motong dari isi artikel dan nyari yg mengandung keyword yg kita masukkan di kotak pencarian gitu)

 

1. tidak ada pluginnya gan,, sejauh ini harus edit manual di themes atau template nya. untuk pengguna WP memang lebih ribet.. kemarin juga ane memperbaikinya seharian. karena themes yg saya pake belum support secara full di schema nya.

2. Ane kurang banyak liat struktur themes yg lain gan,, kemarin kalau ga salah mythemeshop udah ada yang fix untuk schema ini. jadi tidak ada error lagi. tapi kalaupun ada error bisa di perbaiki kok.

bukan struktur tampilan web nya secara keseluruhan gan,, tapi lebih ke kontennya aja.. semuanya bisa di masukan di konten saat posting artikel baik di WP maupun di Blogspot.

sementara ane cuma bahas 3 (Tag Heading, Figure & Figcaption dan Table) semua element ini bisa di masukan saat posting artikel.

 

MANTAPPPP!!

mythemeshop strukturnya mmng paling rapi.

 

Langsung gercep mastah yg satu ini, sangat membantu buat nubi seperti ane
thanks

 

Mythemeshop yg mana ya mas? Apa semua themenya sudah support scheme sama html nya? Btw sharing super nih. Like added

 

Waaahhh daging banget gan, bukmark nih


Sent from my iPhone using Tapatalk

 

jadi tiap tag yang di atas baiknya harus kita isi dengan itemtype='https://schema.org/.... ya gan ?

 

tergantung tag nya bisa support schema atau tidak gan.. misal untuk <section id="navigation" role="navigation"> bisa di masukan schema SiteNavigationElement (http://schema.org/SiteNavigationElement). di head ada WPHead,, di schema.org ada doc guide nya..

 

wah, pusing saya hahaha..
ada web untuk tau template kita ini sudah sesuai schema apa belum ya ?