Modifikasi Template Default Blogspot Agar Lebih SEO Friendly

Modifikasi template default blogspot agar lebih seo friendly - Anda sekarang ini menggunakan template bawaan blogspot? Nah, buat anda yang sudah terlanjur menggunakan template default blogspot kali ini saya akan berbagi tutorial cara modifikasi template bawaan blogger atau blogspot agar menjadi lebih ramah di mesin pencari google. Tetapi bila anda tidak mau capek capek maka ada cara mudah buat anda yaitu dengan mendownload template blogspot yang seo friendly hasil modifikasi blogger lain untuk anda gunakan sebagai template blog anda. Di internet banyak sekali kok template blogger seo friendly yang bisa anda unduh secara gratis. Tetapi menurut saya sebagai bahan belajar anda saya sarankan sebaiknya anda cobalah melakukan otak atik template sehingga dengan cara ini anda akan menjadi lebih mahir nantinya. Saya pun dulu melakukan cara ini dan menurut saya dengan berlatih melakukan modifikasi template default blogspot agar lebih seo friendly inilah cara terbaik yang membuat kita akan menjadi lebih terlatih dan lebih memahami tentang ilmu seo khususnya tentang teknik optimasi seo on page blog.

Baiklah, tanpa banyak basa basi lagi kita langsung saja membahas cara dan tips modifikasi template bawaan blogspot agar menjadi lebih ramah di search engine ini dan berikut ini adalah hal hal yang kudu harus anda lakukan diantaranya :

1. Modifikasi title tag. Untuk template default blogspot biasanya title tag yang ditampilkan adalah seperti ini

<title><data:blog.pageTitle/></title>

Agar menjadi lebih seo friendly, sebaiknya anda ganti dengan title tag seperti di bawah ini

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if> 

2. Memasang meta tag description dan meta tag keyword. Menurut beberapa webmaster, memasang meta tag description atau keyword tujuannya adalah agar mesin pencari lebih memahami tema dan topik bahasan yang kita tulis dalam blog dan google katanya sangat menyukai blog yang memiliki tema dari isi konten yang jelas. Cara memasang meta tag ini sangat mudah, silahkan copy paste kode di bawah ini dan pasang di bawah title tag template blog anda.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog anda" />
<meta name="keywords" content="Kata kunci , kata kunci, kata kunci, kata kunci , kata kunci" />
</b:if>

 3. Memasang breadcrumb. Menurut para webmaster, breadcrumb adalah sebuah peta dimana dan di kategori apa artikel yang kita buat di publikasikan. Adanya navigasi breadcrumbs pada blog akan memudahkan pengunjung untuk menjelajahi blog Anda, dengan begitu pengunjung dapat mengetahui dimana dan pada kategori apa artikel tersebut dipublikasikan. Memasang breadcrumb ini sangat mudah, Silahkan Anda simpan kode dibawah ini di atas kode ]]></b:skin>

.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Selanjutnya cari kode

<b:includable id='main' var='top'> 

ganti dengan kode

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Beranda'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Beranda'><span itemprop='title'>Beranda</span></a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Beranda'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Arsip untuk <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Semua posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Penelusuran <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> 

4. Memasang related post. Untuk memasang related post, silahkan anda copy paste kode di bawah ini dan letakkan di atas kode ]]></b:skin>

#related-post background:none;width:100%;margin-top:35px;margin-bottom:10px;padding:5px 0 10px 0px}
#related-post h4{font-size:150%;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqbPxzNS8UtIJZ7TwkPcBcPYapShGKxO2qpqFvNKJkLjXMHffsnwcqvcJdBOwxgLAVgbVcv8pBa0Lg9otoM8prL_fReL1tjAnzBaQTcSMVspK-Y26h_SAjNuGoLxhPydURgSw23pB0sGx/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

Paste kode di bawah ini dan letakkan dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
      numPosts: 5,
      titleLength: &quot;auto&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>

5. Memasang dynamic heading.  sebenarnya kalu tips ini bisa anda pakai atau tidak juga tidak menjadi persoalan. Tips seo ini hanya sebuah tips tambahan yang menurut sebagian webmaster katanya sih bisa membantu mendongkrak posisi blog di search engine. Jika anda tertarik silahkan ikuti tutorialnya disini. Adapun cara membuat dynamic header ini sangat mudah silahkan anda ikuti tutorialnya di bawah ini :

• Masuk ke akun blogger saudara
• Pilih blog yang akan diedit, dan masuk ke dalam menu TEMPLATE
• Klik tombol EDIT HTML kemudian pilih LANJUTKAN
• Klik EXPAND TEMPLATE WIDGET
• Cari kode <b:include name='title'/> dengan menggunakan control+f pada browser. Biasanya akan ada 3 kode seperti ini. Jadi kita lakukan trial dan error saja, tapi saran saya mulailah dari yang paling bawah.
• Ganti kode <b:include name='title'/> dengan kode di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='title'/>
<b:else/>
<data:blog.pageName/>
</b:if>

Itulah beberapa tips cara modifikasi template default blogspot agar lebih seo friendly dan semoga saja tulisan ini bisa membantu anda.

Di posting oleh : Unknown , Update pada : 21.07 | ► 0 komentar