Cascading Style Sheet (CSS) untuk mengendalikan size, gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.[1] CSS merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.[2] Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.[2]
Hal ini sama halnya dengan styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading,subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file).[1] Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.[1]
Bolehkah menggunakan Inline Style CSS?
Jika Anda gunakan inline style CSS dalam dokumen HTML, ini bukan cara terbaik menjaga SEO blog. Hindari penggunaan inline style CSS untuk setiap style pada halaman Web.
Daripada menggunakan inline style CSS, gunakan style sheet eksternal. Style sheet eksternal memberikan semua manfaat dari praktek-praktek CSS terbaik dan mudah digunakan. Jika Anda harus menempatkan style dalam dokumen HTML tertentu, tempatkan mereka dalam embedded style sheets dalam <head> dokumen HTML Anda. Dengan begitu, setidaknya mereka masih terpisah dari konten.
<p id="contoh1">
Ini adalah contoh tag P tanpa diformat menggunakan inline style CSS</p>
<p>Hindarkan penulisan diatas dengan menyisipkan unsur inline style, seperti ini :</p>
<p id="contoh2" style="font-size:20pt">
Tag P ini diformat dengan besar font 20 point </p>
<p id="contoh3" style="font-size:14pt; color:red">
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
Solusinya :
1. Embedded Style Sheet, seperti ini.
- <html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style> <body>
<h1 id="contoh1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="contoh2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="contoh3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Kode warna #ffff00 (biru) untuk warna paragraf (p)
2. Gunakan file CSS style Eksternal.
Hindari penggunaan Inline Style CSS pada dokumen HTML
Penggunaan inline style CSS dalam dokumen HTML, itu tidak baik bagi SEO. Hal ini terlihat pada review hasil analisa SEO dengan bantuan www.WooRank.com seperti di bawah ini :
Perhatikan tanda silang merah pada komentar hasil analisa SEO :
- x Too bad, your website is using inline styles.
Dan perhatikan pula komentar pada kotak orange yang teks tertulisnya seperti di bawah ini :
- Website speed has a huge effect on SEO. Speed-up your website so search engines will reward you by sending more visitors. Also, conversion rates are far higher for websites that load faster than their slower competitors.
Inline Styles Are Not Best Practice
- Inline styles don't separate content from design
Inline styles sama seperti embedded font tag dan tag-tag desain lain yang saat ini dicoba untuk dihentikan penggunaannya. Style ini hanya mempengaruhi tag yang benar-benar mereka terapkan, dan untuk sementara mungkin memberikan Anda kontrol lebih, membuat aspek lain dari desain dan namun pengembangan ke depannya menjadi lebih sulit. - Inline styles cause more maintenance headaches
Ketika Anda bekerja dengan style sheet, kadang-kadang bisa sangat sulit untuk mencari tahu di bagian mana style sedang diatur. Dan jika Inline Style Anda semakin banyak, maka semakin membuat Anda pusing kepala. Ketika Anda menambahkan campuran inline style, Embedded style, dan eksternal style dan Anda punya lebih banyak lagi lokasi untuk dilihat, maka tidak terbayangkan pusingnya kepala.
Dan jika Anda bekerja pada tim desain web atau harus mendesain ulang atau memelihara situs yang dibangun oleh orang lain, maka Anda akan mengalami jauh lebih banyak kesulitan. Kemudian, setelah Anda menemukan gaya dan menyingkirkan itu, Anda harus menyingkirkan itu pada setiap elemen pada setiap halaman di mana itu telah ditempatkan. Yang dapat meningkatkan volume pekerjaan pemeliharaan astronomis. - Inline styles are not as accessible
While a screen reader or other assistive device might be able to handle the attributes and tags effectively, some of the older devices don't and can result in some strange Web pages. Plus, the extra characters and text can affect how your page is viewed by a robot such as a search engine, so your page optimization would not do as well as a page with external style sheets. - Inline styles make your pages bigger
Jika Anda setting sebuah CSS style untuk setiap alinea website, Anda bisa lakukan cukup satu kali saja dengan, misalnya, 5 baris code atau dengan external style sheet. Namun jika Anda lakukan dengan inline style – INGAT! – konsekuensinya akan menambahkan style ini ke setiap alinea. BAYANGKAN! – Jika Anda punya 5 baris CSS, maka 5 baris ini akan terduplikasi untuk setiap alinea website. Akibatnya pemakaian bandwidth dapat meningkat pesat dalam waktu singkat.
What Is the Best Practice for CSS Instead of Inline Styles
Gunakan External Style Sheets dan hindari penggunaan CSS Inline Style. External style sheets memberikan semua manfaat dari praktek-praktek CSS terbaik dan mudah digunakan.
Jika Anda harus meletakkan elemen CSS dalam dokumen HTML, disarankan menggunakan Embedded Style Sheet di bagian <head>. Setidaknya CSS style tetap terpisah dari content.
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.
KESIMPULAN
- Avoid using inline styles for any styles on your Web page.
0 comments:
Post a Comment