Cara Setting Microdata Schema di Template Blogger. Berikut ini seocips akan membahas tentang cara setting schema dan microdata yang ada di template Blogger. Setelah kemarin mencoba melakukan pemasangan microdata di template Blogger ini dan template blog lain yang sudah pernah seocips.com bagikan ( walupun belum semuanya tapi beberapa diantarnya  telah Valid microdata ketika di uji coba di Testing Tool ). Saya akan membagikan bagaimana caranya kepada anda. Sebagai contoh adalah Navigasi Breadcrumbs yang terindex google.

Dengan pemasangan microdata yang jelas dapat menampilkan deskripsi postingan dan lain-lain, dapat juga menghilangkan beberapa error microdata di template Blogger anda. Di sini saya hanya memberikan beberapa bagiannya saja yang di rasa penting untuk Blog dan terserah anda apakan anda ingin menggunakannya ke dalam template atau tidak.

Cara Setting Microdata Schema di Template Blogger

Markah (markup) meta deskripsi blog.

Oleh karena meta deskripsi telah dimasukkan dalam blog — tepatnya pada markah <b:include data='blog' name='all-head-content'/> — kemungkinan meta deskripsi microdata berikut kurang bermanfaat. Terkecuali untuk memperkaya cuplikan struktur data. Meta deskripsi dengan microdata ini dapat diletakkan di bawah <body> atau di bawah pengkodean navbar.
<body expr:class='"loading" + data:blog.mobileClass'>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
      <b:if cond='data:blog.pageName == &quot;&quot;'>
        <!-- Add schema.org description on home page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      <b:else/>
        <!-- Avoid duplicate schema.org description on label and search page -->
        <b:if cond='data:blog.searchLabel'>
          &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan label <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        <b:else/>
          &lt;meta content=&quot;Arsip  berdasarkan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
        </b:if>
      </b:if>
    </div><!-- itemscope itemtype='http://schema.org/Blog' -->
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
      <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'>
        <!-- Add schema.org description on archive page -->
        &lt;meta content=&quot;Penelusuran arsip <data:blog.title/> berdasarkan bulan <data:blog.pageName/>&quot; itemprop=&quot;description&quot;/&gt;
      </div><!-- itemscope itemtype='http://schema.org/Blog' -->
    <b:else/>
      <div itemscope='itemscope' itemtype='http://schema.org/BlogPosting' style='display: none;'>
        <!-- Add schema.org description on item and static page -->
        <b:if cond='data:blog.metaDescription'>
          <meta expr:content='data:blog.metaDescription' itemprop='description'/>
        </b:if>
      </div><!-- itemscope itemtype='http://schema.org/BlogPosting' -->
    </b:if>
  </b:if>
  …
</body>
Catatan: kode yang diberi warna biru merupakan deskripsi yang akan ditampilkan pada pengujian rich snippets.

Properti articleBody

Skema BlogPosting dengan properti ini telah terdapat pula pada template standar Blogger™ dengan peletakkan yang unik & menarik.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
</b:if>
Saya rasa ini merupakan terobosan yang sangat baik dari perancang. Konfigurasi pengkodean di atas akan berperan untuk membantu pengelola blog, terutama yang sudah ‘menelurkan’ banyak posting. Apa alasanya? Coba kita perhatikan markah tersebut, penggunaan <b:if cond='data:blog.metaDescription == &quot;&quot;'> dan di iringi dengan itemprop='description articleBody' merupakan kata kunci agar duplikasi meta deskripsi posting tidak terjadi, jika penulis lupa memasukkan deskripsi pada editor posting atau tidak mengaktifkan meta deskripsi dalam setelan pengaturan pada preferensi penelusuran.

Arti sederhananya mungkin adalah deskripsi posting akan diterjemahkan secara otomatis, meskipun penulis tidak memasukkannya. Namun jika meta deskripsi posting telah dimasukkan penulis, maka yang akan ditampilkan adalah hasil isian dari penulis posting tersebut.

Properti articleSection

