Info Blog, Optimasi Template Blog

Info Blog kali ini akan sedikit menguraikan tentang cara-cara optimasi Template Blog agar mampu mengangkat eksistensi sebuah blog dalam persaingan di dunia search engine semacam Google search engine yang hingga saat ini masih merupakan raksasa search engine dunia yang memiliki banyak peminat di dunia Internet.

Dalam artikel tentang Pengertian dan Struktur Template blog, telah penulis bahas tentang definisi template blog itu sendiri sekaligus uraian umum tentang struktur template blog. Template blog ini merupakan sarana awal dan terpenting bagi sebuah blog untuk dapat di-crawl oleh berbagai macam mesin pencari web yang ada di dunia Internet, exp : Google, Yahoo, Bing dan lain-lain.

Bertitik tolak dari pentingnya keberadaan sebuah template blog itu, maka sebuah template blog haruslah teroptimasi dengan baik dan terstruktur agar mampu memenangkan persaingan terutama persaingan yang berkaitan dengan tingkat kecepatan loading sebuah blog. Optimasi template blog yang baik akan mampu mengangkat posisi sebuah situs atau blog pada tempat terhormat pada halaman pertama hasil pencarian search engine. Optimasi template blog yang memadai, pada akhirnya juga akan mampu membawa peningkatan dalam hal kecepatan loading sebuah situs atau blog, yang secara lambat namun pasti akan dapat menjaring jumlah kunjungan atau visitor blog dalam jumlah yang banyak pula.

Banyak cara yang dapat dipergunakan untuk melakukan prose optimasi template blog ini, diantaranya adalah :

1. Optimasi HTML Template Blog.
Optimasi HTML Template Blog ini perlu dilakukan pertama kali terutama dalam rangka menghilangkan space-space kosong dalam rangkaian kode-kode HTML template blog. Optimasi HTML Template Blog ini salah satunya dapat dilakukan dengan mempergunakan HTML Optimizer (online) yang beredar di dunia internet.

Contoh proses optimasi HTML Template Blog ini adalah sebagai berikut  :

Sebelum di optimasikan :

.post-body h1 { line-height: 30px; font-size: 40px; margin: 10px 0; }
.post-body h2 { font-size: 38px; line-height: 44px; border-bottom: 4px solid #4690B3;padding-bottom: 5px; margin: 10px 0; }
.post-body h3 {
font-size: 26px!important;  padding-bottom: 5px; margin: 10px 0;
background: #E3F0F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirLknt_zwXDqjMhswFGb3RpO4k87Y3MCqjOWx0UJtO493zhrRAFktUQ7t7AGVOXHuKXtveKxmnC_T2B9268SW2CBoh7UVuCYT8_Vpj863Rq9HFUm1wBcertz3bh-ehsxBoPtihVm46Cg_y/s1600/note.png) center no-repeat;
border: 1px solid #6CC;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.post-body h4 {
font-size: 24px; line-height: 36px; margin: 10px 0;
background: #004489!important;
color: #FCFCFC!important;
padding: 5px 10px;
margin: 20px 0px 10px 0px;
border: 2px dashed #FFF;
font-family: bebasregular, 'Yanone Kaffeesatz', sans-serif;
font-weight: normal;
line-height: 1.25;
text-shadow: 1px 2px 9px #000;
}
.post-body h4 a{
color: #fff;
}
.post-body h5 { font-size: 24px; line-height: 30px; margin: 10px 0;  }
.post-body h6 { font-size: 18px; line-height: 24px; margin: 10px 0;  }

Setelah dioptimasikan, hasilnya akan menjadi :

 .post-body h1 { line-height: 30px; font-size: 40px; margin: 10px 0; }  .post-body h2 { font-size: 38px; line-height: 44px; border-bottom: 4px solid #4690B3;padding-bottom: 5px; margin: 10px 0; }  .post-body h3 {  font-size: 26px!important;  padding-bottom: 5px; margin: 10px 0;  background: #E3F0F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirLknt_zwXDqjMhswFGb3RpO4k87Y3MCqjOWx0UJtO493zhrRAFktUQ7t7AGVOXHuKXtveKxmnC_T2B9268SW2CBoh7UVuCYT8_Vpj863Rq9HFUm1wBcertz3bh-ehsxBoPtihVm46Cg_y/s1600/note.png) center no-repeat;  border: 1px solid #6CC;  background-position: 7px 50%;  padding: 10px 10px 10px 45px;  -moz-border-radius: 4px;  -webkit-border-radius: 4px;  }  .post-body h4 {  font-size: 24px; line-height: 36px; margin: 10px 0;  background: #004489!important;  color: #FCFCFC!important;  padding: 5px 10px;  margin: 20px 0px 10px 0px;  border: 2px dashed #FFF;  font-family: bebasregular, 'Yanone Kaffeesatz', sans-serif;  font-weight: normal;  line-height: 1.25;  text-shadow: 1px 2px 9px #000;  }  .post-body h4 a{  color: #fff;  }  .post-body h5 { font-size: 24px; line-height: 30px; margin: 10px 0;  }  .post-body h6 { font-size: 18px; line-height: 24px; margin: 10px 0;  }

2. Membuat Template menjadi Responsive.
Responsive Template adalah merupakan sebuah model template blog yang mampu secara otomatis menyesuaikan diri dengan berbagai macam ukuran device yang dipergunakan untuk mengakses blog tersebut.

Contoh rangkaian kode untuk responsive template adalah seperti di bawah ini :

@media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }}
@media screen and (max-width: 960px) {
.ct-wrapper{    padding:0 15px;  }
.main-wrapper, .opt-in .opt-in-wrap{    margin-right:0;    width:100%;  }
.sidebar-wrapper{  float: left; width: auto;  margin-left: 20px;}
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper {  padding: 0 48px; }
.opt-in .info {  text-align: center;   }
.opt-in .signup-form {  margin-top: 30px;  width: 95%;  float: left;  }
#subbox {  width: 60%;  }}
@media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }}
@media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper {  padding: 0 10px; }}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{    display:block;    float:none;    }
.comments .comments-content .comment-header {    height:70px;  }}
@media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{  max-width: 230px; }
.comments .comments-content .comment-replies {    margin-left: 0;    }}

