SEO - Desain & Tata Letak

Selamat datang, para pengembang web yang sedang belajar! Hari ini, kita akan mendalaminya dunia yang menarik dari SEO desain dan tata letak. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menghidahkan Anda dalam perjalanan ini, bahkan jika Anda belum pernah menulis baris kode tunggal sebelumnya. Jadi, ambillah secangkir kopi (atau teh, jika itu yang Anda sukai), dan mari kita mulai!

Navigasi yang User-Friendly

Imaginasi Anda berada di perpustakaan besar tanpa ada tanda atau organisasi. Frustrasi, kan? Itu adalah perasaan pengguna saat mereka datang ke situs yang dinavigasi buruk. Navigasi yang user-friendly seperti memiliki petugas perpustakaan yang membantu Anda mengarahkan rak-rak.

Berikut adalah contoh sederhana bagaimana membuat menu navigasi dasar dalam HTML:

<nav>
<ul>
<li><a href="index.html">Beranda</a></li>
<li><a href="about.html">Tentang</a></li>
<li><a href="services.html">Layanan</a></li>
<li><a href="contact.html">Kontak</a></li>
</ul>
</nav>

Kode ini membuat daftar tautan yang pengguna dapat klik untuk menavigasi situs Anda. Ingat, jaga agar sederhana dan intuitif!

Desain yang Mobile-Friendly

Dalam dunia saat ini, lebih banyak orang menjelajahi web melalui ponsel daripada komputer. Itu sebabnya desain yang mobile-friendly sangat penting. Mari kita lihat teknik CSS yang disebut media queries yang dapat membantu membuat situs Anda responsif:

/* gaya default untuk layar yang lebih besar */
body {
font-size: 16px;
}

/* gaya untuk layar yang kurang dari 600px */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}

Kode ini mengatur ukuran font untuk layar yang lebih kecil, membuat konten Anda lebih mudah dibaca di perangkat mobile.

Kecepatan Pemuatan Halaman

Tidak ada yang menyukai menunggu website yang lamban untuk dimuat. Itu seperti terjebak di lalu lintas saat Anda sudah terlambat untuk kerja! Berikut adalah beberapa tips untuk meningkatkan kecepatan pemuatan halaman Anda:

1. Optimalkan gambar
2. Minimalkan CSS dan JavaScript
3. Gunakan caching browser

Berikut adalah contoh sederhana bagaimana mengaktifkan caching browser menggunakan .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>

Kode ini memberitahu browser untuk menyimpan beberapa jenis file untuk periode yang ditentukan, mengurangi keperluan untuk memuat ulang mereka pada kunjungan berikutnya.

Struktur URL

URL yang bersih dan deskriptif seperti alamat jalan yang jelas. Mereka membantu pengguna dan mesin pencari untuk mengetahui apa halaman tersebut tentang. Berikut adalah contoh struktur URL yang baik:

https://www.myawesomeblog.com/kategori/seo/panduan-pemula-seo

Bandingkan ini dengan URL yang kurang optimal:

https://www.myawesomeblog.com/post.php?id=123

URL pertama secara jelas menunjukkan apa halaman tersebut tentang, sedangkan yang kedua kurang jelas dan tidak membantu.

Utilitas Tag Heading

Tag heading (H1, H2, H3, dll.) seperti judul bab dalam buku. Mereka membantu mengatur konten Anda dan membuatnya mudah bagi pengguna dan mesin pencari untuk memahami struktur halaman Anda.

Berikut adalah bagaimana menggunaan tag heading secara efektif:

<h1>Judul Utama Halaman</h1>
<h2>Bagian Utama Pertama</h2>
<p>Konten di sini...</p>
<h3>Subbagian Bagian Utama Pertama</h3>
<p>Lebih banyak konten...</p>
<h2>Bagian Utama Kedua</h2>
<p>Banyak lagi konten...</p>

Ingat, gunakan hanya satu tag H1 per halaman, dan jaga agar struktur heading Anda logis dan berhierarki.

Sitemaps

Sitemap seperti peta kendaraan di situs Anda. Itu membantu mesin pencari menemukan dan mengindeks semua halaman Anda. Berikut adalah contoh sitemap XML sederhana:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.myawesomeblog.com/</loc>
<lastmod>2023-05-15</lastmod>
<changefreq>hari</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.myawesomeblog.com/about</loc>
<lastmod>2023-05-10</lastmod>
<changefreq>bulan</changefreq>
<priority>0.8</priority>
</url>
</urlset>

Sitemap ini memberitahu mesin pencari tentang dua halaman di situs Anda, kapan mereka terakhir kali dimodifikasi, seberapa sering mereka berubah, dan kepentingannya relatif.

Catatan Akhir

Ingat, SEO tidak hanya tentang memuaskan mesin pencari; itu tentang menciptakan pengalaman yang bagus bagi pengguna Anda. Ketika Anda mengimplementasikan teknik ini, selalu bertanya kepada diri Anda: "Apakah ini membuat situs saya lebih berguna dan menyenangkan bagi pengunjung?"

Berikut adalah tabel yang menggabungkan metode kunci yang kita diskusikan:

Metode	Tujuan	Contoh
Navigasi yang User-Friendly	Bantu pengguna menemukan konten mudah	<nav><ul><li><a href="...">...</a></li></ul></nav>
Desain yang Mobile-Friendly	Pastikan situs bekerja baik di semua perangkat	@media (max-width: 600px) { ... }
Kecepatan Pemuatan Halaman	Tingkatkan pengalaman pengguna dan SEO	Optimalkan gambar, caching, minifikasi
Struktur URL	Buat URL deskriptif dan SEO-friendly	https://site.com/kategori/judul-halaman
Tag Heading	Organisir konten dan tingkatkan keterbacaan	<h1>Judul Utama</h1><h2>Subjudul</h2>
Sitemaps	Bantu mesin pencari mengindeks situs Anda	File sitemap XML

Seperti yang kita selesaikan pelajaran ini, saya teringat tentang seorang siswa yang pernah mengatakan kepadaku, "SEO terasa seperti seni hitam, tapi sekarang saya melihat itu hanya tentang membuat situs yang orang-orang sukai untuk gunakan." Dan itu adalah yang penting. Terus latih, terus belajar, dan terutama, terus membuat situs yang orang-orang sukai untuk gunakan. Sampai jumpa lagi, selamat mengoding!

Credits: Image by storyset