Cara Menggunakan Schema Markup Di Blog Secara Lengkap


Cara Menggunakan Schema Markup Di Blog Secara Lengkap - gacerindo, apa fungsing schema markup untuk blogger? Jelas ini salah satu bagian yang penting, karena mesin mencari akan lebih memahami apa isi dari blog sobat. Seperti pacaran saja, kita harus saling memahami dengan pasangan.

Contohnya, kita menulis tentang Restoran, maka schema yang harus digunakan ya schema restoran jangan schema untuk film dan lain-lain. Mesin pencari seperti Google, Yahoo, Bing dll akan memahami dan memprioritaskan pencarian sesuai dengan artikel yang kita buat.

Atau kata lain kita lebih memberitahukan dan memperkaya isi blog kita secara detail ke mesin pencarian. Mungkin kalau istilah lainnya yaitu Rich Snippet.


Nah, gambar diatas adalah hasil screenshoot dari blog saya yang satu lagi. Dengan menambahkan schema markup maka nantinya akan diprioritaskan oleh mesin mencari ketika mengetik keyword lowongan kerja. Walapun hasilnya belum di page one karena blognya masih baru (domain baru).

Maka sebelum menambahkan Schema markup ke dalam blog, lebih baik kita mengetahui dulu apakah sudah tertanam schema di dalam blog kita atau belum.

Caranya silahkan kunjungi Alat Pengujian Data Terstruktur Google lalu ketikan alamat blog kalian. Lihat hasilnya seperti apa? Kebanyakan seh hanya ada schema berupa blog atau Web Page Saja.

Sebelum melangkah ke pembahasan mengenai cara menggunakan schema markup di blogger, sebaiknya kalian pelajari dulu dibawah ini.

  1. Schema.org
  2. Alat Pengujian Data Terstruktur Google
  3. Pemandu Markup Data Terstruktur
  4. Pengujian Rich Snippet

Menambahkan Schema Markup Ke Blogger

Mari kita mulai pembahasan dengan menambahkan schema markup mulai dari header hingga footer bloger. Caranya pun tidak terlalu sulit, tinggal copy saja dan pastekan ke blog kalian.

Note: Pastikan kalian sedang membuka tema dalam mode edit html.

1. Schema Untuk Header Blogger
Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <div id='header'> atau <div id='header-wrapper>. Tambahkan kode dibawah ini.

itemscope=’itemscope’ itemtype=’http://schema.org/WPHeader‘
Sehingga menjadi seperti ini.

<div id=’header-wrapper’ itemscope=’itemscope’ itemtype=’http://schema.org/WPHeader‘>

2. Schema Untuk Navigasi Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <nav id='xxxxxx> atau <nav id='topnav'>. Tambahkan kode dibawah ini.

html parse disini
itemscope=’itemscope’ itemtype=’http://schema.org/SiteNavigationElement‘ role=’navigation
Sehingga menjadi seperti ini.

<nav id=’topnav’ itemscope=’itemscope’ itemtype=’http://schema.org/SiteNavigationElement‘ role=’navigation’>

3. Schema WebPage Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <body='xxxxxx> atau <body class='index'>. Tambahkan kode dibawah ini.

itemscope=’itemscope’ itemtype=’http://schema.org/WebPage
Sehingga menjadi seperti ini.

<body class=’index’ itemscope=” itemtype=’http://schema.org/WebPage‘>
 
4. Schema Blog Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <div id='content-wrapper'> atau <div id='content-wrapper'>. Tambahkan kode dibawah ini.

itemscope=’itemscope’ itemtype=’http://schema.org/Blog‘ role=’main’
Sehingga menjadi seperti ini.

<div id=’header-wrapper’ itemscope=’itemscope’ itemtype=’http://schema.org/WPHeader‘>
5. Schema Blog Posting Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <div class=’post hentry uncustomized-post-template’ > . Tambahkan kode dibawah ini.

itemscope=’itemscope’ itemtype=’http://schema.org/BlogPosting
Sehingga menjadi seperti ini.

<div class=’post hentry uncustomized-post-template’ itemscope=’itemscope’ itemtype=’http://schema.org/BlogPosting‘>
Atau kode berikut ini <article class=’post entry’ expr:id=’data:post.id’>, tambahkan kodenya sehingga menjadi seperti ini.

<article class=’post hentry’ expr:id=’data:post.id’ itemscope=” itemtype=’http://schema.org/BlogPosting‘>
6. Schema Person Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <div class=’author-profile’ itemprop=’author’ >. Tambahkan kode dibawah ini.

itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person‘
Sehingga menjadi seperti ini.

<span class=’fn author’ itemprop=’author’ itemscope=’itemscope’ itemtype=’http://schema.org/Person‘>

7. Schema WP Sidebar Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <div id=’sidebar-wrapper’. Tambahkan kode dibawah ini.

itemscope=’itemscope’ itemtype=’http://schema.org/WPSideBar‘
Sehingga menjadi seperti ini.

<div id=’sidebar-wrapper’ itemscope=’itemscope’ itemtype=’http://schema.org/WPSideBar‘>

8. Schema Footer Untuk Blogger

Untuk menambahkan schema ke header blogger, pertama carilah kode berikut <footer id=’xxxxxx’ atau kode yang mirip. Tambahkan kode dibawah ini.

itemscope='itemscope' itemtype='https://schema.org/WPFooter' role='contentinfo'
Sehingga menjadi seperti ini.

<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter' role='contentinfo'>

Menambah Schema Lainnya Ke Blogger Yang Sudah Memiliki Schema

Karena ingin mempertegas isi atau arti dalam blog kita, kita bisa menambahkan schema markup yang baru, selama tidak berbenturan dengan schema yang sudah ada. Misalnya, scehma yang sudah ada yaitu Schema BlogPosting, maka bisa ditambahkan dengan Schema untuk Orgnization. 
Berikut caranya:
1. Menambahkan Schema Website Ke Blogger
Silahkan cari kode seperti ini //]]></script> dengan mengunakan ctrl + f. Tempelkan kode dibawah ini, setelah kode diatas tadi.

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

