HTML Semantic Best Practices SEO Onpage
Ringkasan
HTML semantik = pakai elemen sesuai maknanya. Ini meningkatkan SEO, aksesibilitas, dan kemudahan maintenance.
Konsep Dasar
- Pakai
<article>,<section>,<nav>,<main>bukan<div>serba bisa. - Satu
<h1>per view; hierarki heading runtut. - Atribut
langdi<html>,altdi gambar,titledi link panjang. - Struktur data (JSON-LD) untuk rich result (terpisah dari HTML, tapi dipasang di
<head>/<body>).
Cara Kerja / Struktur
html<!doctype html>
<html lang="id">
<head>
<title>Belajar HTML — Panduan</title>
<meta name="description" content="...">
</head>
<body>
<main><article>...</article></main>
</body>
</html>Catatan Implementasi
<title>unik & deskriptif per halaman;<meta description>ringkas.- Heading menggambarkan struktur, bukan gaya.
Kesalahan Umum
<div>untuk semua (semantik hilang).- Title duplikat di semua halaman.
Glosarium
- Semantic HTML: elemen dipakai sesuai maknanya.
- Rich result: tampilan pencarian khusus (rating, breadcrumb).