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 kepingan tema, yaitu cara mengatur atau memodifikasi template blog semoga lebih SEO Friendly.Waw, kayaknya anggun tuh ? yaa begitulah bos kuh. Jelas sangat bagus. Karena dengan kita mengedit template pada blog kita, template kita akan semakin banyak pengunjung organiknya. Pada kepingan modifikasi template ini, tentunya ada beberapa elemen-elemen lain yang harus di modifikasi. Karena Template blog itu menyerupai sebuah rumah yang ditopang oleh unsur-unsur lain, mirip kacanya, tiangnya, dindingnya, dan lain sebagainya.
Begitu juga dengan template blog, elemen lain pada template blog mirip Title Blog, Meta Tag, Heading Tag, dan breadcrumb. Ke empat elemen tersebut harus terpasang pada sebuah template. Karen kalau satu saja tidak ada, akan besar lengan berkuasa besar pada kekuatan SEO, yang otomatis akan menciptakan blog kita sulit untuk mendapat banyak pengunjung.
Baiklah, untuk mempersingkat waktu. Kita pribadi saja mulai tutorialnya, tapi pertama-tama silahkan buka dasbor blog kuh terlebih dulu, dan pribadi menuju edit HTML. Jika sudah, kita pribadi menuju tahap pertama:
#1.Cara Modifikasi Title Blog semoga Lebih SEO Friendly
Sebagaimana yang pernah jelaskan pada postingan sebelumnya, bahwa hal utama yang harus di perhatikan dalam sebuah template yakni tittle atau judulnya. Bagaimana cara kita memodifikasi judul semoga tampak menarik, dan tentunya berSEO Friendly.
Untuk memodifikasi judul semoga 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 instruksi 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 menggunakan template yang bukan bawaan blogger, biasanya struktur tittle tag pada template bos kuh sudah dimodifikasi. Ada baiknya bos kuh, cek dulu, kalau memang ada, maka biarkan saja. Tidak perlu menggantinya dengan instruksi yang saya berikan tadi.
#2. Cara Memodifikasi Meta Tag SEO Friendly
Langkah kedua ini yaitu memodifikasi Meta Tag semoga 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 instruksi <head>
3. pastekan struktur meta tag tersebut sehabis instruksi <head>
#3. Cara Memodifikasi Tag Heading Agar Lebih SEO Friendly
Langkah pertama yang harus bos kuh lakukan, ialah.
1. Cari instruksi 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 mirip ular berantai itu, merupakan kepingan dari header blog bos kuh, yang dimana berfungsi sebagai daerah untuk menampilkan nama blog dan deskripsi sebuah blog.
Sekarang, silahkan bos kuh perhatikan instruksi yang telah saya kasih stabillo warna kuning. Kode tersebut biasanya terisi dengan nama blog bos kuh. Sekarang cari instruksi tersebut pada blog bos kuh. Jika sudah ketemu, block dari <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'> hingga ke kepingan 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 mampu lanjut ? Baiklah, langkah selanjutnya yaitu:
3. cari instruksi yang sama persis mirip instruksi 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. sebab kalau hanya hingga kepingan ini, struktur tema kita akan mangalami kejanggalan. Nah, untuk menghilangkan kejanggalan itu, yaitu judul blog menjadi kecil. Dan hal tersebut, tidak sesuai dengan hukum SEO.
Dan adapun solusi untuk menghilangkan kejanggalan tersebut, yaitu dengan mencari instruksi di bawah ini pada template bos kuh:
5. Silahkan bos kuh cari instruksi 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 dapat ?
Apa bos kuh menggunakan template bukan dari bawaan blogspot ? Jika iya, memang tidak. Karena instruksi tersebut hanya ada pada template bawaan blogspot saja. hehe..
Jika bos kuh tidak menggunakan template bawaan blogspot, dan tidak menemukan instruksi tersebut, silahkan pribadi menuju kepingan ke empat ihwal memasang breadcrumb. Akan tetapi bagi yang bos kuh yang menggunakan template bawaan blogspot, dan menemukan instruksi 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 pribadi saja pada kepingan pada dasarnya ya bos kuh. Karena saya juga lelah.. hehe
1. Silahkan cari instruksi di bawah ini:
<b:includable id='main' var='top'>2. Jika ketemu, ganti dengan instruksi 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 bekerjsama sudah cukup. Akan tetapi tampilan breadcrumb kita akan sangat polos, dan adapun untuk menambahkan perniknya, yaitu dengan menambahkan instruksi 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 ihwal cara mengatur atau memodifikasi tema blog semoga lebih SEO Frindly, dan tentunya menjadi semakin RESPONSIVE.
Sampai jumpa di lain waktu bos kuh, saya akan kembali ngopi. mau ikut ? hehe