{ 

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

  "@type": "WebSite", 

 "@id":"#website",

  "url": "https://www.toploker.my.id",
 
  "name": "Top Loker",

   "author": {

      "@type": "Person",

      "name": "Toploker"

    },

  "description": "Rekrutmen Lowongan Kerja Terbaru",

  "publisher": "Toploker",

  "potentialAction": { 

    "@type": "SearchAction", 

    "target": "https://www.toploker.my.id/?s={search_term_string}", 

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

    }

</script>
2. Menambahkan Schema Organisasi Ke Blogger
Silahkan cari kode seperti ini //]]></script> dengan mengunakan ctrl + f. Tempelkan kode dibawah ini, setelah kode diatas tadi.

<script type='application/ld+json'>{"@context":"https:\/\/schema.org","@type":"Organization","url":"https:\/\/www.toploker.my.id\/","sameAs":[],"@id":"https:\/\/www.toploker.my.id\/#organization","name":"Top Loker","logo":"url logo blog"}</script>
 

Silahkan ganti yang diberi tanda tersebut dengan url, nama, dan logo blog milik kalian.

1. Menambahkan Schema Search Form Ke Blogger
Silahkan cari kode seperti ini //]]></script> dengan mengunakan ctrl + f. Tempelkan kode dibawah ini, setelah kode diatas tadi.

<script type='application/ld+json'>{ "@context": "https://schema.org", "@type": "WebSite", "url": "https://www.gacerindo.com/", "potentialAction": { "@type": "SearchAction", "target": "https://www.gacerindo.com/?q={search_term}", "query-input": "required name=search_term" } }</script>
Silahkan ganti url yang disorot dengan alamat url blog kalian.

Menambahkan Schema Tertentu Ke Template Yang Tidak Mendukugnya

Sangat penting sebelum menentukan niche atau tema blog kita yang nantinya akan berhubungan kembali dengan template yang harus digunakan. Misalnya kita akan memposting atau jualan online di blog. Maka belilah atau gunakan lah template yang memang mendukung untuk jualan online.
Akan tetapi, masih ada beberapa yang sudah telanjur membeli template premium tetapi ingin mendukung schema tertentu. Maka jangan bingung, pasti masih bisa diatasi.

Caranya pun tidak terlalu sulit, tetapi sedikit menambah waktu mengetik artikel kamu saja. Cara ini pun untuk menambahkan Schema-nya hanya akan tampil di halaman artikel saja, tidak akan akan tampil di halaman statis atau home page blog.

Tambahkan kode-kode schema markup dibawah ketika kalian mengentri atau menulis blog dalam mode html bukan compose.

1. Schema Job Posting untuk Blogger
Tambahkan kode berikut dalam entri tulisan mode html, silahkan ganti tulisan atau kode xxxxxxx sesuai dengan petunjuknya

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

{ 

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

  "@type": "JobPosting",

  "title": "Manager Hotel",

  "description": "Manajer Hotel di Ciamis",

  "hiringOrganization" : {

    "@type": "Organization",

    "name": "Nama Perusahaan",

    "sameAs": "https://www.gacerindo.com"

  },

  "industry": "Kerupuk",

  "datePosted": "2019-11-19",

  "validThrough": "2019-11-30",

  "jobLocation": {

    "@type": "Place",

    "address": {

      "@type": "PostalAddress",

      "streetAddress": "Ciamis",

      "addressLocality": "Ciamis",

      "postalCode": "46271",

      "addressCountry": "ID"

    }

  },
  "baseSalary": {

    "@type": "MonetaryAmount",

    "currency": "IDR",

    "value": {

      "@type": "QuantitativeValue",

      "minValue": 5000000,

      "maxValue": 10000000,

      "unitText": "MONTH"

    }

  }

}

</script>

Contohnya menjadi seperti ini:

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

{ 

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

  "@type": "JobPosting",

  "title": "Manager Hotel",

  "description": "Manajer Hotel di Ciamis",

  "hiringOrganization" : {

    "@type": "Organization",

    "name": "Nama Perusahaan",

    "sameAs": "https://www.gacerindo.com"

  },

  "industry": "Kerupuk",

  "datePosted": "2019-11-19",

  "validThrough": "2019-11-30",

  "jobLocation": {

    "@type": "Place",

    "address": {

      "@type": "PostalAddress",

      "streetAddress": "Ciamis",

      "addressLocality": "Ciamis",

      "postalCode": "46271",

      "addressCountry": "ID"

    }

  },
  "baseSalary": {

    "@type": "MonetaryAmount",

    "currency": "IDR",

    "value": {

      "@type": "QuantitativeValue",

      "minValue": 5000000,

      "maxValue": 10000000,

      "unitText": "MONTH"

    }

  }

}

</script>
2. Schema Recipe untuk Blogger Restoran
Tambahkan kode berikut dalam entri tulisan mode html, silahkan ganti tulisan atau kode xxxxxxx sesuai dengan petunjuknya

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

{

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

  "@type": "Recipe", 

  "name": "",

  "image": "",

  "description": "",

  "keywords": "",

  "author": {

    "@type": "Person",

    "name": ""

  },

  "prepTime": "",

  "cookTime": "", 

  "totalTime": "", 

  "nutrition": {

    "@type": "NutritionInformation",

    "calories": ""

  }  

}

</script>

Contohnya menjadi seperti ini:

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

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

  "@type": "Recipe", 

  "name": "Nama Kue",

  "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ZHiJTPJb6Bz_yHx79nXxQFETJEUOgd7jrrO94mIhwjpSLoLIok4YC7-EPXW49O2icBiJHTQEsVcwTju0cmCGHtJE6yGCaevq1vfzBAlujbdFhSXADdeAzalFxYtVlIEo9kY69AJquHU/s400/Cara+Menambahkan+Schema+Markup+Di+Blog.jpg",

  "description": "Deskripsi Kue Lengkap",

  "keywords": "Kue Bakpao, Lumpia, Roti Bakar,",

  "author": {

    "@type": "Person",

    "name": "Pembuat"

  },

  "datePublished": "2019-11-19",

  "prepTime": "PT2M",

  "cookTime": "PT1M", 

  "totalTime": "PT3M", 

  "nutrition": {

    "@type": "NutritionInformation",

    "servingSize": "30x30",

    "calories": "3 cal",

    "fatContent": "20 g"

  }  

}

</script>

3. Schema Product untuk Blog Produk
Tambahkan kode berikut dalam entri tulisan mode html, silahkan ganti tulisan atau kode xxxxxxx sesuai dengan petunjuknya

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

{

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

  "@type": "Product", 

  "name": "",

  "image": ""

}

</script>

Contohnya menjadi seperti ini:

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

{

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

  "@type": "Product", 

  "name": "Mesin Cuci",

  "image": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ZHiJTPJb6Bz_yHx79nXxQFETJEUOgd7jrrO94mIhwjpSLoLIok4YC7-EPXW49O2icBiJHTQEsVcwTju0cmCGHtJE6yGCaevq1vfzBAlujbdFhSXADdeAzalFxYtVlIEo9kY69AJquHU/s400/Cara+Menambahkan+Schema+Markup+Di+Blog.jpg",

  "description": "Isi dengan deskripsi produk",

  "brand": "Nama Brands"

}

</script>

Bagaimana mudah dipahami kan? Itulah beberapa Cara Menggunakan Schema Markup Di Blog, Semoga bisa bermanfaat.
Tags

You may like these posts

Show more