Cara Mengatur Template Agar Lebih SEO Friendly
Selamat sore bos kuh, di sore hari yang dimana matahari mulai condong ke Barat ini, saya akan membagikan satu tutorial penting. Wah, penting ? Sepenting apa sih ? Jelas sangat penting, hehe. Karena pada kesempatan kali ini saya akan masuk pada bagian tema, yaitu cara mengatur atau memodifikasi template blog agar lebih SEO Friendly.Waw, kayaknya bagus tuh ? yaa begitulah bos kuh. Jelas sangat bagus. Karena dengan kita mengedit template pada blog kita, template kita akan semakin banyak pengunjung organiknya. Pada bagian modifikasi template ini, tentunya ada beberapa elemen-elemen lain yang harus di modifikasi. Karena Template blog itu ibarat sebuah rumah yang ditopang oleh unsur-unsur lain, seperti kacanya, tiangnya, dindingnya, dan lain sebagainya.
Begitu juga dengan template blog, elemen lain pada template blog seperti Title Blog, Meta Tag, Heading Tag, dan breadcrumb. Ke empat elemen tersebut harus terpasang pada sebuah template. Karen jika satu saja tidak ada, akan berpengaruh besar pada kekuatan SEO, yang otomatis akan membuat blog kita sulit untuk mendapatkan banyak pengunjung.
Baiklah, untuk mempersingkat waktu. Kita langsung saja mulai tutorialnya, tapi pertama-tama silahkan buka dasbor blog kuh terlebih dulu, dan langsung menuju edit HTML. Jika sudah, kita langsung menuju tahap pertama:
#1.Cara Modifikasi Title Blog agar Lebih SEO Friendly
Sebagaimana yang pernah jelaskan pada postingan sebelumnya, bahwa hal utama yang harus di perhatikan dalam sebuah template adalah tittle atau judulnya. Bagaimana cara kita memodifikasi judul agar tampak menarik, dan tentunya berSEO Friendly.
Untuk memodifikasi judul agar lebih seo, caranya yaitu:
1. Cari kode <title><data:blog.pageTitle/></title> pada template blog bos kuh.
2. Jika sudah ketemu, langsung hapus. Kemudian ganti dengan kode struktur tema di bawah ini:
<!-- SEO Title Tag --><b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if><b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> | <data:blog.title/></title></b:if><b:if cond='data:blog.pageType == "archive"'><title>Archive for <data:blog.pageName/></title></b:if><b:if cond='data:blog.pageType == "static_page"'><title><data:blog.pageName/></title></b:if><b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if><b:if cond='data:blog.pageType == "error_page"'><title>Page Not Found</title></b:if><b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if> C A T A T A N ! : Kalau bos kuh memakai template yang bukan bawaan blogger, biasanya struktur tittle tag pada template bos kuh sudah dimodifikasi. Ada baiknya bos kuh, cek dulu, jika memang ada, maka biarkan saja. Tidak perlu menggantinya dengan kode yang saya berikan tadi.
#2. Cara Memodifikasi Meta Tag SEO Friendly
Langkah kedua ini yaitu memodifikasi Meta Tag agar lebih SEO Frindly. Nah, silahkan bos kuh salin terlebih dahulu struktur meta tag di bawah ini:
<!-- SEO Meta Tag --><b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if> <b:if cond='data:blog.pageType == "item"'><meta expr:content='data:blog.pageName' name='keywords'/></b:if><b:if cond='data:blog.pageType == "index"'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if><b:if cond='data:blog.pageType == "archive"'><meta content='noindex,nofollow' name='robots'/></b:if><b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if> 2. Kemudiancari kode <head>
3. pastekan struktur meta tag tersebut setelah kode <head>
#3. Cara Memodifikasi Tag Heading Agar Lebih SEO Friendly
Langkah pertama yang harus bos kuh lakukan, ialah.
1. Cari kode di bawah ini pada template blog bos kuh:
<b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url("" + data:sourceUrl + ""); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<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:widget> Nah, Kode yang sangat-sangat panjang seperti ular berantai itu, merupakan bagian dari header blog bos kuh, yang dimana berfungsi sebagai tempat untuk menampilkan nama blog dan deskripsi sebuah blog.
Sekarang, silahkan bos kuh perhatikan kode yang telah saya kasih stabillo warna kuning. Kode tersebut biasanya terisi dengan nama blog bos kuh. Sekarang cari kode tersebut pada blog bos kuh. Jika sudah ketemu, block dari <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'> sampai ke bagian paling bawah, yaitu </b:widget>
2. Jika sudah, ganti semua dengan struktur tag tittle di bawah ini:
<b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url("" + data:sourceUrl + ""); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<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:widget> #Fyuuuuhhh... Lelah juga ya. Hehe. Gimana bos kuh, masih sanggup lanjut ? Baiklah, langkah selanjutnya yaitu:
3. cari kode yang sama persis seperti kode dibawah ini:
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if> <b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<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'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if> Bagaimana bos kuh, lelah yaa ? hehe
Sabar yaa bos kuh, tinggal satu langkah lagi. karena jika hanya sampai bagian ini, struktur tema kita akan mangalami kejanggalan. Nah, untuk menghilangkan kejanggalan itu, yaitu judul blog menjadi kecil. Dan hal tersebut, tidak sesuai dengan aturan SEO.
Dan adapun solusi untuk menghilangkan kejanggalan tersebut, yaitu dengan mencari kode di bawah ini pada template bos kuh:
5. Silahkan bos kuh cari kode dibawah ini:
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
} Gimana bos kuh, kodenya ketemu ? Apa, tidak ? Ko bisa ?
Apa bos kuh memakai template bukan dari bawaan blogspot ? Jika iya, memang tidak. Karena kode tersebut hanya ada pada template bawaan blogspot saja. hehe..
Jika bos kuh tidak memakai template bawaan blogspot, dan tidak menemukan kode tersebut, silahkan langsung menuju bagian ke empat tentang memasang breadcrumb. Akan tetapi bagi yang bos kuh yang menggunakan template bawaan blogspot, dan menemukan kode di atas.
6. Ganti, dengan struktur tema dibawah ini
.Header h1.title,.Header p.title {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1.title a,.Header p.title a {
color: $(header.text.color);
} 7. Klik simpan
#4. Cara Memasang breadcrumb Agar Lebih SEO Friendly
Bentar bos kuh, saya tarik napas dulu. Lumayan lelah.. hehe.
Kita langsung saja pada bagian intinya ya bos kuh. Karena saya juga lelah.. hehe
1. Silahkan cari kode di bawah ini:
<b:includable id='main' var='top'>2. Jika ketemu, ganti dengan kode di bawah ini:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<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'><span itemprop='title'>Home</span></a></span> » <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + "?&max-results=8"' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != "true"'> » </b:if> </b:loop> » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Uncategories</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> » <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/> langkah di atas sebenarnya sudah cukup. Akan tetapi tampilan breadcrumb kita akan sangat polos, dan adapun untuk menambahkan perniknya, yaitu dengan menambahkan kode dibawah ini.
3. Salin Kode di bawah ini:
.breadcrumbs {
font-size: 11px;
color: #666;
padding: 10px 0px;
margin: 10px 0px 20px;
border-bottom: 1px solid #ddd;
} 5. Simpan Tema
6. S E L E S A I .....
Hiyuuuuuuuuuuuuuuuuuuuuuuuuuuuuhhhhhhhhhhhh..... sangat--sangat dan sangat melelahkan yaaa bos kuh, Nah, itulah tutorial panjang tentang cara mengatur atau memodifikasi tema blog agar lebih SEO Frindly, dan tentunya menjadi semakin RESPONSIVE.
Sampai jumpa di lain waktu bos kuh, saya akan kembali ngopi. mau ikut ? hehe
Post a Comment for "Cara Mengatur Template Agar Lebih SEO Friendly"