Belajar SEO

Search Engine Optimization (SEO) tutorial yang ditulis prothelon.com ini khusus buat yang baru belajar aja yah. Seperti biasa, tutorial SEO di sini ditulis dengan bahasa yang mudah dicerna. Harapannya adalah kamu bisa belajar SEO dengan mudah dan menyenangkan.

Buat kamu yang udah lumayan lama pake internet terutama punya web site sendiri, pastinya pernah denger istilah SEO, kan? SEO memang merupakan salah satu senjata pusaka yang sering digunakan untuk meningkatkan ranking web site kamu di search engine. Lha emang kenapa ko harus meningkatkan ranking web site di search engine? Gini lho….

Kamu tentunya udah belajar macam-macam di prothelon.com, mulai dari Tutorial HTML, Tutorial PHP, Tutorial MySQL dan sebagainya. Dengan pengetahuan itu, kamu bisa membuat sebuah web site statis maupun dinamis sesuai keinginan kamu. Sesudah web site kamu jadi dengan indahnya, kamu pasti bangga dengan hasil karya kamu itu dan merasa bahwa seluruh dunia akan segera melihat web site keren buatan kamu itu. Tapi tunggu dulu. Ada fakta tidak menyenangkan yang harus kamu ketahui sebelum berharap banyak pengunjung akan mendatangi web site kamu itu.

Faktanya adalah bahwa para pengunjung impianmu tidak akan datang sendiri!

Nyebelin kan? Udah bikin susah-susah, ndak ada yang lihat. Cape deh…

Tolong diingat, bahwa jumlah web site dan halamannya di internet itu buanyak buanget. Seumur hidup kamu ndak akan bisa ngedatengin semua satu persatu. Jadi jangan berharap ada keajaiban di mana tiba-tiba web site kamu kebanjiran pengunjung. Tidak ada seorangpun yang tahu tentang web site kamu kecuali kamu kasih tahu. Ini artinya: You have to work for that!

Jadi gimana dong…….

Memiliki web site sendiri memang menyenangkan, tapi kalau web site kita tidak pernah dikunjungi orang lain selain kita, buat apa kan. Nah, cara agar web site kita dikunjungi orang bisa dengan memperbanyak link masuk (bisa lewat blog atau web site lain), atau membuat agar web site kita berada di posisi atas dalam pencarian search engine.

Ingat, walaupun web site kita sudah diindeks oleh search engine, tapai kalau tidak bisa muncul di halaman pertama atau kedua hasil pencarian, maka percuma. Biasanya orang akan berhenti mencari pada halaman kedua kan? Kalau ndak nemu, pasti akan mencoba kata kunci lainnya.

Kalau web site kita sudah diindeks dengan baik, maka pengunjung akan mengalir dari search engine ke web site kita. Itu artinya, web site kita tidak seperti pulau terpencil di tengah lautan lagi. Dan makin banyak pengunjung berarti peluang untuk mendapatkan uang. Betul?

 

 

Nah, cara untuk menempatkan web site kita di hasil pencarian utama search engine inilah yang dinamakan Search Engine Optimization alias SEO alias Optimasi Mesin Pencari. Dengan ilmu ini, maka kita bisa mengusahakan agar web site kita ada di posisi puncak dari mesin pencari, pengunjung berdatangan, trafik mengalir, dan uang berdatangan. Impian kamu terwujud.

Dengan mempelajari SEO, maka kamu udah beranjak dari semula hanya “tukang” membuat web site menjadi “pebisnis”. Kamu mengubah keahlian kamu di bidang pemrograman web menjadi sebuah bisnis yang bukan tidak mungkin akan menjadi sumber penghasilan utama buat kamu. Kamu bisa mengubah web site kamu menjadi mesin uang. Yah, siapa tahu….

Ok, itu aja untuk pendahuluan tutorial SEO kita. Dalam tulisan selanjutnya, kita akan mulai belajar SEO perlahan-lahan dengan beberapa teknik dasar yang berguna. Di mana kamu akan mulai membangun batu bata impian kamu setahap demi setahap menuju sebuah web site yang ramai dan terkenal.

Mudah-mudahan SEO tutorial ini berguna buat kamu yang pengen mulai belajar SEO.

Mengubah Tampilan Text HTML

