SEO - Reka Bentuk & Tata Letak

Selamat datang, para pemula pengembang web! Hari ini, kita akan masuk ke dunia menarik dari SEO reka bentuk 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, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai!

Navigasi User-Friendly

Imaginasi Anda berada di perpustakaan besar tanpa ada tanda atau organisasi. Frustrasi, kan? Itu seperti yang Anda rasakan saat Anda mendarat di situs web yang navigasi buruk. Navigasi user-friendly adalah seperti memiliki petugas perpustakaan yang membantu Anda mengarahkan rak-rak.

Berikut adalah contoh sederhana tentang cara membuat menu navigasi dasar dalam HTML:

<nav>
<ul>
<li><a href="index.html">Rumah</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!

Reka Bentuk yang Mobile-Friendly

Dalam dunia saat ini, lebih banyak orang menjelajahi web melalui ponsel daripada komputer. Itu mengapa reka bentuk 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 besar */
body {
font-size: 16px;
}

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

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

Kecepatan Muatan Halaman

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

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

Berikut adalah contoh sederhana tentang cara 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 mengatakan kepada browser untuk menyimpan beberapa jenis file untuk periode yang ditentukan, mengurangi kebutuhan untuk memuat ulang mereka pada kunjungan berikutnya.

Struktur URL

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

https://www.myawesomeblog.com/categories/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 itu tentang, sedangkan yang kedua kurang jelas dan kurang membantu.

Gunakan Tag Heading

Tag heading (H1, H2, H3, dll.) adalah 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 cara 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>Lebih banyak konten...</p>

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

Sitemaps

Sebuah sitemap adalah seperti peta panduan 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>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.myawesomeblog.com/about</loc>
<lastmod>2023-05-10</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>

Sitemap ini memberitahu mesin pencari tentang dua halaman di situs Anda, kapan mereka terakhir diubah, how often they change, and their relative importance.

Catatan Akhir

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

Berikut adalah tabel yang menggabungkan metode utama yang kita diskusikan:

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

Ketika kita mengakhiri les ini, saya teringat tentang seorang murid yang pernah berkata kepadaku, "SEO terasa seperti seni hitam, tapi sekarang saya melihat itu hanya tentang membuat situs yang orang suka menggunakan." Dan itu adalah yang penting. Teruslatih, terus belajar, dan terutama, terus membuat situs yang pengguna senang gunakan. Sampai jumpa lagi, selamat coding!

Credits: Image by storyset