Cara Membuat Template Blog SEO Friendly

1799 views

Tips blogging kali ini tentang cara mengedit atau mengubah template blog menjadi seo friendly, responsive (mobile-friendly), dan fast loading. Dilengkapi dengan memasang auto read more atau ringkasan tulisan di halaman depan dan meta tags seo.

tema blog simple

Template Blog SEO Friendly adalah tema, desain, atau tampilan blog yang ramah mesin telusur, bersahabat mesin pencari Google, Bing, dan search engine lainnya, sehingga blog mendapatkan peringkat atas di hasil pencarian.

Template ramah mesin pencari ini akan membuat blog atau situs web lebih mudah dan cepat dirambah, diindeks, dan diperingkat mesin pencari sehingga mendatangkan pembaca atau pengunjung.

Desain blog mobile-friendly dan fast loading merupakan bagian dari penerapan 200 faktor seo yang menentukan peringkat blog di Google.

Untuk mendapatkan atau menggunakan tema blog seo friendly sangat mudah. Banyak desainer template yang sudah berbagi tema gratis. Bisa juga dengan membeli template premium dengan harga di kisaran 70 hingga 200 ribu. Rata-rata sih 100-ribuan. Murah “bingit” ‘kan?

Template seo friendly gratis biasanya diinjeksi link credit pembuatnya di footer. Gak boleh dihapus karena melanggar hak cipta. Template premium bebas credit link, namun harus keluar biaya.

Bagaimana jika ingin template blog seo friendly yang bebas credit link dan bebas biaya? Gampang! Pasang saja template bawaan Blogger –yang sebenarnya sudah seo friendly– lalu edit sendiri.

Yang dimaksud template blog dalam postingan ini tema Blogger (blogspot) ya, bukan tema WordPress. Yang belum punya blog di Blogger, silakan ikuti panduan cara membuat blog.

Cara Membuat Template Blog SEO Friendly

Berikut ini cara menjadikan template blog seo friendly atau lebih ramah mesin pencari. Pertama-tama, ganti dulu template blog Anda dengan template Simple.

1. Klik Tema, scroll ke bawah, klik tema Simple (Sederhana)

tema blog simple

2. Akan muncul halaman tampilan. Klik Apply to Blog (Terapkan be Blog).

Kini blog Anda sudah memasang template sederhana yang siap diedit. Modifikasi ini akan menjadikan template blog menjadi lebih seo friendy sekaligus responsive atau ramah mesin telusur (mobile-friendly).

3. Klik Tema > Klik Customize untuk masuk ke Blogger Theme Designer.

customize

4. Silakan atur-atur di sini, mulai background, jenis huruf (sebaiknya pilih semuanya Arial atau Roboto), lebar template, dan lainnya.

blogger theme designer

Untuk Layout, pilih yang dua kolom dan satu footer.

layout-kolom-footer

Setelah selesai, klik Apply to blog di kanan atas.

Setting awal membuat template blog seo friendly selesai. Kini saatnya masuk ke dalam template untuk proses berikutnya, dengan memasang sejumlah kode.

Menjadikannya Responsive

Tahap pertama kita akan jadikan template bawaan Blogger ini ramah seluler alias responsive.

1. Nonaktifkan widget navbar dengan cara klik Layout > klik Edit Navbar

 

nonaktifkan-navbar

 

Klik Off seperti gambar di atas. Save!

2. Klik Tema > klik Edit HTML

tema edit html template

Kita sudah masuk ke bagian dalam kode template. Saatnya memasang kode untuk menjadikannya responsive.

3. Cari kode berikut ini:

.post-body img, .post-body .tr-caption-container {
padding: $(image.border.large.size);
}

4. Hapus dan ganti dengan kode:

.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}

5. Cari kode berikut ini:

 

<b:if cond=’data:blog.isMobile’>
<meta content=’width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0′ name=’viewport’/>
<b:else/>
<meta content=’width=1100′ name=’viewport’/>
</b:if>

 