Buat kamu yang baru belajar HTML, mungkin penasaran bagaimana cara mengubah huruf atau teks HTML menjadi tebal atau membuatnya menjadi miring. Tampilan huruf seperti ini sangat penting untuk dilakukan, misalnya pada saat kita perlu memberikan penekanan pada kata-kata tertentu yang kita anggap penting, pada umumnya kita menggunakan huruf tebal, atau pada saat menggunakan istilah asing, maka kita perlu membuatnya menjadi miring (atau istilah lainnya italic). Jika iya, maka tutorial HTML kali ini pas banget buat kamu. Gampang kok untuk mengubah tampilan huruf seperti itu.
Seperti yang sudah kamu ketahui dari tutorial elemen HTML ini, kamu pastinya udah tahu kalau HTML menggunakan tag untuk semua perintah yang dilakukannya. Nah, untuk mengubah tampilan dan format teks, HTML juga menggunakan tag-tag seperti <b> (untuk menebalkan huruf) dan <i> (untuk menampilkan huruf miring) untuk menampilkan teks atau huruf sesuai dengan kebutuhan kita.
Berikut beberapa tag untuk mengubah tampilan huruf yang sering digunakan:

Tag	Deskripsi
<b>	Menebalkan huruf
<i>	Menampilkan huruf miring
<big>	Menampilkan huruf dalam ukuran besar
<small>	Menampilkan huruf dalam ukuran kecil
<strong>	Mirip dengan <b>, menampilkan dengan tebal
<sub>	Subscript (Tulisan kecil di bawah, misalnya untuk menulis rumus kimia)
<sup>	Superscript (Yang ini kecil di atas, misalnya menulis kuadrat)
<u>	Menulis huruf bergaris bawah.

Bagaimana contoh pemakaiannya? Berikut ini contoh untuk menampilkan tulisan tebal dan miring:

Belajar HTML

Menulis dokumen apapun pasti memerlukan paragraf. Mari kita pelajari tag HTML yang digunakan untuk membuat sebuah paragraf HTML yaitu tag <p>.
Kita menggunakan tag <p> untuk membuat sebuah paragraf HTML baru.
Saat kita menggunakan tag ini, dia akan menambahkan sebuah baris kosong di atas dan di bawah teks paragraf yang kita tulis. Baris-baris kosong tersebut adalah baris yang menandakan sebuah paragraf HTML dan memisahkan paragraf tersebut dari paragraf-paragraf yang lainnya.
Dan…tentu saja kita harus menutup paragraf HTML kita dangan pasangannya yaitu tag </p>.
Contoh kode HTML:

?

1 2	<p>Ini adalah sebuah contoh paragraf yang panjang dan menarik, sehingga kalimat ini tidak ada isinya sama sekali. <p>

Kamu juga bisa melakukan proses perataan pada paragraf yang kamu bikin. Hal ini sangat mudah dilakukan, yaitu dengan menambahkan atribut HTML align.
Contoh tag di bawah ini akan membuat paragraf kamu rata kiri kanan.

?

1	<p align="justify">Ini adalah paragraf yang rata kanan dan rata kiri.</p>

Kamu bisa ganti-ganti isi atribut align tersebut dengan kata center untuk membuat paragraf menjadi di tengah, left rata kiri, dan right untuk rata kanan.

LInk HTML Pentin!!!

Mudahnya gini, sebuah link HTML adalah sebuah alamat yang merujuk ke dokumen atau alamat lainnya di Internet. Menurut saya sebenarnya konsep link HTML inilah yang akhirnya benar-benar membuat web menjadi sangat bermanfaat dan akhirnya menjadi sangat besar seperti sekarang ini.
Orang sangat mudah merujuk ke referensi lain yang semuanya tersedia online. Bener-bener jenius :).
Jadi, pelajari baik-baik ya…
Ndak usah pake contoh ya , kan udah banyak banget di Internet. Link HTML itu ya tempat kamu main klak klik itu lah. Yuk kita pelajari lebih lanjut.
Hyperlinks, Anchors, dan Links
Dalam istilah web, hyperlink adalah referensi (sebuah alamat) ke sumber-sumber informasi lain di Internet. Hyperlink biasanya merujuk ke sebuah halaman HTML, sebuah gambar, file suara, movie, dll.Sedangkan anchor (bahasa Indonesianya Jangkar) adalah istilah yang digunakan untuk mendefinisikan tujuan hyperlink dalam sebuah dokumen.
Jadi gini, alamat halamannya ditunjukkan oleh hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.
Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.
Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.
Bikin Link HTML
Sintaks Link:

?

1	<a href="/caramembuatwebsite/url">Teks Link</a>

Perhatikan, tag HTML pembuka berisi atribut link tersebut.
Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.
Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.
Atribut href
Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.
Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah web site yang saya kelola juga yaitu kursus-online.com:

?

1 2	<a href="http://www.kursus-online.com/">Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>

Kode tersebut akan ditampilkan seperti ini. Sok atuh dicoba klik biar kerasa.
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Atribut target
Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.
Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.
Berbeda dengan kode sebelumnya yang membuka web site kursus-online.com di jendela yang sama, kode ini akan membuka web site kursus-online.com pada sebuah jendela baru:

?

1 2 3

