Home » » Memberi Title Tag Untuk Link Judul Postingan Pada Artikel Terkait

Memberi Title Tag Untuk Link Judul Postingan Pada Artikel Terkait

Written By Heri on Jumat, 10 Januari 2014 | 13.52

Cara Memberi Title Tag Untuk Link Judul Postingan Pada Artikel Terkait

Memberi Title Tag Untuk Link Judul Postingan Pada Artikel Terkait - Artikel Terkait atau Related Articles biasanya terletak pada bagian bawah postingan yang memungkinkan pengunjung blog menuju pada sebuah postingan yang temanya masih berhubungan dengan postingan yang sedang dibaca, sangat bermanfaat untuk meningkatkan jumlah pegeviews blog kita. Namun, kali ini saya tidak akan membahas tentang cara membuat Artikel Terkait, melainkan tentang cara Memberi Title Tag Pada Link Artikel Terkait, berdaraskan pertanyaan Mas Andika (andixa90@gmail.com) kepada saya melalui via email.

Title Tag pada umumnya digunakan untuk meningkatkan relevansi dari sebuah gambar dan juga link pada sebuah mesin pencari. Menurut para master-master SEO, title tag juga adalah salah satu dari banyak penunjang unuk mengoptimlkan SEO. Penggunaan title tag pada pada link dalam struktur HTML di template blog, misalkan title tag untuk link judul postingan pada homepage blog, contoh potongan kodenya adalah seperti :
<b:if cond='data:post.title'>
      <h2 class='post-title entry-title'>
     <b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
...........
...........
...........
</b:if>

Kode biru diatas adalah link untuk sebuah postingan sedangkan yang berwarna kuning adalah judul postingannya. Nah kode yang warna merah adalah Title Tag untuk lniknya, dimana kode diatas menunjukkan bahwa Title Tag nya mengikuti judul postigan.

Lalu bagaimana cara memberikan Title Tag untuk link judul postingan pada artikel terkait atau related articles? biasanya, untuk link judul postingan pada artikel terkait/related articles di blog, strukturnya tidak dibangun dengan elemen HTML melainkan Javascript, maka dari itu yang harus kita lakukan adalah mencari kode pemanggil untuk link judul postingan pada kode Javascript artikel terkait kemudian baru kita tambahkan Title Tag. Caranya adalah sebagai berikut:

1. Silahkan masuk pada Edit HMTL di blog anda.

2. Kemudian cari kode Javascript artikel terkait blog anda, contoh kode Javascript artikel terkait pada template blog saya seperti di bawah ini.

Perlu diperhatikan, bahwa kode Javascript pada setiap tempate blog berbeda-beda. Maka jagan terpaku pada kode di bawah ini, tetapi carilah yang hampir sama atau mirip dengan kode Javascript dibawah ini.
<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("<h2>"+relatedpoststitle+"</h2>")}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>

3. Perhatikan kode yang berwarna biru diatas, itu adalah kode untuk link judul postingan pada artikel terkait dan kode yang berwarna kuning adalah judul postingannya. Sekarang kita akan memberikan Title Tag pada kode link tersebut. Caranya tambahkan kode berwawrna merah di bawah ini tepat disamping kode berwarna biru diatas.
title="'+relatedTitles[c]+'"

Maka penampakannya akan seperti berikut:
<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("<h2>"+relatedpoststitle+"</h2>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'" title="'+relatedTitles[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>

4. Jika sudah, silahkan save template anda.

Jadi nantinya setiap link judul postingan pada artikel terkait akan memiliki Title Tag, dimana Title Tag tersebut mengikuti atau berdasarkan judul postingannya. Untuk contoh atau demonya silahkan arahkan krusor mouse anda pada judul dalam bentuk link di artikel terkait blog saya ini.

Ok, sampai sini dulu tentang Cara Memberi Title Tag Untuk Link Judul Postingan Pada Artikel Terkait, semoga bermanfaat dan terimakasih.
Heriyanto .S.M -
Sharehovel Updated at : 13.52

21 comments

tutorialnya lengkapnya mas.. sy bacanya mesti pelan2 biar paham, maklum msh tahap belajar...

Iya mbak silahkan, hehe saya juga masih dalam tahap belajar kok mbak :D

Nah sob kalau setiap blog javascriptnya itu yang mumet..kalau buat saya yang masih belajar harus langsung tmpel
tapi ini saya pelajari dulu ya..hehe masih newbie sob

katanya ini bisa bikin tambah SEO ya :)

