Sabtu, 11 April 2015

Apa yang harus gue lakukan agar supaya Cara Memasang Microformats Yang Benar



cara memasang microformats yang benar di blog
sumber : Google.com/
Awalnya, saya coba diagnosis blog saya http://BloggerMuslimGaul.blogspot.com apa saja yang harus diperbaiki agar blog menjadi lebih SEO. Dan ternyata ada beberapa hal yang harus saya perbaiki. Diantaranya adalah microformats seperti yang terlihat pada gambar.

cara memasang microformat

Coba Anda lihat, Microformats blog saya not found dan ada tanda silang merah. Dan ini kurang baik untuk SEO blog kita. Sekarang mari kita bahas bagaimana cara memasang microformats yang benar.

Cara Memasang Microdata (Microformat) Yang Benar di Blog - Microformat adalah sebuah struktur data untuk menerjemahkan informasi dalam tag HTML melalui pedoman dan cara yang telah ditetapkan serta di pahami oleh mesin pencari.

Sebagai contoh penggunaan microformats adalah Navigasi Breadcrumbs yang merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Nah untuk membuat microformats, kita dapat memnggunakan layanan membuat microformat online yaitu Microdata Generator .
  • Lakukan registrasi dan jika sudah berhasil silahkan login.
  • Klik Thing Generators
  • Pilih Tipe Schema.org apa yang akan kita terapkan
  • Isi data yang dibutuhkan
  • Pasang pada situs/blog dengan teliti dan sesuai.
Sebagai catatan, harap optimalkan serta sesuaikan sendiri penggunaannya sesuai dengan template masing-masing. Mungkin terkadang struktur templatenya agak berbeda.

1. Schema.org Blog > BlogPosting Types tutorial
Blog type of Schema.org specifies that associated content is a Blog. Lebih spesifik, tipe BlogPosting menentukan bahwa konten terkait adalah artikel post itu.

- Copy kode berikut, letakkan dibawah kode <body>
<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>
<div itemscope='itemscope' itemtype='http://schema.org/Blog'>

- Kemudian, tambahkan kode
<meta itemprop="interactionCount" content="FacebookLikes:8"/> 
<meta itemprop="interactionCount" content="GooglePlus:3"/>      

</div>                                                                                          


sebelum kode penutup </body>

- Lalu, cari kode <div class='post h-entry' dan ganti kode tersebut menjadi :
<div class='post h-entry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'><b:if cond='data:post.thumbnailUrl'>
  <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>


Keterangan :
  • Biasanya kode yang dicari tersebut berada di bawah <b:includable id='post' var='post'>

- Kustomisasi properti skema name, url, dan about.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'>

<b:includable id='title'>
  <meta expr:content='data:blog.title' itemprop='name'/>
  <meta expr:content='data:blog.homepageUrl' itemprop='url'/>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description' itemprop='about'><span><data:description/></span></p>
  </div>
</b:includable>

</b:widget>
</b:section>
- Masukkan properti blogID dan postID dalam kode post author dengan cuplikan seperti berikut ini :
<span class='post-author vcard'>
  <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <b:if cond='data:post.authorProfileUrl'>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
        <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
          <span itemprop='name'><data:post.author/></span>
        </a>
      </span>
    <b:else/>
      <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
        <meta expr:content='data:blog.blogId' itemprop='owns'/>
        <meta expr:content='data:post.id' itemprop='owns'/>
        <span itemprop='name'><data:post.author/></span>
      </span>
    </b:if>
  </b:if>
</span>
- Kemudian cari kode <h3 class='post-title entry-title'>, delete dan ubah menjadi <h3 class='post-title entry-title' itemprop='name'>

- Kemudian kita dapat pula menambahkan properti url yang ditunjukkan oleh markah di bawah ini.
<b:if cond='data:post.link'>
  <meta expr:content='data:post.link' itemprop='url'/>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
    <b:if cond='data:post.url'>
      <b:if cond='data:blog.url != data:post.url'>
      <meta expr:content='data:post.url' itemprop='url'/>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>

   .....
</b:if>

- Setting 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;'>
  <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>

Tidak ada komentar:

Posting Komentar