Struktur data page pada website sesuai ketentuan google

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>

    <title></title>

    <meta content="">

    <style></style>

  </head>

  <body></body>

</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 

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Meta Image icon -->

<link href='https://raw.githubusercontent.com/mascemplon/blog/main/gambar/favicon.ico' rel='icon' type='image/x-icon'>

<!-- Meta Descripsi -->

<meta name="Description" content="isi deskripsi yang di tentukan sebanyak 150 kata">

<!-- Meta robot untuk index -->

<meta name="googlebot" content="index, follow" />

<!-- Meta vertivikasi console -->

<meta name="google-site-verification" content="isikode vertivikasi sesuai kode di berikan dari web master tools" />

<!--Meta sitelink -->

 <script type="application/ld+json">

    {

      "@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>

<!-- Meta Image -->

<meta content='urlimage' property='og:image'>

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

<ul class="breadcrumb">

  <li><a href="https://postkomik.github.io/tutorial-website/">Home</a></li>

  <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


setelah menambah navigasi tes lagi menggunakan uji data struktur klik disini 

biar lebih seo tambah lagi meta keyword dan lain lain seperti di bawah ini

<!-- Meta Image icon -->

 

<link href='https://raw.githubusercontent.com/mascemplon/blog/main/gambar/favicon.ico' rel='icon' type='image/x-icon'>

 

<!-- Meta Descripsi -->

 

<meta name="Description" content="ini adalaha Tutorial Website yang di buat untuk belajar dengan ketentuan google serta seo friendly oke jangan lupa berkunjung pada website ini yah">

 <!-- Meta keywords -->

 <meta content="Tutorial Website, " name="keywords">

 <meta content="Tutorial Website" property="article:tag">

 <!-- Link Canonical -->

<link href='https://postkomik.github.io/tutorial-website/artikel/tutorial-website.html' rel='canonical'>

<link href='https://postkomik.github.io/tutorial-website/artikel/tutorial-website.html' hreflang='x-default' rel='alternate'>


<meta name='twitter:site' content=''>

 <meta name='twitter:creator' content=''>


jika di cek lewat Moz maka hasil nya seperti ini 



untuk lanjut part kedua 

Tutorial part 2 membuat website sederhana 

keyword id = the3sc4v3ng3r





Comments
Silahkan, saya ga nggigit !

Suscribe