<a href="http://www.kursus-online.com/" target="_blank"> Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit?. Klik di sini aja!</a>

Sok di klik link di bawah ini biar tahu bedanya:
Pengen belajar bikin web sambil Praktek sekalian bisa dapet duit? Klik di sini aja!!
Attribute name
Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.
Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.
Cara membuat sebuah anchor:

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

?

1	<a name="label">Apapun</a>

Nah, link yang menuju ke halaman itu bikinnya gini:

?

1	<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor
Contoh:
Sebuah anchor dalam dokumen HTML:

?

1	<a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:

?

1	<a href="#top">Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:

?

1 2	<a href="http://www.prothelon.com/mambo/contoh.htm#top"> Kembali ke halaman utama paling atas</a>

Nah, kalau mau lihat bagaimana sebuah link anchor bekerja, klik Kembali ke atas ini untuk menuju ke bagian paling atas dari halaman ini.
Catatan penting dan tips yang pastinya akan berguna buat kamu
Ingat untuk selalu menambahkan garis miring di akhir sub folder link kita.
Jika link kita bentuknya seperti ini:
href=”http://www.prothelon.com/mambo”,
maka kamu akan membuat 2 buah permintaan http ke server, karena server akan menambahkan garis miring dan membuat alamat yang kita minta tadi menjadi seperti ini:
href=”http://www.prothelon.com/mambo/”
Nah, dengan menambahkan garis miring di akhir sub folder, kita sudah menghemat resource di server.
Kamu bisa menggunakan Anchor untuk membuat daftar isi di awal sebuah dokumen yang panjang.
Kalau browser tidak bisa menemukan anchor yang kita tentukan, maka secara otomatis akan menuju ke bagian paling atas dari dokumen. Tanpa error.
Nah, itu adalah materi belajar HTML mengenai link.
Jika ingin mempelajari tutorial lainnya, silahkan klik link tutorial lain di menu utama sebelah kiri.
Kalau bosen belajar cuman baca doang kaya gini, coba aja ke kursus-online.com. Di sana kamu bisa dapet materi yang sangat lengkap tentang bikin web, bisa belajar langsung praktek dengan metode 4 langkah mudah bisa bikin web, plus ada peluang belajar sambil dapet penghasilan tambahan.

Related Posts:

Etintas Karakter HTML

Setelah sebelumnya kita sudah belajar tentang atribut HTML, sekarang kita akan belajar cara menampilkan karakter khusus dalam HTML dengen entitas karakter HTML.
Beberapa karakter khusus seperti karakter <, punya arti khusus dalam HTML (sebagai tanda tag HTML), karena itu kamu tidak akan bisa menggunakannya sebagai teks dalam arti dituliskan langsung sebagai < dalam kode HTML kamu.
Untuk menampilkan tanda lebih kecil (<) dalam HTML, kamu perlu belajar tentang Entitas Karakter HTML.
Entitas karakter
Beberapa karakter memiliki arti khusus dalam HTML, seperti tanda lebih kecil (<) yang mendefinisikan awal dari sebuah tag HTML. Kalau kita ingin agar browser menampilkan tanda lebih kecil itu (<), kita harus menyisipkan entitas karakter dalam kode HTML kita.
Entitas karakter memiliki 3 komponen: sebuah tanda dan (&), nama entitas atau sebuah # yang diikuti nomor entitas dan diakhiri dengan tanda titik koma (;).
Untuk menampilkan tanda lebih kecil dalam halaman HTML kita, maka kita harus menuliskan : &lt; atau &#60;
Keuntungan menggunakan nama dibandingkan nomor adalah bahwa nama lebih mudah untuk diingat. Kekurangannya adalah bahwa tidak semua browser mendukung nama-nama entitas yang baru, namun demikian hampir semua browser mendukung nama entitas standar.
Catatan: entitas bersifat case sensitif.


Spasi berurutan
Entitas karakter yang mungkin akan paling sering kamu pakai adalah spasi.
HTML akan menghilangkan spasi dalam teks HTML kamu. Kalau kamu menuliskan 10 spasi pada kode HTML kamu, maka HTML akan menghapus 9 spasi. Nah, untuk menambahkan spasi pada dokumen HTML kamu, gunakan entitas karakter &nbsp;
Beberapa entitas karakter yang sering dipakai:

Hasil	Penjelasan	Nama Entitas	Nomor Entitas
	Spasi	 	 
<	Kurang dari	&lt;	&#60;
>	Lebih dari	&gt;	&#62;
“	Tanda kutip	&quot;	&#34;
‘	Kutip tunggal	&apos; (Ndak berlaku di IE)	&#39;
&	Dan	&amp;	&#38;

