Author by Yosef Doublehorn
Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector

27 Agustus 2013

SEO website : convert inline CSS style to external style



Deklarasi CSS    menentukan format, layout dan tampilan elemen halaman web. Kita bisa menyertakan deklarasi CSS di beberapa tempat dalam file HTML, termasuk metode inline, inner page dan opsional file eksternal. Aturan setting CSS Inline Style ditunjukkan sebagai bagian <head> pakai atribut "style

Anda boleh menyertakan Internal style sheet di bagian "style" section di daerah <head>  . Anda juga dapat membuat link ke file style sheet eksternal di area <head> untuk mengubah Inline style sheet ke external style sheet.

Internal Style Sheet vs External Style Sheet - website files

Jika Anda setting CSS-style untuk setiap teks alinea - bisa dilakukan cukup SEKALI. Misal dengan 5 baris code CSS Inline Style pada file HTML - akibatnya akan ditambahkan style ini ke setiap alinea.

BAYANGKAN! – Jika ada 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea di seluruh website blog. Akibatnya : Pemakaian bandwidth akan tiba-tiba membengkak.

Penulisan Inline Style SANGAT TIDAK BAIK untuk SEO karena menjadikan size file HTML menjadi besar melewati batas toleransi standar ukuran dokumen (125KB).

Seperti contoh kasus berikut (Hasil Analisa SEO blog ini) :

Hasil Analisa SEO website design pakai BING Webmaster tools


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.


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 file HTML. Cari tag penutup "</ head>". Tambahkan snippet dibawah ini sebelum tag penutup tersebut tersebut :

    <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 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 :

    <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 :

    .content
    { color:#FF0000; background-color:#000000; }

  • Copy kode CSS dari internal style sheet ke file eksternal. Jika Anda mempunyai kode dalam “internal CSS section” di area <head> halaman dokumen HTML, maka Anda dapat mentransfer 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 halaman HTML setelah berhasil copy. Simpan file. buka halaman di browser untuk menguji.

    Tip dan Peringatan




Comments

2 komentar:

http://website-download.blogspot.com/2013/02/seo-tip-convert-inline-css-style-to.html?showComment=1411063818039#c5015355336201740292'> 19/09/14 01.10 Reply

Numpang baca artikel ini sob.... :)
blog saya juga mengalami Evaluated size of HTML is estimated to be over 125 KB and risks not being fully cached setelah saya cek pada bing webmaster.

http://website-download.blogspot.com/2013/02/seo-tip-convert-inline-css-style-to.html?showComment=1411083637564#c5600465567707130974'> 19/09/14 06.40 Reply

Coba kurangi muatan inline style css dengan metode diatas. Thanks bro Ferry. Sukses selalu

Posting Komentar di Website Design

-

Penelusuran topik khusus di blog ini
Loading