Tips SEO: Cara Memasang Schema Markup di Template Blog

Baca Juga

Schema Markup adalah bagian dari desain template blog atau website agar web/blog mudah dirambah, diindeks, dan diperingkat Google dan mesin pencari lainnya.

Schema.org adalah aktivitas komunitas kolaboratif dengan misi untuk membuat, memelihara, dan mempromosikan skema untuk data terstruktur di Internet, di halaman web, dalam pesan email, dan seterusnya.

Schema.org dirilis 2 Juni 2011 oleh para operator mesin pencari internet --Google, Bing, Yahoo! dan Yandex. Mereka mendukung sistem markup data terstruktur pada halaman websit atau blog.

Skema ini untuk memudahkan mesin pencari mengidentifikasi dan klasifikasi konten halaman web. Apakah artikel, ulasan buku, acara, bisnis lokal, film, produk, restoran, aplikasi software, dan sebagainya.

Ketika mesin pencari merayapi halaman situs Anda, mereka mencoba memahami apa yang dimaksud dengan masing-masing halaman, untuk mengindeksnya dan menyajikannya kepada pengunjung ketika mereka mencari sesuatu yang relevan.

Untuk melakukan ini, mereka perlu memahami semua kode HTML di situs Anda. Bergantung pada cara situs Anda dibangun, ini mungkin atau mungkin tidak mudah bagi mereka.

Skema --juga dikenal sebagai data terstruktur, cuplikan kaya (rich snippet), atau data mikro (micro data), adalah bahasa yang dipahami secara universal oleh mesin pencari, dengan sangat mudah. Pada dasarnya, skema memberi tahu mesin pencari tentang apa situs Anda atau halaman tertentu dalam istilah yang sangat sederhana.

Pada Maret 2016, data terstruktur ditambahkan ke algoritme faktor peringkat Google, sehingga dengan memasukkannya di halaman Anda dapat membantu membuat posting blog mendapat peringkat yang lebih baik.

Kita bisa cek data terstruktur blog kita di Structured Data Testing Tools. Jika sudah ada dan tanpa erros, alhamdulillah. Jika belum ada, silakan terapkan tips memasang schema di bawah ini.

Cara Menambahkan Schema Markup di Blog

Schema markup blog terpenting adalah Blogpsting dan Breadcrumb List. Blogposting adalah skema markup untuk blog pada umumnya yang berisi artikel atau tulisan.

Untuk blog atau situs berita, sebaiknya menggunakan schema NewsArticle sehingga mudah diidentifikasi sebagai berita dan masuk Google Berita (Google News).

1. Cara Memasang Schema BlogPosting

Berikut ini cara memasang skema blogposting.

1. Klik Tema > Edit HTML
2. Simpan kode berikut ini di bawah kode <div class='post'> atau <article class='post'>.

Jika ada kode lain di belakangnya, hapus saja. Jika kodenya masih berupa <div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> juga hapus dan ganti menjadi <div class='post'> saja.

<b:if cond='data:blog.pageType == &quot;item&quot; or data:blog.pageType == &quot;static_page&quot;'>
<script type='application/ld+json'>{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:post.canonicalUrl/>"
    },
  "headline": "<data:view.title.escaped/>",
  <b:if cond='data:blog.metaDescription'>"description": "<data:blog.metaDescription.escaped/>",<b:else/>"description": "Silahkan kunjungi postingan <data:view.title.escaped/> untuk membaca artikel selengkapnya dengan klik link di atas.",</b:if>
  "datePublished": "<data:post.timestampISO8601/>",
 "dateModified": "<data:post.lastUpdatedISO8601/>",
  "image": {
    "@type": "ImageObject",<b:if cond='data:post.firstImageUrl'>"url": "<b:eval expr='resizeImage(data:post.firstImageUrl,1280,&quot;1280:720&quot;)'/>",<b:else/>"url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubjx66hTqvIqKd09uaR-_RXSDsdYTGQeZmehafPN1OkOAsMk8ArYF3R-XM9B4hJW11_8UVrAsFWaoNhnNORWIPyEMPslioNaes9sj1gQ2HKQzECpRgZX3eyr7EBAuvFxuvLIapIHIFbM/s1280/no-thumbnail.jpg",</b:if>
    "height": 720,
    "width": 1280
 },
  "publisher": {
    "@type": "Organization",
    "name": "<data:blog.title/>",
    "logo": {
      "@type": "ImageObject",
      "url": "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9NQ-T8O_B8ZL-IQJr-BzHq7Dj_F3647o1RQWz1iTOAzzopvX1XIMSw5Vsc3LZDDDiKxWZQKKMxJlGsli8j3Kzy8tkEpPnIppXV7oU1p96ZkGbqHOr8ZtTpm13r6seW6ZgPLOZ2fmX_mzp/s1600/batic+on+wp.png",
      "width": 600,
      "height": 60
      }
    },
  "author": {
    "@type": "Person",
    "name": "<data:post.author/>"
  }
}</script>
</b:if>

