Iklan Banner
banner 468 pixel

Info Bisnis Online

Selasa, 01 September 2009

Meningkatkan blog speed

Salah satu teknik seo untuk membantu blog Anda adalah meningkatkan blog speed atau kecepatan blog Anda untuk diakses pengunjung. Semakin cepat waktu muat (loading time), semakin bagus indexing untuk blog Anda. Walau tidak mutlak, tapi ini dapat menjadi satu faktor pendukung dalam optimisasi blog.

Search Engine menyukai speed blog


Saya ibaratkan Search Engine (SE) adalah jasa pengantar pesanan makanan. Anda sebagai pemesan makanan akan memesan dengan mengetik di search box. Kemudian sang pelayan akan mengambil pesanan itu dari gudang berdasarkan kiriman dari para supplier.

Seperti biasanya, pemesan yang cerewet akan marah jika pelayan menyajikan barang pesanan yang jelek. Maka dari itu si pelayan ini akan menggunakan teknologi canggih untuk bisa menyajikan pesanan yang paling sesuai dengan permintaan.

Apa yang terjadi..

Jika Anda disodori alamat website oleh si pelayan, dan ketika Anda membukannya, Anda harus menunggu bermenit-menit untuk membuka halaman homepage sekalipun Anda menggunakan teknologi Broadband internet - apalagi kalo pake Dial-up.

Sama seperti Anda, SE juga menyukai website yang cepat diakses atau enteng untuk diload. Selain konten yang relefan dan popularitas link, waktu muat juga menjadi pertimbangan bagi SE. Seandainya situs A dan Situs B memiliki bobot konten dan popularitas yang sama, namun waktu muat halaman akan membedakan mereka. Jika situs A lebih cepat dimuat, niscaya ia akan diletakkan pada urutan di atas situs B.

Speed Blog - Blog yang cepat diakses


Jika blog Anda ingin disukai pengunjung dan juga SE, pastikan blog Anda hanya membutuhkan waktu singkat dalam proses loadingnya. Tidak ada pengunjung yang mau menunggu lama-lama. Maka untuk mengoptimisasi blog agar dapat berakselerasi lebih cepat, Anda harus mempertimbangkan berbagai faktor berikut:

Images atau Gambar-gambar pendukung

Tampilan blog tentu akan lebih cantik dan menawan jika dipoles dengan images yang bagus dan menarik. Anda bisa mendapatkan banyak template blog dengan tampilan yang indah. Yang perlu Anda perhatikan adalah, dari mana sumber gambar yang akan ditampilkan dalam blog Anda. Server yang menyimpan gambar-gambar pada blog Anda sangat mempengarui waktu loading.

Tidak akan menjadi masalah jika server yang menyimpan gambar-gambar Anda adalah server yang baik, responsif dan dari layanan terbaik. Tapi akan jadi masalah jika server penyimpan gambar itu sering mengalami down atau sangat terbatas layanannya.

Solusi untuk hal ini adalah, gunakan server terbaik untuk menyimpan gambar-gambar Anda. Blog yang menampilkan banyak gambar dari banyak situs tentu akan membutuhkan waktu lebih lama dibanding blog yang menampilkan gambar dari 1 lokasi penyimpanan.

Sebagai contoh, Anda menampilkan 10 banner dari 1 lokasi server akan menjadikan blog Anda lebih cepat diload dari pada Anda menampilkan 10 banner dari 10 situs berbeda.

Gunakan layanan seperti blogger (album web Picassa) untuk menyimpan gambar-gambar seperti banner-banner iklan.

Format images

Dua macam gambar/images yang berdimensi sama persis bisa memiliki ukuran file yang berbeda. Sebagai contoh, gambar dengan format JPEG akan lebih besar dari pada gambar berformat PNG atau GIF. Jika tidak terlalu banyak warna yang ditampilkan oleh gambar tersebut, maka sebaiknya Anda mengubah gambar itu ke dalam format yang lebih kecil. Anda bisa menggunakan program pengolah gambar seperti Photoshop untuk mengopres file-file Anda menjadi lebih kecil.

Javascript - Script Iklan PPC

