Untuk bikin website lebih profesional ada yang tidak tampak di front page web, tetapi sangat penting dilakukan, yaitu mengoptimalkan website agar mudah diindeks mesin pencari utama Google, Bing dan Yahoo Search. Kita membicarakan Search Engine Optimization atau teknik, tip dan trick SEO.
Webmaster Tools : Memantau performa website
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, 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 size webpage melebihi 125 KB, search engine tidak mampu merayapi semua content dan link. Atau tidak merayapi sama sekali (tidak ada postingan yang ditampilkan di page 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.
Mengapa pakai external css untuk template website?
- 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.
Bagaimana membuat CSS File untuk tempate website?
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 :
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 dalam directory yang sama dengan file CSS. Silahkan buka file HTML tadi di web browser, maka akan ditampilkan seperti gambar ini :
Congratulations!
You just made your first website that uses External CSS!
Happy blog blogger - semoga bermanfaat
You just made your first website that uses External CSS!
Happy blog blogger - semoga bermanfaat
.
.
.
.
.
.
.
.
![[Valid Atom 1.0]](https://lh3.googleusercontent.com/-AHjNV40KrDw/UextTozh8GI/AAAAAAAAMjU/UG7zSHdmatc/w88-h31-no/valid-atom.jpg "Validate my Atom 1.0 feed")