3. Save!

2. Cara Memasang Schema NewsArticle

Untuk skema blog berita, pada langkah kedua gunakan kode ini:

<!-- Schema markup for news article Start -->
              <script type='application/ld+json'>
                {
                  &quot;@context&quot;: &quot;https://schema.org&quot;,
                  &quot;@type&quot;: &quot;NewsArticle&quot;,
                  &quot;mainEntityOfPage&quot;: {
                    &quot;@type&quot;: &quot;WebPage&quot;,
                    &quot;@id&quot;: &quot;<data:post.url.canonical.jsonEscaped/>&quot;
                  },
                  &quot;headline&quot;: &quot;<data:post.title.jsonEscaped/>&quot;,
                  &quot;description&quot;: &quot;<data:post.snippet/>&quot;,
                  &quot;image&quot;: [
                    &quot;<data:post.firstImageUrl/>&quot;
                   ],
                  &quot;datePublished&quot;: &quot;<data:post.date.iso8601.jsonEscaped/>&quot;,
                  &quot;dateModified&quot;: &quot;<data:post.timestampISO8601/>&quot;,
                  &quot;author&quot;: {
                    &quot;@type&quot;: &quot;Person&quot;,
                    &quot;name&quot;: &quot;<data:post.author/>&quot;
                  },
                   &quot;publisher&quot;: {
                    &quot;@type&quot;: &quot;Organization&quot;,
                    &quot;name&quot;: &quot;Bandung Aktual&quot;,
                    &quot;logo&quot;: {&quot;@type&quot;: &quot;ImageObject&quot;,
                      &quot;url&quot;: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzdtfThEL66bnE57IEV1HYVnxz6iicXuMB4wc2LGGZznBQ6x0L5rhpC33UeemPKYq_fXvfsHL1TpBgUNvA-nDhHjBkVNzXox5AQ4NlfXQfnEys5CCYcCecg9NoxIU2D7Di0LyZfND_4Bf/s1600/kota-bandung.jpg&quot;,
                      &quot;width&quot;: 206,
                      &quot;height&quot;: 60
                    }
                  }
                }
              </script>
<!-- Schema markup for news article End -->

3. Cara Memasang Schema Artikel

Jika ingin menggunakan skema artikel saja, berikut ini langkahnya:

1. Tema > Edit HTML
2. Ganti kode

<div class='post hentry'

dengan

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/Article'>

3. Ganti kode

<b:if cond='data:post.title'>

dengan

<b:if cond='data:post.title'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' itemprop='url'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' itemprop='url'>
<data:post.title/>

4. Save!

4. Cara Memasang Schema Breadcrumb List

1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.breadcrumbs{line-height:1.2em;width:auto;overflow:hidden;padding:0;margin:0 auto 20px;font-size:90%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#777;font-weight:400}
.breadcrumbs a:hover{color:blue}
.breadcrumbs svg{width:20px;height:20px;vertical-align:-5px;margin:0 -3px}
.breadcrumbs svg path{fill:#c8c8c8}

3. Temukan kode <b:includable id='breadcrumb' var='posts'> ... </b:includable>
4. Hapus dan ganti dengan kode breadcrumb tanpa error berikut ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:view.isSingleItem'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z'/></svg>
</b:loop>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>

5. Copas kode berikut ini di bawah kode <b:includable id='main' var='top'>

<b:include data='posts' name='breadcrumb'/>

5. Save. Simpan template!

Shema Lengkap untuk Blogger

<body class='index' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<header id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<nav id='navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<article id='article-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
OR
<div id=’content-wrapper’ itemscope=’itemscope’ itemtype=’http://schema.org/Blog‘ role=’main’>
<div class=’post hentry uncustomized-post-template’ itemscope=’itemscope’ itemtype=’http://schema.org/BlogPosting‘>
OR
<article class=’post hentry’ expr:id=’data:post.id’ itemscope=” itemtype=’http://schema.org/BlogPosting‘>
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<footer id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>

Sumber:
https://technicalseo.com/tools/schema-markup-generator/
https://www.seoclive.com/blog/how-to-use-schema-markup-blogger
https://developers.google.com/structured-data/testing-tool/