Banyak blog menampilkan iklan dari layanan periklanan online dengan menyisipkan kode Javascript. Anda harus perhatikan ini. Kadang situs yang menampilkan iklan PPC juga dapat mengalami keterbatasan bandwidth pada servernya. Script-script periklanan PPC ini dapat memperlambat waktu muat blog Anda. Untuk itu pertimbangkanlah untuk memilih layanan PPC yang memiliki server yang baik lagi cepat.

Mengatur CSS (Cascading Style Sheet)

Menyerderhanakan parameter CSS dapat membantu meningkatkan kecepat akses blog. Banyaknya karakter dalam parameter CSS mempengaruhi besar ukuran file dalam bit. Semakin banyak dan panjang parameter dalam CSS dapat menambah besar ukuran file halaman web/blog Anda.

Contoh penyederhanaan CSS

div.sidebar {
   background-image:url('http://lokasi-gambar.com/images/gambar.gif');
   background-position: center;
   background-repeat: repeat-y;
}


Parameter CSS di atas dapat disederhanakan menjadi:

div.sidebar {
   background:url('http://lokasi-gambar.com/images/gambar.gif') center repeat-y;
}






..selebihnya di Meningkatkan blog speed

Hack tag title blogspot - membuat judul post SE friendly

Judul posting merupakan hal yang sangat penting kaitannya dengan optimisasi (SEO). Tapi secara default, blogspot memberikan judul blog di depan judul posting saat halaman posting dibuka. Ini adalah tips mudah hack tag blogspot untuk mendapatkan judul yang Search Engine Friendly.

Saya akan memberikan contoh bagaimana blog dari blogger otomatis akan memberikan title pada setiap posting. Kita dapat membalik judul post di depan judul blog atau hanya menampilkan judul post saja saat halaman posting dibuka.

Sebagai contoh,
Misal judul blog adalah Tips Otimisasi. Kemudian sebuah posting diberi judul Tips optimisasi blog.

Pada saat posting itu dibuka/dibaca oleh pengunjung, maka blogspot otomatis akan menampilkan judul semacam ini:

Tips Optimiasi | Tips optimisasi blog (lihat di bagian paling atas browser Anda).

Sepintas memang tidak ada masalah. Namun judul tersebut membawa kata kunci berulang-ulang dan kurang Search Engine Friendly. Dengan meng-edit tag blog, Anda bisa menampilkan judul posting di depan judul blog atau hanya judul posting saja.

Contoh:

Lihat di bagian paling atas browser Anda. Judul blog ini adalah Blog Master. Di atas sana hanya ada judul posting yang ditampilkan. Tapi jika Anda kembali ke frontpage (beranda), maka judul blog yang akan ditampilkan. Yaitu Blog Master.

Tips hack tag title blogspot ini bertujuan untuk menghindari pemberian kata kunci berulang-ulang pada post title. Untuk mendapatkan judul posting yang Search Engine Friendly, Anda hanya perlu meng-edit tag title dan mengganti dengan yang baru. Silahkan mencoba dengan mengikuti petunjuk di bawah ini:

Langkah 1

Masuk/log in ke blogger dan klik menu Layout/Tata Letak, kemudian klik Edit HTML.

Langkah 2

Cari kode <title><data:blog.title/></title> yang terletak tepat di bawah kode <head>. Hapus tag title tersebut dan ganti dengan tag-tag berikut:

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>


Jadi... tag keseluruhannya akan menjadi seperti ini:

<head>
      <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == "index"'>
    <title><data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageName/></title>
    </b:if>


Simpan perubahan baru Anda, dan amati hasilnya dengan membuka salah satu posting artikle Anda. Maka dengan hack tag title di atas, judul yang akan ditampilkan ketika Anda membaca halaman posting hanyalah judul posting saja - tanpa judul blog.


..selebihnya di Hack tag title blogspot - membuat judul post SE friendly

Minggu, 30 Agustus 2009

Hack Tag Blogger

Ngga puas rasanya kalo blogging ngga sambil ngutak-atik tag atau biar keren disebut hacking blogger tag atau blogspot tweaking atau ngoprek HTML tag blogger - blogspot atau apa lah istilah yang keren buat itu. Intinya sekedar pengetahuan tentang tag-tag HTML yang menyusun blogspot Anda.

