Untuk bikin website lebih profesional ada yang sebenarnya tidak tampak secara langsung di front page halaman web, tetapi sangat penting dilakukan, yaitu mengoptimalkan website agar mudah diindeks mesin pencari utama Google, Bing dan Yahoo Search. Lakukan semua teknik, tip dan trick SEO.
Webmaster Tools
Bagaimana mengetahui kekurangan yang melekat di website? Eksplorasi masalah SEO website blog bisa menggunakan Google Webmaster Tools atau pakai Webmaster Tools dari BING. Baru-baru ini saya menguji masalah SEO website saya, http://website-download.blogspot.com, pakai SEO Analizer BING Webmaster Tools. Salah satu hasil analisa SEO adalah pesan error ini :
- Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.
Apa artinya?
Ternyata source code blog saya ukurannya terlalu besar, sehingga search engine tidak mendapati content halaman web secara utuh karena terlalu banyak muatan source code sehingga melewati batas toleransi. Size HTML melebihi 126 KB akan menyulitkan “crawler” (robot pencari) e.g. Googlebots atau Bingbot merayapi semua content dan link yang ada.pada blog.
- A soft limit of 125 KB is used for guidance to ensure all content & links are available in the page source to be cached by the crawler.
Jika ukuran webpage (halaman web) melebihi 125 KB, maka search engine tidak mampu merayapi semua content dan link. Atau bahkan tidak akan merayapi sama sekali (tidak ada sama sekali postingan yang ditampilkan di SERPs (halaman hasil pencarian).
Recommended Action :
- Ensure that the page source does not contain large amounts of CSS or code at the top of the page.
- Consider moving code and styles into separate files.
Memang website saya terlalu banyak saya sisipi kode CSS dan script seperti javascript, terutama pada bagian HEADER-nya. Solusi yang praktis untuk menghemat “space” pada souce code HTML template adalah menggunakan CSS eksternal. Yaitu menjadikan code CSS tersebut sebagai file-file terpisah, kemudian ditautkan ke HTML Template.
why use external css?
- It keeps your website design and content separate.
- It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
- You can make drastic changes to your web pages with just a few changes in a single CSS file.
External CSS
External CSS adalah sebuah file yang hanya berisi code CSS dan disimpan sebagai file dengan ekstension “.css” Begitulah! Ketika menggunakan CSS sangat disarankan kode CSS tersebut ditempatkan secara terpisah (sebagai file .css) dari kode HTML.
Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS).
File “.css” ini kemudian akan direferensikan ke dalam kode HTML menggunakan ini :
- <link> instead of <style>.
Bagaimana membuat file CSS eksternal? Untuk membuatnya ikuti tutorial berikut ini.
Membuat CSS File
Semuanya dimulai dari membuat External CSS File menggunakan tool Notepad.exe atau plain text editor lainnya. Ketikkan kode CSS di bawah ini :
CSS Code:
- body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }
Simpan file diatas sebagai file CSS (dengan ekstension di belakang namanya .css). Ingat! Pastikan jangan sampai disimpan sebagai file text (.txt) karena secara default notepad akan menyimpannya sebagai file .txt. Beri nama file, misalnya "test.css" (tanpa tanda petik).
Langkah selanjutnya, membuat file HTML baru dan mengisinya dengan kode berikut ini :
HTML Code
- <html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h3> A White Header </h3>
<p> This paragraph has a blue font. The background color of this page is gray because we changed it with CSS! </p>
</body>
</html>
Simpan dengan nama file "index.html" (tanpa tanda kutip) dan letakkan dalama directory yang sama dengan file CSS Anda. Sekarang silahkan membuka file HTML tadi di web browser Anda, maka akan ditampilkan seperti gambar di awah ini :
Congratulations! You just made your first website that uses External CSS!
0 comments:
Post a Comment