10 Tips Desain Web untuk SEO Website Anda

Desain Web Untuk SEO – Selama ini, desain web anda mungkin selalu 100% berorientasi pada kenyamanan pengunjung, keindahan dan kebergunaan. Yaa, itu tidak salah sama sekali, karena memang pada dasarnya mendesain sebuah web adalah untuk menciptakan kemudahan, ketertarikan dan efektifitas dalam pengaksesan website tersebut nantinya.
Namun, jika situs yang anda desain adalah jenis situs yang akan sangat membutuhkan mesin pencari untuk sumber pengunjungnya, sangat dianjurkan menambahkan orientasi keempat untuk desain web anda, yaitu orientasi pada mesin pencari. Desain web dapat digunakan untuk meningkatkan SEO melalui trik-trik tertentu pada saat pengkodean sehingga membuatnya SEO Friendly. Hal ini biasa disebut dengan SEO onpage (SEO pada halaman web anda).



Nah, berikut ini adalah 10 tips untuk membuat desain web anda ramah dengan mesin pencari sehingga dapat mengoptimalkan SERP website anda.

1. Kurangi jumlah objek yang di load

Semakin banyak objek yang di load, semakin berat dan lama halaman itu ketika diakses. Dan semakin lama loading sebuah website, semakin buruk reputasinya di mesin pencari. Ketahuilah, bahwa saat ini kecepatan situs menjadi sebuah faktor penting untuk optimasi SEO. Bahkan, Google sendiri sampai membuat sub-web tersendiri untuk membahas dan menganalisa kecepatan situs : Google Pagespeed Insight.
Jadi, langkah pertama adalah dengan meminimalisir objek yang di load. Namun, bukan berarti anda akan kehilangan elemen-elemen penting untuk desain web anda. Inti dari poin nomor 1 ini adalah “Kurangi kode tanpa mengurangi elemen penting desain anda”.

2. Pastikan kode “Clean” dan Terstruktur

Kode yang “Clean” alias “Bersih” berarti bahwa kode pada halaman web tersebut hanya terdiri dari kode HTML. Kode Javascript dan CSS sepenuhnya dipanggil dari luar, alias eksternal. Hal ini akan sangat baik dan memudahkan bot crawler dari mesin pencari untuk merayapi situs anda karena crawler hanya “peduli” pada kode HTML, tidak dengan kode javascript dan CSS.
Sedangkan kode yang terstruktur artinya tag-tag HTML yang ada digunakan sesuai dengan fungsinya dan standar w3c. Contoh prakteknya misalnya pada penggunaan Tag Heading (h1,h2,h3,h4,h5,h6) yang sesuai dengan prioritas judul. H1 untuk nama situs, H2 untuk judul posting, H3 untuk judul widget, dan sebagainya. Semuanya diprioritaskan sesuai dengan fungsinya.

3. Optimalkan penggunaan CSS

Pengoptimalan CSS bertujuan untuk efektifitas penggunaannya pada halaman web sehingga menghasilkan file CSS yang lebih kecil. Praktek-prakteknya adalah sebagai berikut :

• Membuang kode-kode yang tidak perlu dan menghindari perulangan CSS. Gunakan class yang sama pada elemen dengan style yang sama. Dalam hal ini penggunaan framework bisa sangat membantu, jika setelah selesai kode-kode yang tidak dipakai pada framework dihilangkan.
• Menyatukan CSS hanya dalam 1 file dan mengindari penggunaan import.
• Mengkompres atau minify kode CSS.
• Memanggil kode CSS pada tag head dan /head.
• Hindari penggunaan CSS secara inline dengan atribut pada tag html atau dengan tag style.

4. Optimalkan penggunaan javascript

Prinsipnya sama dengan poin 3 : Efektifitas penggunaan. Namun, caranya yang berbeda. Praktek-prakteknya adalah sebagai berikut :

• Membuang script-script yang tidak perlu dan menghindari perulangan. Dalam hal ini sebaiknya hindari penggunaan-penggunaan plugin-plugin jquery untuk fungsi tertentu. Akan lebih baik jika anda membuat fungsi tersebut dengan hanya menggunakan lib jquery, dan lebih baik lagi jika murni javascript.
• Hindari pemakaian javascript langsung pada pada file HTML didalam tag script
• Tempatkan semua pemanggilan javascript pada struktur kode bagian paling bawah, di akhir tag body sebelum /body. Atau bisa tetap dalam tag head, tapi dengan menggunakan atribut async. Tag ini berfungsi untuk menunda pe-render-an atau loading script tersebut pada saat halaman diakses. Sayangnya, penggunaan tag async ini terkadang menyebabkan tidak berfungsinya script-script tertentu.
• Megkompress atau minify javascript.

5. Optimalkan penggunaan gambar

Masih sama dengan poin 3 dan 4, hanya prakteknya saja yang berbeda :

• Jika gambar yang ditampilkan dalam web berukuran 200×200, maka ukuran sebenarnya dari gambar tersebut haruslah 200×200 juga. Manipulasi ukuran gambar dengan menggunakan kode CSS, misalnya menampilkan gambar ukuran 200×200 di web, padahal ukuran sebenarnya adalah 400×400 harus dihindari.
• Gunakan atribut “alt” untuk mendeskripsikan gambar tersebut dalam teks.
• Kompres gambar sebelum digunakan di web, agar lebih ringan.

6. Kompres kode