Jangan salah mengartikan hacking karena saya bukan seorang pakar hack atau seorang hacker. Saya cuman ngerti sedikit tentang ngutak-atik tag HTML yang sudah disediakan blogger dengan rapih. Dan saya selalu ngga puas denga apa yang sudah disediakan. Walau begitu, blog dari blogger (blogspot) memang boleh diutak-atik karena blogger sendiri menyediakan fasilitas edit HTML supaya pengguna bebas mengoptimiasi tampilan sesuai keinginan.

Edit HTML Tag


Untuk belajar hacking blogspot Anda harus setidaknya punya modal pengetahuan HTML. Soalnya susah ngejelasinnya kalo ngga ngerti HTML sama sekali. Ibarat ngajarin fisika kelas SMA ke anak kelas 6 SD, yang puyeng malah yang ngajarin ....

Anda akan mempelajari Blogger Tweak, hack blogspot tag atau Edit HTML tag. Untuk itu lebih pas jika blog yang akan Anda utak-atik adalah blog dari layanan blog gratis milik Blogger.com

Apa yang akan dibahas di Hack Tag Blogger?

  1. Hack Tag Title Blog - Membuat Judul Post Yang Search Engine Friendly
    Menampilkan judul posting di depan judul blog saat halaman posting tersebut dikunjungi. Dan ini akan berdampak positif dalam SEO.

  2. Membuat Blog 3 Kolom
    Secara default, template-template uang disediakan blogger adalah template 2 kolom. Anda bisa membuatnya menjadi 3 kolom dengan sedikit tweaking pada HTML Tag.

  3. Sembunyikan Navigasi Bar
    Blogger melarang Anda menghapus Navigasi bar (Tool yang ada di ujung atas blog ini). Namun Anda bisa menyembunyikannya bukannya menghapus.

  4. Hilangkan atau Sembunyikan Judul Sidebar Widget(Gadget)
    Menambahkan Gadget tentu kebiasaan semua blogger. Adakalanya Anda mungkin tidak ingin menampilkan judul Sidebar Widget demi tampilan.

  5. Menambahkan Ruang Untuk Iklan pada Header
    Header pada blogspot secara default hanya akan diisi judul dan deskripsi blog. Anda bisa melakukan tweak untuk menambahkan Widget supaya bisa dipasangi iklan banner.

  6. Membuat Custom Navigasi Link
    Persis seperti yang Anda lihat di bagian atas blog ini (di bawah judul blog), itu adalah Custom Navigasi Link untuk memberikan tautan ke posting-posting pilihan.


Materi dari nomor 1 samapai 6 adalah tautan ke posting terkait. Silahkan datang kembali ke halaman ini karena Posting akan segera dibuat dan atau ditambah.


..selebihnya di Hack Tag Blogger

Kode HTML List dan Bullet

List atau suatu sususan kata / kalimat atau daftar yang memanjang dari atas ke bawah. Seperti kalau pakai Ms.Word untuk membuat List dengan bullets, angka atau huruf. Sebagai contoh, lihat cara penggunaan kode HTML untuk membuat list dengan bullet di bawah ini.

HTML Bullet List

Membuat daftar dengan bullet list.
  • Tips dan Trik HTML
  • Kode-kode HTML
  • Belajar HTML


Cara menulisnya dalam mode HTML adalah:

<ul>
<li>Tips dan trik HTML</li>
<li>Kode-kode HTML</li>
<li>Belajar HTML</li>
</ul>

HTML Number List

Membuat daftar dengan number list. Menampilkan urutan angka dari 1 sampai n:

  1. Belajar SEO

  2. Teknik SEO

  3. Blog Master


Tulis dalam mode HTML seperti ini:

<ol>
<li>
Belajar SEO</li>
<li>
Teknik SEO</li>
<li>
Blog Master</li>
</ol>



Menampilkan list dengan huruf

Kode HTML untuk menampilkan list dengan huruf:

<ul type="a">
<li>
Belajar SEO</li>
<li>
Teknik SEO</li>
<li>
Blog Master</li>
</ul>


hasilnya adalah:

  • Belajar SEO
  • Teknik SEO
  • Blog Master


..selebihnya di Kode HTML List dan Bullet

Kode HTML table (tabel)

Table atau tabel kadang diperlukan untuk menampilkan daftar. Seperti misalnya menampilkan daftar nama, daftar website, dan sebagainya. Untuk membuatnya, Anda harus menuliskannya dalam kode HTML. Bagaimana membuat table (tabel) dengan HTML? Mari pelejari di sini!

