Tips blogging kali ini tentang Cara Membuat Template Blog SEO Friendly, yaitu cara mengedit atau mengubah template blog default/bawaan Blogger tema Sederhana (Simple), menjadi seo friendly, responsive (mobile-friendly), dan fast loading.
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)
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.
4. Silakan atur-atur di sini, mulai background, jenis huruf (sebaiknya pilih semuanya Arial atau Roboto), lebar template, dan lainnya.
Untuk Layout, pilih yang dua kolom dan satu 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
Klik Off seperti gambar di atas. Save!
2. Klik Tema > klik Edit HTML
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:
9. Save! Simpan template.
Mengubah template bawaan Blogger menjadi ramah seluler (mobile-friendly) sudah selesai. Langkah berikutnya adalah lakukan setting dengan menonaktifkan tema mobile bawaan Blogger.
10. Klik Tema > lakukan setting seperti gambar ini untuk menonaktifkan template mobile bawaan Blogger.
Kini template blog sudah mobile-friendly. Silakan cek di Mobile-Friendly Test. Hasilnya harus seperti ini:
Memasang Auto Read More
Template Simple yang sudah dimodifikasi tadi, masih menampilkan artikel penuh di halaman depan (homepage). Mari kita ringkas.
Di dunia blogging, istilahnya adalah “membuat auto readmore”, agar tak usah klik “Insert jump break” saatu menulis postingan.
Mari kita pasang kode auto read more itu, untuk meringkas tulisan di halaman depan blog menjadi gambar, judul, dan ringkasan, seperti ini:
1. Tema >Edit HTML
2. Copas kode berikut ini di atas kode </head>
<b:if cond=’data:blog.pageType != "item"’> <b:if cond=’data:blog.pageType != "static_page"’> <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 == "static_page"’>
<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 != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<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’/>
Tepat 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 == "item"’><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 alias menjadi Auto Read More.
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!
Bubar bubar…!!! Eh, engke heula. Tuggu dulu. Masih ada lanjutannya!
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). Tag kata kunci sudah tidak berlaku lagi. Sudah dicuekin sama Google 🙂
Berikut ini kode meta tag SEO Friendly dan cara memasangnya:
1. Klik Tema > Edit HTML
2. Hapus kode berikut ini yang ada di bagian bawah kode <head>:
<title><data:blog.pageTitle/></title>
3. Ganti dengan kode ini:
<b:if cond=’data:blog.pageType == "index"’> <title>
<data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> – <data:blog.title/></title>
</b:if>
Keterangan: Meta tags di atas akan menjadikan halaman dalam (single post) menjadi Judul Tulisan diikuti Nama Blog di hasil pencarian Google dan di Address Bar.
4. Save! 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.
Masih ada dua langkah dasar lagi jika template blog Anda ingin SEO-nya lebih “powerful”, yaitu dengan menambahkan breadcrumb dan related post.
Memasang Breadcrumbs
Breadcrumb adalah navigasi menu sekaligus internal link di atas judul tulisan. Biasanya terdiri dari link ke Home > Label > Judul Postingan.
Tah, ieu breadcrumbs teh, jiga dina gambar:
1. Klik Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>
.breadcrumb {margin-bottom: 15px;}
.breadcrumb, .breadcrumb a, .breadcrumb a:hover {font-size: 13px;color: #777;}
3. Cari kode <h1 class=’entry-title’> atau <h2 class=’entry-title’>
4. Copas kode berikut ini tepat di atasnya:
<b:if cond=’data:view.isPost’>
<b:loop values=’data:posts’ var=’post’>
<div class=’breadcrumb’ itemscope=’itemscope’ itemtype=’https://schema.org/BreadcrumbList’>
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<a expr:href=’data:blog.homepageUrl.canonical’ title=’Home’ itemprop=’item’>
<meta content=’1′ itemprop=’position’/>
<span itemprop=’name’>Home</span></a>
</span>
<b:if cond=’data:post.labels’>
<b:loop index=’num’ values=’data:post.labels’ var=’label’> &nbsp;›&nbsp;
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<meta expr:content=’data:num+2′ itemprop=’position’/>
<a expr:href=’data:label.url.canonical’ expr:title=’data:label.name’ itemprop=’item’>
<span itemprop=’name’><data:label.name/></span>
</a>
</span>
</b:loop>
<b:else/>
&nbsp;›&nbsp; Tidak Ada Kategori
</b:if>
</div>
</b:loop>
</b:if>
5. Simpan Template!
Cara Lain (Recommended)
Jika cara di atas sulit atau gagal, berikut ini cara lain memasang breadcrumbs di Blogger:
1. Copas kode berikut ini di atas kode ]]></b:skin>
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}
2. Cari kode <b:includable id=’comment-form’ var=’post’>
3. Copas kode berikut ini di atasnya:
<b:includable id=’breadcrumb’ var=’posts’>
<b:if cond=’data:blog.pageType == "item"’>
<b:loop values=’data:posts’ var=’post’>
<b:if cond=’data:post.labels’>
<div class=’breadcrumbs’ itemscope=’itemscope’ itemtype=’https://schema.org/BreadcrumbList’>
<svg viewBox=’0 0 24 24′><path d=’M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z’ fill=’#000000’/></svg>
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<a expr:href=’data:blog.homepageUrl’ title=’Home’ itemprop=’item’>
<span itemprop=’name’>Home</span></a>
<meta content=’1′ itemprop=’position’/>
</span>
<svg viewBox=’0 0 24 24′><path d=’M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z’ fill=’#000000’/></svg>
<b:loop index=’num’ values=’data:post.labels’ var=’label’>
<span itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’>
<a expr:href=’data:label.url + "?&max-results=16"’ expr:title=’data:label.name’ itemprop=’item’>
<span itemprop=’name’><data:label.name/></span>
</a>
<meta expr:content=’data:num+2′ itemprop=’position’/>
</span>
<b:if cond=’data:label.isLast != "true"’>
<svg viewBox=’0 0 24 24′><path d=’M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z’ fill=’#000000’/></svg>
</b:if>
</b:loop>
<svg viewBox=’0 0 24 24′><path d=’M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z’ fill=’#000000’/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>
4. Cari lagi kode <b:includable id=’main’ var=’top’>
5. Tambahkan kode ini tepat di bawahnya:
<b:include data=’posts’ name=’breadcrumb’/>
6. Save!
Memasang Related Post
Related Posts atau Posting Terkait adalah daftar judul postingan yang setopik atau satu kategori/label dengan tulisan yang sedang dibuka. Posisinya di bawah artikel. Macam ni:
Widget ini bisa meningkatkan pageviews dan bagus buat SEO.
1. Copy & Paste kode berikut ini di atas kode ]]></b:skin>
#related-posts{float:left;width:100%;margin:10px;padding:1px 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://2.bp.blogspot.com/-EcBIblBtYTQ/TqALuRS_IzI/AAAAAAAAAx0/E-vzWTTOgXs/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}
3. Cari kode </head>
4. Copas kode berikut ini di atasnya:
<script type=’text/javascript’>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type=’text/javascript’>
var relatedpoststitle="Related Posts";
</script>
<script type=’text/javascript’>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel==”alternate”){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write(“<h3>”+relatedpoststitle+”</h3>”)}document.write(“<ul>”);while(b<relatedTitles.length&&b<20&&b<maxresults){document.write(‘<li><a href=”‘+relatedUrls[c]+’”>’+relatedTitles[c]+”</a></li>”);if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write(“</ul>”);relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
5. Cari kode <div class=’post-footer’> atau <data:post.body/>
6. Copas kode berikut ini di atas kode <div class=’post-footer’> atau <data:post.body/> yang kedua:
<b:if cond=’data:blog.pageType == "item"’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<script expr:src=’"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"’ type=’text/javascript’/></b:loop>
<script type=’text/javascript’>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<div class=’clear’/>
<div style=’clear: both;’/>
</b:if>
7. Save Template!
Jika ingin related post berupa judul plus gambar, silakan buka Cara Memasang Related Post Gambar Thumbnail Responsive.
Demikian cara membuat template blog Blogger menjadi Responsive dan leboh SEO Friendlly. Semoga bisa diterapkan di blog Anda.
Update cara membuat template blog responsive ada di Blog Romeltea.
Bagaimana, tutorial di atas bisa diterapkan? Silakan share hasilnya di kolom komentar. Wasalam. (www.romeltea.com).*
Sumber1, Sumber2, Sumber3, Sumber4