3. Memasang Meta-Tag SEO Friendly.
SEO Friendly ini pada dasarnya adalah merupakan rangkaian tindakan SEO OnPage yang langsung dipasangkan pada sebuah template blog, dan berfungsi untuk memperkenalkan sebuah blog atau situs pada search engine semacam Google search engine.

Contoh Meta-Tag tersebut adalah seperti di bawah ini :

<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Chord Digital | Musik Digital | Musik Digital Blog | Musik Digital Tutorial</title>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>   
<title><data:blog.pageTitle/> | Chord Digital</title>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='MUSIK DIGITAL | Chord Digital | Informasi Dunia Blogging dan Musik Digital' name='description'/>
<meta content='musik digital, chord digital, blog, dunia blog, template super seo friendly, digital audio, alexarank, artikel plus, AMT, breadcrumb, cubase-sx, har-ball mixing-mastering, Google, mastering tool,  sitelinking, unique visitor,  webmaster tool, wave-lab' name='keywords'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='noodp' name='robots'/>
<meta content='Tjondro Purnomo' name='author'/>
<meta content='CHORD DIGITAL' name='copyright'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='global' name='distribution'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='bb0fe97580cb9f13' name='Chord Digital Music'/>
<meta content='VlXMHakdX8xYFAPx3cJfewzh05g' name='alexaVerifyID'/>
<meta content='lK_9GJMod4Hm560fvsSGINOO0B_0FezzRHo5jabu98Y' name='google-site-verification'/>
<meta content='8545E51B78A869EC7570201294F6623C' name='msvalidate.01'/>
</b:if>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link href='chorddigital.blogspot.com/feeds/posts/default' rel='alternate' title='CHORD - Atom' type='application/atom+xml'/>
<link href='chorddigital.blogspot.com/feeds/posts/default?alt=rss' rel='alternate' title='CHORD - RSS' type='application/rss+xml'/>
<link href='http://www.blogger.com/feeds/1395717282110024483/posts/default' rel='service.post' title='CHORD - Atom' type='application/atom+xml'/>
<link href='http://www2.blogger.com/rsd.g?blogID=1395717282110024483' rel='EditURI' title='RSD' type='application/rsd+xml'/>

Demikianlah uraian penulis tentang cara-cara optimasi template blog, bilamana anda memiliki tehnik yang lain, silahkan menuliskannya pada kotak komentar di bawah ini.