Beberapa komentar yang ada meminta agar tutorial ini ditambah dengan contoh agar lebih jelas. Nah, berikut ini contoh untuk memperjelas tentang apa yang dimaksud dengan entitas karakter.
Kasusnya sangat mudah kok. Kita kan udah tahu, kalau yang namanya HTML itu menggunakan tag, iya kan? Salah satu contoh adalah tag <b> </b>untuk menebalkan huruf.
Sekarang bayangkan kalau suatu ketika kamu diminta untuk menulis tutorial tentang HTML dan kebetulan akan menulis tentang tag HTML yang berfungsi untuk menebelkan huruf. Misalnya kamu pengen baris berikut tampil di tutorial kamu (perhatikan, kamu ingin agar tag <b> dan </b> muncul dalam baris tersebut).
Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag <b> dan </b>
Nah, coba pikirkan, bagaimana menuliskan bari sederhana ini tanpa entitas karakter. Ndak bisa kan? Misalnya kamu menulis seperti ini:

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

?

1 2	Untuk menebalkan huruf seperti kata <b>tebal</b> ini, kamu memerlukan tag <b> dan </b>

Apa yang terjadi? Browser akan menampilkan kalimat berikut:
Untuk menebalkan huruf seperti kata tebal ini, kamu memerlukan tag dan
Apa bedanya? Ya…tag <b> dan </b> tidak muncul, sebagai gantinya, kata “dan ” akan tampil dalam huruf tebal.
Untuk membuat agar tag <b> dan </b> dapat muncul, kamu memerlukan entitas karakter, sehingga kamu harus menuliskan kode HTML menjadi seperti ini:

?

1 2	Untuk menebalkan huruf seperti kata <b>tebal</b> ini, kamu memerlukan tag &lt;b&gt; dan &lt;/b&gt;

Perhatikan, tanda < saya ganti dengan entitas karakter &lt;, sedangkan tanda > saya ganti dengan &gt;.
Lhah … nambah lagi tuh pertanyaan di komentar. Gini pertanyaannya, terus gimana dunks cara kita menampilkan &gt; biar yang keluar bukan >.
Mudah aja, kita bisa gunakan &amp di depannya untuk meng-escape tanda & sehingga kamu bisa tulis seperti ini &amp; &gt; (tanpa spasi di antara &amp; dan &gt;. Saya terpaksa menuliskan menggunakan spasi, karena tidak mungkin saya tuliskan tanpa spasi.)
Gampang kan? Ok, mudah-mudahan contoh ini bisa meningkatkan pemahaman kamu tentang apa yang dimaksud dengan entitas karakter ini.
Nah, kamu udah belajar HTML cukup jauh saat ini. So, jangan lupa kembali lagi ke Prothelon.com tempat di mana tutorial HTML terbaik tersedia secara gratis.
Kalau udah menguasai HTML dengan cukup baik, saya sarankan kamu mulai belajar PHP, bisa yang gratis atau yang lebih canggih lengkap dengan tempat praktek online.

Atribut HTML

Setelah sebelumnya kita belajar tentang Tag HTML dasar yang penting maka kita sekarang mencoba untuk melihat kemampuan ekstra lain dari tag HTML. Kemampuan tambahan ini diperoleh melalui penggunaan atribut tag HTML. Atribut memungkinkan informasi tambahan pada elemen HTML.
Atribut Tag HTML
Tag HTML dapat memiliki atribut. Atribut memungkinkan informasi tambahan pada elemn HTML.
Atribut selalu memiliki pasangan nama/nilai seperti ini: nama=”nilai”.
Atribut selalu dicantumkan pada awal tag elemen HTML.
Contoh Atribut 1:
<h1> mendefinisikan awal sebuah judul.
<h1 align=”center”> memiliki informasi tambahan tentang perataan baris.
Contoh Atribut 2:
<body> mendefinisikan badan/isi halaman HTML kita.
<body bgcolor=”red”> akan membuat background layar menjadi merah.
Contoh Atribut 3:
<table> mendefinisikan sebuah tabel HTML (nanti kita pelajari lebih lanjut).
<table border=”1”> memiliki tambahan informasi mengenai ketebalan garis pada tabel.
Selalu Gunakan Tanda Kutip pada Nilai Atribut
Nilai atribut seharusnya selalu diapit oleh tanda kutip. Tanda kutip ganda paling sering digunakan, tapi sebenarnya tanda kutip tunggal juga boleh ko.
Pada beberapa situasi tertantu yang sangat jarang terjadi, seperti misalnya saat nilai atribut itu sendiri berisi tanda kutip, maka kamu bisa gunakan tanda kutip tunggal.
Contohnya kayak gini:
nama=’Uzumaki “Jurus Seribu Bayangan” Naruto’
Ok. Next, kita akan belajar tentang entitas karakter HTML, jangan lupakan juga alasan mengapa kita perlu belajar HTML.