Pengompresan kode disini secara khusus artinya mengompres kode HTML atau kode client-side lain yang secara langsung membangun sebuah halaman website. Pengompresan ini sama seperti pada poin nomor 3 dan 4. Ini dilakukan untuk menghemat source atau mengecilkan file halaman web sehingga bisa di load lebih cepat. Kode yang di kompres sebaiknya adalah kode yang sudah final, artinya tidak akan diedit lagi. Sebelum di kompres, saran saya backup terlebih dahulu agar ketika ada pengeditan akan mudah.
Untuk mengompres kode HTML, CSS maupun Javascript anda bisa mengunjungi website ini : https://htmlcompressor.com/compressor/.

7. Tempatkan kode untuk konten lebih dulu

Poin 7 mungkin memang tidak ada hubungannya dengan desain. Namun hal ini perlu anda lakukan jika ingin desain website anda SEO friendly. Sebisa mungkin tempatkan kode atau tag html yang berisi konten lebih dulu dari elemen website lainnya. Contohnya adalah menempatkannya setelah kode untuk bagian header. Alasannya karena crawler mesin pencari memprioritaskan tag-tag HTML yang berada pada bagian atas. Karena konten adalah bagian terpenting dari sebuah website, maka sudah selayaknya kode untuk konten di tempatkan lebih dulu dari elemen lainnya.
Namun, perlu diketahui bahwa bukan berarti ini membatasi seni web design anda. Soal posisi konten pada tampilannya, itu tugas CSS. Bahkan jika konten justru anda tampilkan di bagian bawah, tidak masalah untuk crawler. Tapi, bermasalah untuk user experience.

8. Lengkapi web dengan Navigasi yang baik

Yap, tidak bisa kita pungkiri bahwa navigasi yang baik sangat penting untuk sebuah website. Poin ini mempunyai nilai 2 kali lipat. Artinya bagus untuk user experience, bagus juga SEO.

Berikut ini adalah bagian-bagian navigasi yang perlu ada dalam desain web anda :

• Menu Utama : Berisi link-link ke halaman penting di web anda
• Kolom Pencarian : Untuk memudahkan user mencari konten di situs anda
• Breadcrumbs : Sebagai informasi agar user mengetahui di bagian situs yang mana dia sedang berada
• Artikel terkait : Sebagai rekomendasi agar user membaca artikel lain yang terkait
• Widget daftar post, baik itu popular posts atau random posts

Kelima elemen diatas sudah jelas sangat bermanfaat untuk user experience. Namun, disisi lain ini juga sangat bermanfaat untuk SEO : Internal Linking, Salah satu hal terpenting dalam SEO onpage.

9. Optimalkan halaman pada versi responsive

Hampir semua situs-situs besar saat ini, memiliki desain yang responsive. Namun, ada 2 cara web designer membuat responsive web design. Pertama dengan menggunakan kueri @media -dan sejenisnya- dalam CSS sehingga semua perangkat yang di gunakan user hanya akan mengakses satu halaman yang berbeda tampilannya di setiap perangkat. Kedua, dengan membuat halaman yang berbeda untuk setiap perangkat. Artinya, ketika user mengakses website tersebut dari perangkat HP misalnya, maka akan di load atau dialihkan ke halaman versi HP. Begitupun jika user menggunakan Tablet atau Laptop, atau Laptop, semuanya punya versi masing-masing.

Nah, dari kedua cara yang atas, yang paling bagus adalah cara yang kedua. Alasannya, agar semua data yang diload, berfungsi dan ditampilkan. Tidak seperti pada cara yang pertama. Pada cara yang pertama, sering kali terjadi “penyembunyian” atau “penghilangan” data tersebut secara client side, padahal data tersebut di load dari server. “Penyembunyian” ini terutama terjadi ketika halaman diakses dari perangkat yang kecil seperti HP. Sering kali fungsi-fungsi yang ada pada versi desktop tidak diaktifkan saat diakses lewat HP karena memang tidak akan cocok, padahal fungsi itu di load dari server. Nah dengan cara kedua, “penyembunyian” ini bisa dihilangkan.

10. User Experience = SEO

User experience dan SEO memang berbeda. Namun pada poin ini saya tegaskan bahwa mendesain sebuah website yang berorientasi pada user experience tanpa melanggar aturan SEO yang baik, bisa jadi menjadi penguat untuk SEO.
Begini logikanya :
Pengunjung merasa nyaman dengan website anda karena konten bagus, navigasi bagus, desain juga enak dilihat  >>> Merasa betah mengakses situs anda, baca-baca artikel lain lewat “artikel terkait” padahal sebelumnya tidak niat >>> Mengurangi Bounce Rate, Meningkatkan pageviews pervisit yang mana sangat baik untuk SEO.

Bonus Tips +

11. Gunakan Plugin, atau Template pihak ketiga

Yap, poin ini hanya bonus. Diperuntukkan untuk anda yang tidak mau ambil pusing memenuhi 10 poin diatas, namun tetap ingin desain webnya bagus untuk SEO. Tidak ada salahnya menggunakan plugin atau template gratis maupun berbayar pada website anda. Terutama untuk blog wordpress Self hosted, anda bisa menggunakan Plugin seperti WordPress SEO by Yoast atau Autoptimize untuk kompresi kode. Sedangkan untuk template yang sudah dioptimasi, anda bisa cari disini.
Sekian. Semoga bermanfaat.

Tweet

Artikel keren lainnya:

Ditulis oleh famadaya pada hari Saturday, January 3, 2015