Deklarasi CSS menentukan format, tata-letak dan tampilan elemen halaman web. Anda dapat menyertakan deklarasi CSS di beberapa lokasi dalam file dokumen HTML, termasuk metode inline, internal, inner page dan opsional dalam file eksternal. Aturan setting CSS Inline Style ditunjukkan sebagai bagian <head> menggunakan atribut "style." Anda boleh saja menyertakan Internal style sheet di bagian "style" section di daerah <head>.
Anda juga dapat membuat link ke file style sheet eksternal di daerah <head> untuk mengubah Inline style sheet ke external style sheet.
Internal Style Sheet dan External Style Sheet, pilih mana?
Jika Anda setting CSS style untuk setiap alinea website, bisa dilakukan cukup satu kali dengan, misalnya, 5 baris code CSS Inline Style pada dokumen HTML website. Konsekuensinya akan menambahkan style ini ke setiap alinea. BAYANGKAN! – Jika ada 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea website blog. Akibatnya pemakaian bandwidth akan tiba-tiba membengkak.
Penulisan Inline Style juga sangat tidak baik untuk SEO karena menjadikan ukuran dokumen menjadi besar melewati batas toleransi standar ukuran dokumen (125KB).
Seperti contoh kasus di bawah ini.
Hasil Analisa SEO website design menggunakan BING Webmaster tools sebagai berikut :
Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached.
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.
SEO Explanation:
Search engines may not fully acquire the content on a page if the page is contains a lot of code. Extraneous code can push the content down in the page source making it harder for a search engine crawler to get to. 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. This basically means if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.
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.
SEO Explanation:
Search engines may not fully acquire the content on a page if the page is contains a lot of code. Extraneous code can push the content down in the page source making it harder for a search engine crawler to get to. 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. This basically means if the page size is too big, a search engine may not be able to get all of the content or may end up not fully caching it.
Instruksi
- Buat file eksternal CSS. Buat file baru dalam teks editor (seperti Notepad) dan simpan dengan ekstensi ".css." - Misalnya, "mypagestyle.css" atau nama yang Anda inginkan. Tambahkan link ke style sheet Anda di bagian <head> halaman HTML.
Buka dokumen HTML dan cari tag penutup "</ head>". Tambahkan berikut ini sebelum tag penutup :
<link rel="stylesheet" type="text/css" href="mypagestyle.css" /> - Ubah nilai atribut "href" jika Anda menyimpan file Anda dengan nama yang berbeda. Kode ini mengasumsikan file CSS disimpan di lokasi yang sama seperti halaman HTML.
- Cari deklarasi CSS yang ingin Anda pindahkan ke style sheet eksternal. Jika deklarasi style bersifat inline, mereka akan tampak seperti dalam “opening tag” elemen seperti berikut ini :
<div style="color:#0000ff; background-color:#000;">Here is some text in an element</div>
Ini adalah contoh sederhana di mana ditunjukkan teks berwarna biru (#0000ff) dan latar belakang warna hitam pekat. Sorot teks yang terdaftar diantara tanda kutip (warna teks merah) sebagai atribut "style" copy dan paste ke file CSS Anda. Hapus atribut style dari seluruh elemen HTML ketika Anda “style” tersebut telah disalin ke file style sheet Anda. - Tambahkan atribut class dan ID elemen HTML Anda untuk mengidentifikasi mereka dalam file CSS. Ubah saja opening "div" tag, kali ini tercakup di dalamnya atribut ID :
<div id="content">Here is some text in an element</div>
Jika elemen sudah ada atribut ID, Anda dapat menggunakannya. Atau, Anda dapat menggunakan atribut class seperti berikut ini:
<div class="content">Here is some text in an element</div> - Ubah kode CSS untuk merefleksikan atribut ID atau atribut class yang Anda tambahkan. Di sekitar deklarasi CSS yang Anda copy ke file CSS, tempatkan sebuah blok yang mengidentifikasi atau ID yang Anda pilih.
Untuk atribut ID, gunakan sintaks berikut :
#content
{ color:#FF0000; background-color:#000000; }
Dan jika Anda menggunakan atribut class, gunakan sintaks berikut ini : { color:#FF0000; background-color:#000000; }
.content atau (dot)content
{ color:#FF0000; background-color:#000000; }
{ color:#FF0000; background-color:#000000; }
- Copy kode CSS dari internal style sheet ke file eksternal. Jika Anda punya kode dalam “internal CSS
section” di area <head> halaman dokumen HTML, Anda dapat transfer kode tersebut ke file CSS.
Kode tersebut biasanya ditunjukkan sebagai berikut:
<style type="text/css">
div {font-weight:bold;}
</style> - Copy kode diantara tag style seperti terlihat diatas, dan paste ke file CSS. Hapus semua area style dari laman HTML setelah berhasil disalin. Simpan file dan buka halaman di browser untuk menguji.
Tip dan Peringatan
- Penyimpanan deklarasi CSS dalam file terpisah memungkinkan Anda menerapkan style pada elemen ganda (multiple elements) dalam website secara serentak.
- Penggunaan deklarasi Inline Style sheet kurang bermanfaat dan tidak baik untuk SEO. Lebih baik menggunakan file external style, maka cara terbaik adalah hindari penggunaan Inline Style Sheet.
- Penyimpanan deklarasi CSS dalam file terpisah memungkinkan Anda menerapkan style pada elemen ganda (multiple elements) dalam website secara serentak.
0 comments:
Post a Comment