March 15, 2020

Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List

March 15, 2020

Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List.

Schema Markup Minimal untuk SEO Blog

Schema adalah seperangkat 'tipe' (type) masing-masing terkait dengan serangkaian properti. Skema merupakan kode yang memudahkan mesin pencari mengidentifikasi konten sebuah website atau blog.

Bagi blog di Blogger, schema markup minimal dan terpenting untuk SEO adalah Schema Webpage (halaman web), Schema Blogposting (atau Schema NewsArticle untuk blog berita), dan Breadcrumb.

Schema Webpage adalah skema untuk menunjukkan bahwa blog kita adalah sebuah halaman website, bukan aplikasi (app).

Setiap halaman web secara implisit diasumsikan dideklarasikan sebagai tipe WebPage, sehingga berbagai properti tentang halaman web tersebut, seperti breadcrumb, dapat digunakan.

Schema BlogPosting adalah skema untuk menunjukkan bahwa konten blog berupa artikel yang biasanya dilengkapi gambar atau format posting lain.

Menambahkan markup skema blogposting ke posting blog Anda membantu mesin pencari dengan cepat mengetahui tentang apa postingan itu dan meningkatkan peluang mendapatkan peringkat lebih tinggi di SERP.

Schema BreadcrumbsList adalah ItemList yang terdiri dari rangkaian halaman Web tertaut, biasanya digambarkan menggunakan setidaknya URL dan nama mereka, dan biasanya diakhiri dengan halaman saat ini.

Menurut Google, breadcrumbs menunjukkan posisi halaman dalam hierarki situs. Seorang pengguna dapat menavigasi sepenuhnya dalam hierarki situs, satu tingkat pada satu waktu, dengan memulai dari breadcrumbs terakhir dalam breadcrumb.

Cara Memasang Schema Markup Minimal di Blog

Tips pemasangana skema markup berikut ini untuk blog yang masih belum dipasangi skema, atau untuk template bawaan Blogger.

Untuk template bawaan Blogger, hapus dulu sekema yang ada, khususnya Schema BlogPosting, hingga hanya menyisakan kode <div class='post'> saja.

1. Schema Webpage

Simpan di bawah kode <body>

  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Webpage' style='display: none;'>
      <meta expr:content='data:blog.title' itemprop='name'/>
      <b:if cond='data:blog.metaDescription'>
        <meta expr:content='data:blog.metaDescription' itemprop='description'/>
      </b:if>
    </div>
  </b:if>


Kode Webapage Alternatif:

<b:if cond='data:view.isMultipleItems or data:view.isPage'>
<script type='application/ld+json'>{
&quot;@context&quot;: &quot;http://schema.org&quot;,
&quot;@type&quot;: &quot;WebPage&quot;,
&quot;name&quot; : &quot;<data:blog.pageTitle/>&quot;,
&quot;url&quot; : &quot;<data:blog.url/>&quot;
}</script>
</b:if>

Tambahan: Schema Website

Ada juga Schema Website untuk memunculkan kotak pencarian di Google. Simpan di bawah kode <head>

<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script> 

2. Schema BlogPosting

Simpan di bawah kode <div class='post'> atau <article class='post'>
Jika kodenya berbeda, maka samakan dengan kode tersebut dengan menghapus kode setelahnya

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

Catatan:
- Error Blogposting pada template Simple Blogger bisa diatasi dengan memasang kode di atas, setelah kode yang ada dihapus dulu.
- Untuk blog berita, silakan Pasang Schema ArticleNews.

3. Schema Breadcrumb List

CSS
Simpan di atas ]]></b:skin>

.breadcrumbs {line-height: 1.2em;width: auto;overflow: hidden;padding: 0 0 10px;margin: 0 auto 5px;font-size: 90%;color: #888;font-weight: 400;text-overflow: ellipsis;-webkit-text-overflow: ellipsis;white-space: nowrap;border-bottom: 1px solid #eee;}
.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}

HTML
Simpan di bawah kode <b:includable id='main' var='top'>

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

JS:
Simpan di atas kode <b:includable id='comment-form' var='post'>

          <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>
       
Demikian Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List, dan cara memasangnya.

Happy Blogging! (www.contohblog.com).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Schema Markup Minimal untuk SEO Blog: Webpage, Blogposting, Breadcrumb List

Post a Comment

Contact Form

Name

Email *

Message *