lumayan banyak juga ya mas kode script nya. hehehe agak memusingkan :D
tapi mengingat banyak manfaat nya, sepertinya harus dicoba nih agar blog bisa lebih seo friendly :)
thanks mas atas share nya ya :)

Iya siahkan mbak indah :D

Kata para master SEO sih begitu mas hehe :D

Iya mbak rin, saya juga masih kurang paham dengan Javascript, cuma tau seadanya. Ok mbak, sama-sama :D

Woouuhhh tittle tag itu ug seperti apa yuaa?
Aku belum ngertii
Siippp tutornyaa walau aku di pusingkan dengan javascript nya

belajar nya pelan-pelan mbak biar paham. Nanti lama-kelamaan pasti bisa kok edit-edit kode HTML di template blog :)
kalau nggak bisa, tinggal tanya aja sama mas heriyanto. Iya nggak mas? hehe :D

Mas, klo utk widget label tertentu, agar judul2 post nya muncul title tag nya gmn yak?
trims..

coba mba muya arahkan krusor mousenya pada link judul postigan artikel terkait diblog saya ini, nanti akan keluar tulisan, nah seprti ituah contoh title tag mba

betul sekali mba Rin, saya jga dlunya gak bisa, tapi karena sering baca dan beusaha memahami, akhirnya sedikit demi-sedikit mulai bisa, tapi saya juga masih belajar kok mbak, hehe lebih hebat mba Ririn pasti lebih jago

hmm biasanya widget label tertentu, juga menggunakan javascript mas, tapi scriptnya berbeda-beda. Kalau bisa, coba kirim script-nya di emai saya mas.

Tapi klo soal widget label tertentu, silahkan baca di artikel saya mengenai Widget Random Post SEO Friendly. Widget tersebut juga bisa dikelompokan sesuai label tertentu dan juga saya sudah menambahkan kode untuk title tag-nya. Selengkapnya baca disini mas

http://sharehovel.blogspot.com/2013/12/widget-random-post-dengan-thumbnail-seo-friendly.html

Oh iya mas, cek inbox email-nya, maaf baru bisa balas :D

Oh ternyata juga bisa related post dikasih title, hehe =D

Hehe yah kira-kira seperti begitulah mas :D

Soalnya saya pakai related post dengan thumbnail, jadi gak tau

Kalau pake thumbnail, agar lebih SEO thumbnailnya juga mesti ditambahain title tag dan alt tag kata para master SEO.

hmm tadi saya cek source kode blog mas Prisma dan sebenarnya kode artikel terkait diatas hampir mirip dengan kode artikel terkait yang ada di blog mas, tapi mungkin mas prisma tidak menemukannya, karena kode artikel terkait pada blog mas di upload ke tempat file hosting javascript oleh pembuat template yang mas Prisma gunkan, mungkin tujuannya agar templatenya fast loading.

Kode artikel terkait pada blog mas Prisma seperti dibawah ini:

<script> var defaultnoimage = "http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "Artikel Lainnya :"; </script>
<script src='​http://yourjavascript.com/1376828511/terkait-v8.js' type='text/javascript'></script>


Nah, link ​http://yourjavascript.com/1376828511/terkait-v8.js pada kode diatas, disituah letak script artike terkait di blog mas, coba mas buka link tersebut di tab baru, nanti kodenya akan muncul.

kalau masih bingung untuk memberikan title tag nya, kode diatas udh saya edit, saya tambahkan title tag pada link dan thumbnailnya dan saya uplaoad ulang ke google drive saya, silahkan mas Prisma ganti ​http://yourjavascript.com/1376828511/terkait-v8.js pada template mas dengan https://googledrive.com/host/0B6nuu-1cS17iRmsxR3ZORVo1b00

Maka jadinya nanti seperti:

<script> var defaultnoimage = "http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s100/picture_not_available.png"; var maxresults = 5; var splittercolor = "#d3d3d3 "; var relatedpoststitle = "Artikel Lainnya :"; </script>
<script src='​https://googledrive.com/host/0B6nuu-1cS17iRmsxR3ZORVo1b00' type='text/javascript'></script>

Wah sangat lengkap mas, hehe
Iya sebenarnya sudah tahu kalau menngunakan JS yang diupload, tapi sebenarnya belum berminat untuk memakainya.

Tapi berhungung penjelasan mas heriyanto saputra mandalasaya jadi tertarik dan sudah saya laksanakan :) :D

hmmm.. begitu ya mas

ntar2 pengen nyoba juga

jadi kayak tooltip gitu pas mouse hover di judul post ya sob. .

Lebih bagusan tooltip pastinya |o|

Silahkan berikan komentar, kritik atau saran anda