6. Hapus dan ganti dengan kode:

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

 

7. Copas/simpan kode responsive berikut ini di atas kode </head>

 <style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width:100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

 

8. Hapus kode navbar (optional). Hapus kode yang dihighlights kuning seperti dalam gambar ini:

kode navbar blog

 

9. Save! Simpan template.

10. Klik Tema > lakukan setting seperti gambar ini untuk menonaktifkan template mobile bawaan Blogger.

 

setting template mobile blogger

 

Kini template blog sudah mobile-friendly. Silakan cek di Mobile-Friendly Test. Hasilnya harus seperti ini:

 

page mobile friendly test

Memasang Auto Read More

Kini kita pasang kode auto read more untuk meringkas tulisan di halaman depan blog menjadi gambar, judul, dan ringkasan, seperti ini:

auto read more blogger

1. Tema >Edit HTML

2. Copas kode berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.thumb img {float: left;margin: 0 20px 5px 0;width: 180px;height: 110px;box-shadow:0;border:0;padding:0;background:#fff}
h2.post-title {font-size: 18px;margin-bottom: 8px;}
.post-body {font-size: 97%;line-height:1.3;position: relative;}
.post-footer {display:none}
.post {margin: 0 0 15px 0;border-bottom: 1px solid #f1f1f1;padding-bottom: 15px;}
</style>
</b:if>
</b:if>

 

3. Cari (Ctrl+F) kode <data:post.body/>
4. Hapus kode <data:post.body/> yang kedua dan ganti dengan kode berikut ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>

5. Cari kode <a expr:name=’data:post.id’/>. Di bawahnya pasti ada kode seperti :

<b:if cond=’data:post.title’><h3 class=’post-title entry-title’ itemprop=’name’><b:if cond=’data:post.link or (data:post.url and data:blog.url != data:post.url)’><a expr:href=’data:post.link ? data:post.link : data:post.url’><data:post.title/></a><b:else/><data:post.title/></b:if></h3></b:if>

Hapus kode tersebut dan ganti dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'><b:if cond='data:post.title'><h1 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'><a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if></h1></b:if></b:if>

6. Save! Simpan template.

Kini desain halaman depan sudah berubah menjadi ringkasan posting seperti gambar di atas.

Jika gambar thumbnailnya buram (blur), karena harusnya 72px menjadi lebih besar, tambahkan kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

 

Selesai!

Memasang Meta Tags SEO Friendly

Meta Tags adalah kode yang akan memberikan informasi kepada mesin pencari tentang judul atau nama blog (meta title), deskripsi blog (meta description), dan kata kunci (meta keywords).

Berikut ini kode meta tag seo friendly dan cara memasangnya:

1. Tema > Edit HTML

2. Hapus kode berikut ini:

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

3. Ganti dengan kode ini:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex, nofollow' name='robots'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='keywords'/>
<meta content='index, follow' name='robots'/>
</b:if>
<b:else/>
<b:if cond='data:blog.pageTitle != data:blog.title'>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/></b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if></b:if>

4. Simpan template!

Beres. Kini desain tampilan blog Anda sudah seo friendly, responsive, dan menggunakan meta tags yang memudahkan perambahan, pengindeksan, dan pemeringkatan mesin pencari, khususnya Google.

Bagaimana, tutorial di atas bisa diterapkan? Silakan share hasilnya di kolom komentar. Wasalam.  (www.romeltea.com).*

Sumber1, Sumber2, Sumber3

 

Blogger SEO Blogging SEO Friendly template blog seo Template Blog SEO Friendly tips SEO

Related Post

  1. author
    maz fauzi1 month agoReply

    Alhamdulillah berkat artikel ini, postingan saya ada yang pejwan hehehe
    terimakasih mas. lanjutkan untuk membuat konten yang bermanfaat

  2. author

    Mantap makasih ilmunya gan

  3. author
    Pak Datuk2 months agoReply

    Sudah saya pasang gan.Terima kasih

Leave a reply