Pada contoh ini, saya akan membuat tabel (table) 3 kolom dan 4 baris untuk membuat daftar alamat situs. Berikut ini contoh hasil table-nya:

Nama WebsiteAlamat URLKeterangan
Googlehttp://www.google.comSearch Engine
Yahoo!http://www.yahoo.comSearch Engine, Email Service, News Portal
facebookhttp://www.facebook.comSocial Network


Untuk menampilkan tabel seperti di atas, berikut kode HTML table -nya:


<table width="80%" border="1" cellspacing="0" cellpadding="0">
<!-- Mulai Baris Pertama -->
<tr>
<td width="
33%" valign="top"><b>Nama Website</b></td>

<td width="
33%" valign="top"><b>Alamat Website</b></td>

<td width="
33%" valign="top"><b>Keterangan</b></td>
</tr>

<!-- Selesai Baris Pertama -->

Keterangan: kode <!-- Mulai Baris Pertama --> tidak akan ditampilkan.

Mulai dari <!-- Mulai Baris Pertama --> hingga <!-- Selesai Baris Pertama --> akan memberikan 1 baris dan 3 kolom.

Anda tinggal melanjutkannya dengan menyalin kode di atas untuk baris-baris berikutnya, dan mengisi setiap kolom dengan input data yang Anda inginkan. Dengan menyalin 3 kali berarti akan menghasilkan 4 baris. Kemudian Anda harus menutup tag tersebut dengan </table>.

width= : menyatakan lebar table. Anda boleh mengisinya dengan 100%, 400px atau sesuai dengan keinginan (menyesuaikan template website).

border= : menyatakan tebal garis. Jika diberi nilai 0 maka garis tidak akan ditampilkan.

cellspacing= : Spasi (jarak) di antara cell (1 kolom dan 1 baris = 1 cell)

cellpadding= : Jarak antara text dengan border pada setiap cell.

Menggabungkan Cell, Baris dan Kolom pada Table



Cell dapat digabung (merge) dengan cell yang lain dalam baris atau kolom. Untuk menggabungkan dua atau lebih digunakan perintah colspan atau rowspan. Sebagai contoh, lihat di bawah ini:

Menggabungkan 2 kolom cell dalam 1 baris:


<table width="400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="
50%">Cell 1</td>
<td width="
50%">Cell 2</td>
</tr>
<tr>
<td
colspan="2" width="100%">2 Cell Digabung</td>
</tr>
</table>


Kode HTML Table di atas menghasilkan tabel seperti di bawah ini:

Cell 1Cell 2
2 Cell Digabung


Menggabungkan 2 baris cell dalam 1 kolom:


<table width="
400" border="1" cellspacing="0" cellpadding="0">
<tr>
<td
rowspan="2" width="50%">
Dua baris cell digabung
</td>
<td width="
50%">
Cell 3
</td>
</tr>
<tr>
<td width="
50%">
Cell 4
</td>
</tr>
</table>


Kode HTML table di atas akan menghasilkan tabel:

Dua baris cell digabungCell 3
Cell 4




..selebihnya di Kode HTML table (tabel)

Kode HTML untuk menampilkan gambar (images)

Ngga seru posting blog kalo ngga menyisipkan gambar-gambar. Secara default, posting di blogger.com disediakan menu untuk meng-upload gambar dari PC. Namun ada kalanya kita perlu menambahkan gambar dari halaman website lain. Bagaimana menulis kode HTML untuk menampilkan gambar (images)?

Pertama-tama kita memerlukan lokasi gambar di suatu web server. Sebagai contoh, saya akan menyisipkan gambar logo Google pada posting ini. Lokasi gambar logo itu berada di server Google. Anda dapat dengan mudah mengetahui alamat gambar dengan membuka Google.com, kemudian meng-klik kanan logo-nya kemudian klik sub-menu Copy image location.

Lokasi gambar yang didapat adalah: http://www.google.co.id/intl/id_id/images/logo.gif

Ok..
Sekarang memulai menulis kode HTML untuk memasukan gambar itu ke dalam artikel ini. Tag HTML untuk memasukan gambar ke halaman web adalah:

<img src="http://www.google.co.id/intl/id_id/images/logo.gif" border="0" width="200" alt="Google.com"/>

hasilnya adalah..


