Struktur data page pada website sesuai ketentuan google

mengenai Struktur data page pada website sesuai ketentuan google memang rada rada rumit dan masih belom banyak sih yang membahas nya jadi gw coba untuk mengulas cara cara apa saja kode kode yang sesuai peratuan google agar mudah di index dan mudah juga mendapatkan rating. memang sudah banyak tutorial bagaimana membuat website menggunakan html css dan javascript tapi apakah sudah sesuai ketentuan google dan mudah di index ? belom tentu kan

Meta Tag

meta tag ini sangat penting dalam sebuat website yang meliputi

meta device
meta icon
meta descripsi
meta gambar
meta keyword
meta scema org
meta link canonical
meta site name
meta tag
meta geo placename
meta geo,coutry
meta robot txt
meta site vertivikasi
meta site link

Nah seitu aja udah banyak kan . oke bahas pelan pelan .yang awal di ketahui dahulu struktus html dasar nya

<html>

<head>

</head>

</html>

kode diatas itu adalah contoh stuktur dasar awal yang masih polos .langkah awal dalam contoh membuat halaman page untuk satu postingan . seperti gw mau coba membuat page tentang

"Perbedaan pendapat dr Tirta dengan anggota DPR komisi IX soal vaksin di masa pademi covid19"

Judul sudah gw dapet seperti diatas

dan descripsi ,tag,dan keyword gw nembak dengan kata "vaksin" atau bisa saja di sama rataan semua sih tapi terserah gimana bagus nya aja yang penting kan dah sesuai dengan ketentual stuktur data dari google

{

"@context": "https://schema.org",

"@type": "WebSite",

"url": "https://www.example.com/",

"potentialAction": {

"@type": "SearchAction",

"target": "https://query.example.com/search?q={search_term_string}",

"query-input": "required name=search_term_string"

}

</script>

saat nya mencoba

Hasil awal

Selanjutanya menambah navigasi

navigasi ini membantu mendapatkan rating dari google dan contoh sederhana seperti ini

url domain /folder/targer url.html

https://postkomik.github.io/tutorial-website/artikel/tutorial-website.html

tapi harus di tambah css agar makin cakep tampilannya

<style>

ul.breadcrumb {

padding: 10px 16px;

list-style: none;

background-color: #eee;

}

ul.breadcrumb li {

display: inline;

font-size: 18px;

}

ul.breadcrumb li+li:before {

padding: 8px;

color: black;

content: "/\00a0";

}

ul.breadcrumb li a {

color: #0275d8;

text-decoration: none;

}

ul.breadcrumb li a:hover {

color: #01447e;

text-decoration: underline;

}

</style>

nah kelas nya bernama "breadcrumb"

kode nya menjadi

<li><a href="./artikel/index.html">Artikel</a></li>

<li><a href="../artikel/tutorial-website.html">Tutorial Website</a></li>

</ul>

Dan hasil nya akan menjadi seperti gambar di bawah ini

Struktur tata letak juga harus diperhatikan .dan bisa di liat dari contoh di bawah ini:

selanjutnya menambah kode vertivikasi web master kan di atas belom di berikan kodenya pada meta tag console . kalau ga di kassih ya susah di index dong maka dari itu harus di tambahkan dan cara ini memang maual sekali sebab dasar dasar nya harus manual dalam pembuatnnya.

1 pastikan mempunyai account google

2 menuju ke web master tools

3 tambah property

4 ambil kode nya dan tempel di meta tag

Jika sudah tervertivikasi mulailah index ke google search console agar menjadi public dan bisa di jangkau oleh banyak orang . dan tampilan memenag sederhana untuk selanjunya tinggal tambahkan css untuk body,sidebar,navbar,footer dan lain nya