Para blogger yang biasanya menambah beberapa elemen di bawah posting elemen posting terkait dapat memanfaatkan markah articleSection. Tetapi ia bukan articleBody, agar lebih jelas akan saya coba contohkan seperti yang ditunjukkan pada pengkodean berikut.
<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>

<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
  </div>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <aside class='related-posts' itemprop='articleSection'>
      …
    </aside>
    <div class='clear;'></div>
  </b:if>

</b:if>

Properti url dan datePublished pada post-timestamp

Properti ini juga telah ditambahkan oleh perancang template Blogger™. Ketika sebuah halaman posting terbuka, maka judul posting umumnya tidak memiliki pranala (link). Oleh karena itu skema microdata dengan properti url dialihkan ke elemen post-timestamp. Dengan catatan pengelola blog belum melakukan perubahan struktur data pada entry-title (post-title).
<span class='post-timestamp'>
  <b:if cond='data:top.showTimestamp'>
    <data:top.timestampLabel/>
    <b:if cond='data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
      <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>
    </b:if>
  </b:if>
</span>
Catatan: ada yang merasa aneh pada kode yang berwarna biru? Hal itu hanya ‘latah’ saya untuk menghilangkan peringatan pada alat rich snippets ketika menguji struktur data blog di ini.

Markah schema.org/Comment

Oleh karena kebanyakan para blogger menggunakan sistem komentar bersarang (threaded comments), maka konfigurasi hanya akan dilakukan di sekitar daerah judul komentar. Adapun properti yang dimanfaatkan sebagai markup adalah name dan interactionCount khusus pada jumlah komentar yang masuk. Menyisipkan atau memberi markup microdata pada sesi ini dibagi menjadi dua, yakni sebelum ada komentar (comments) & setelah ada komentar (threaded comments).
<b:includable id='comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;

  </b:if>
    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>
  …
  </div>
</b:includable>
<b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments' itemprop='comment' itemscope='itemscope' itemtype='http://schema.org/Comment'>
  <b:if cond='data:post.numComments != 0'>
    &lt;meta content=&quot;UserComments: <data:post.numComments/>&quot; itemprop=&quot;interactionCount&quot;/&gt;
  </b:if>

    <a name='comments'/>
    <h4 itemprop='name'><data:post.commentLabelFull/></h4>
  …
  </div>
</b:includable>
Khusus bagi penggunaan komentar tidak bersarang, markup microdata yang dimanfaatkan adalah itemprop='UserComments' dengan tipe schema.org/UserComments. Sedangkan propertinya antara lain: commentText, commentTime, creator, dan replyToUrl serta dapat pula ditambahkan schema.org/Person sebagai bagian di dalam struktur schema.org/comment.

Properti discussionUrl

Skema properti ini akan muncul jika dan hanya jika pengelola menampilkannya pada halaman indeks, sedangkan pada halaman posting atau halaman statis —biasanya— tidak ditampilkan. Meskipun ditampilkan, maka besar kemungkinan pengkodean dengan menempatkan itemprop='discussionUrl' akan sama pula.
<span class='post-comment-link'>
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:post.allowComments'>
      <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' itemprop='discussionUrl'>
        <data:post.commentLabelFull/>
      </a>
    </b:if>
  </b:if>
  </b:if>
</span>

Properti keywords

Pengkodean dengan markah microdata BlogPosting dengan properti keywords secara sederhana dapat kita letakkan pada elemen post-labels.
<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
     <a expr:href='data:label.url' rel='tag'><span itemprop='keywords'><data:label.name/></span></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
  </b:if>
</span>
Berdasarkan uraian yang sangat panjang di atas, format microdata dapat diterapkan beragam atau tergantung “pemberi markah”. Namun memberi sebuah markup terhadap data atau elemen tidak dapat dilakukan secara sembarangan, karena akan turut berpengaruh dalam menghasilkan markah yang semantik. Sekian informasi yang mengenai beberapa Microdata Schema di Template Blogger dapat dibagikan saat ini semoga bermanfaat untuk anda.