Keterangan

src="http://...." = mencari lokasi gambar di suatu direktori dalam server suatu website.

width="200" = menyatakan lebar gambar dalam pixel

height="200" = menyatakan tinggi gambar dalam pixel - untuk menyesuaikan tinggi secara otomatis berdasarkan dimensi gambar, height tidak perlu ditulis kecuali Anda memang ingin mengatur tingginya.

alt="alternate text" = Alternate text berfungsi untuk memberikan keterangan tambahan. Jika gambar dihapus dari direktori, isi dari alternate text ini yang akan menggantikannya.

border="0" = menyatakan tebal garis. Nol (0) berarti garis tidak ditampilkan.

..selebihnya di Kode HTML untuk menampilkan gambar (images)

Kode HTML untuk text

Kita akan belajar kode-kode HTML untuk mengolah text agar artikel tidak monoton. Pengolahan text juga merupkan teknik SEO. Selain untuk membuat artikel lebih SE Friendly, pengolahan text yang baik akan membantu memudahkan pembaca dalam memahami isi artikel Anda.

Jika Anda menggunakan layanan blog milik Blogger.com, di sana sudah disediakan mode Tulis untuk posting. Anda bisa mengatur text sesuai keinginan Anda. Namun mengerti kode HTML sangat penting karena pasti suatu saat Anda memerlukannya. Berikut ini kode-kode tag HTML yang biasa dipakai untuk mengolah text:

Kode HTML Paragraf: <p> </p>
Tag ini digunakan untuk mengapit setiap paragraf dalam artikel. Contoh penggunaan dan penulisan dalam kode HTML sebagai berikut:
<p>Ini adalah contoh penulisan paragraf dalam HTML</p>


Kode HTML Bold: <b> </b> atau <strong> </strong>
Tag HTML ini digunakan untuk menebalkan karakter huruf. Penggunaan B atau Strong akan sama-sama menghasilkan huruf tebal (penekanan). Ini juga dipakai sebagai teknik seo untuk mengoptimisasi artikel dalam halaman web.

<b>Text ini Tebal </b> = Text ini Tebal

<strong>Text ini Tebal </strong> = Text ini Tebal


Kode HTML Italic dan Emphasis: <i> </i> atau <em> </em>
Tag ini akan menghasilkan karakter bercetak miring (Italic). Tag ini juga dipakai untuk membuat penekanan dalam artikel sebagai teknik SEO juga.

<i>Cetak miring</i> = Cetak miring

<em>Cetak miring</em> = Cetak miring


Kode HTML Underline Text: <u>bergaris bawah</u> = bergaris bawah

Kode HTML Blockquote Paragraph: <blockquote>
Di bawah ini adalah contoh penulisan paragraf yang diapit oleh tag <blockquote>:

<blockquote>Paragraf ini diapit oleh tag Blockquote</blockquote>

Hasilnya:
Paragraf ini diapit oleh tag Blockquote


Kode HTML Headings
Heading bagian penting dalam artikel. Dalam SEO, heading menjadi sangat penting untuk mengoptimisasi artikel dalam halaman-halaman web Anda. Tag-tag heading berguna untuk mengapit Judul dan Sub-sub Judul dalam artikel. Apa saja tag heading untuk mengapit judul dan sub-judul?

<h1> : Untuk judul artikel

<h2> : Untuk sub-judul artikel

<h3>, <h4>, <h5> hingga <h6> untuk sub-sub judul selanjutnya.

Kode HTML Text Link
Link atau URL adalah tautan antar halaman web. Tautan ini bisa berupa text atau gambar. Untuk penulisan tag link (URL) adalah sebagai berikut:

<a href="http://www.blogger.com" target="_blank" title="bikin blog gratis">Blogger.com</a>


Penulisan kode HTML untuk link di atas menghasilkan:

Blogger.com


Keterangan:

href="http://www.blogger.com" : Alamat tujuan link ketika diklik - contoh link di atas akan membawa pengujung ke halaman www.Blogger.com

target="_blank" : halaman akan dibuka dijendela baru jika link diklik

target="_top" : halaman akan dibuka di jendela yang sama jika link diklik

title="text alternatif" : Atribut untuk menambahkan text alternatif - text akan muncul ketika mouse melintas di text link.

..selebihnya di Kode HTML untuk text