Langsung ke konten

SEO Dasar di HTML: Struktur Heading, Alt Text, dan Meta Description

Pelajari SEO dasar di HTML. Pahami struktur heading yang benar, alt text untuk gambar, meta description, dan Open Graph meta tags.

Tutorial
Belajar HTML untuk Pemula
Belajar HTML untuk Pemula
Advertisement

Artikel ini merupakan bagian dari seri Belajar HTML untuk Pemula di hanifmu.com. Setelah memahami head section, kita bahas cara mengoptimasi HTML untuk mesin pencari. SEO adalah teknik agar website muncul di hasil pencarian Google.

Apa itu SEO?

SEO (Search Engine Optimization) adalah teknik mengoptimasi website agar muncul di halaman atas hasil pencarian mesin pencari seperti Google.

Di level HTML, SEO berkaitan dengan:

  • Struktur heading
  • Alt text gambar
  • Meta tags
  • Semantic HTML
  • URL dan link

Struktur Heading yang Benar

Hierarki Heading

Gunakan heading secara hierarkis dari <h1> sampai <h6>:

<h1>Judul Utama</h1>
  <h2>Bagian 1</h2>
    <h3>Sub-bagian 1.1</h3>
    <h3>Sub-bagian 1.2</h3>
  <h2>Bagian 2</h2>
    <h3>Sub-bagian 2.1</h3>

Aturan Heading

  1. Hanya satu <h1> per halaman — Judul utama halaman
  2. Jangan loncat level — Jangan dari <h1> langsung ke <h3>
  3. Gunakan heading untuk struktur, bukan untuk styling
  4. Masukkan kata kunci di heading secara natural

Contoh yang Benar

<h1>Cara Belajar HTML untuk Pemula</h1>

<h2>Pengenalan HTML</h2>
<p>HTML adalah bahasa markup...</p>

<h2>Tag Dasar HTML</h2>
<h3>Tag Heading</h3>
<p>Tag heading digunakan untuk...</p>

<h3>Tag Paragraph</h3>
<p>Tag paragraph digunakan untuk...</p>

Contoh yang Salah

<!-- ❌ Loncat level -->
<h1>Judul Utama</h1>
<h3>Langsung ke h3</h3>

<!-- ❌ Banyak h1 -->
<h1>Judul 1</h1>
<h1>Judul 2</h1>
<h1>Judul 3</h1>

<!-- ❌ Heading untuk styling -->
<h1 style="font-size: 12px;">Teks kecil</h1>

Alt Text untuk Gambar

Mengapa Alt Text Penting?

  • Aksesibilitas — Screen reader membaca alt text untuk tunanetra
  • SEO — Google memahami isi gambar dari alt text
  • Fallback — Ditampilkan saat gambar gagal dimuat

Cara Menulis Alt Text

<!-- ❌ Tidak baik -->
<img src="foto.jpg" alt="" />
<img src="foto.jpg" alt="gambar" />
<img src="foto.jpg" />

<!-- ✅ Baik -->
<img src="foto.jpg" alt="Pemandangan gunung saat sunset" />
<img src="logo.png" alt="Logo perusahaan XYZ" />
<img src="chart.png" alt="Grafik penjualan Q1 2026 naik 20%" />

Tips Alt Text

  1. Deskripsikan isi gambar, bukan hanya menyebutkan “gambar”
  2. Gunakan kata kunci yang relevan secara natural
  3. Singkat tapi informatif — 1-2 kalimat
  4. Jangan keyword stuffing — Jangan paksa masukkan kata kunci

Meta Description

Meta description muncul di bawah judul di hasil pencarian Google:

<meta name="description" content="Pelajari HTML dari nol dengan panduan lengkap untuk pemula. Contoh kode, praktik terbaik, dan tips SEO." />

Tips Meta Description

  • Panjang: 150-160 karakter
  • Masukkan kata kunci di awal
  • Buats menarik — Ajak pengguna untuk klik
  • Unik untuk setiap halaman
<!-- ❌ Terlalu pendek -->
<meta name="description" content="Tutorial HTML." />

<!-- ❌ Terlalu panjang -->
<meta name="description" content="Artikel ini membahas tentang HTML dari awal hingga akhir dengan penjelasan yang sangat lengkap dan detail untuk pemula yang baru belajar programming..." />

<!-- ✅ Baik -->
<meta name="description" content="Belajar HTML untuk pemula. Panduan lengkap dengan contoh kode, tag dasar, dan tips praktis." />

Open Graph Meta Tags

Open Graph menentukan tampilan saat halaman dibagikan di media sosial:

<meta property="og:title" content="Belajar HTML untuk Pemula" />
<meta property="og:description" content="Panduan lengkap belajar HTML dari nol." />
<meta property="og:image" content="https://hanifmu.com/og-image.jpg" />
<meta property="og:url" content="https://hanifmu.com/belajar-html" />
<meta property="og:type" content="article" />

Elemen Open Graph

PropertyKeteranganContoh
og:titleJudul kontenJudul artikel
og:descriptionDeskripsi singkatMeta description
og:imageGambar representatifOG image 1200x630
og:urlURL halamanURL permanen
og:typeTipe kontenwebsite, article

Semantic HTML untuk SEO

Gunakan tag semantic untuk membantu Google memahami struktur:

<article>
  <header>
    <h1>Judul Artikel</h1>
    <time datetime="2026-09-07">7 September 2026</time>
  </header>

  <section>
    <h2>Bagian 1</h2>
    <p>Isi bagian 1...</p>
  </section>

  <section>
    <h2>Bagian 2</h2>
    <p>Isi bagian 2...</p>
  </section>
</article>

Google lebih memahami:

  • <article> — Ini adalah artikel
  • <h1> — Ini judul utama
  • <time> — Ini tanggal publikasi
  • <section> — Ini bagian-bagian

URL yang SEO-Friendly

<!-- ❌ URL tidak SEO-friendly -->
<a href="/page?id=123&cat=5">Baca selengkapnya</a>

<!-- ✅ URL SEO-friendly -->
<a href="/belajar-html-untuk-pemula">Baca selengkapnya</a>

Hubungkan halaman-halaman yang relevan:

<p>Setelah memahami <a href="/belajar-tag-html">tag HTML</a>, lanjut ke <a href="/belajar-css">belajar CSS</a>.</p>

Anchor Text

Teks link harus deskriptif:

<!-- ❌ Anchor text tidak jelas -->
<a href="/artikel">Klik di sini</a>

<!-- ✅ Anchor text deskriptif -->
<a href="/artikel">Baca panduan belajar HTML</a>

Contoh Halaman SEO-Friendly

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Belajar HTML untuk Pemula: Panduan Lengkap - Hanifmu</title>
    <meta name="description" content="Panduan belajar HTML lengkap untuk pemula. Mulai dari tag dasar hingga semantic HTML dengan contoh kode." />

    <link rel="canonical" href="https://hanifmu.com/belajar-html" />

    <meta property="og:title" content="Belajar HTML untuk Pemula" />
    <meta property="og:description" content="Panduan belajar HTML lengkap untuk pemula." />
    <meta property="og:image" content="https://hanifmu.com/og-html.jpg" />
    <meta property="og:url" content="https://hanifmu.com/belajar-html" />
  </head>
  <body>
    <article>
      <header>
        <h1>Belajar HTML untuk Pemula</h1>
        <time datetime="2026-09-07">7 September 2026</time>
      </header>

      <img src="cover.jpg" alt="Cover belajar HTML untuk pemula" />

      <section>
        <h2>Apa itu HTML?</h2>
        <p>HTML adalah bahasa markup untuk membuat halaman web...</p>
      </section>

      <section>
        <h2>Tag Dasar HTML</h2>
        <p>Pelajari tag-tag dasar seperti heading, paragraph, dan link...</p>
        <img src="contoh-tag.png" alt="Contoh tag HTML dasar" />
      </section>

      <section>
        <h2>Kesimpulan</h2>
        <p>HTML adalah fondasi web development...</p>
      </section>
    </article>
  </body>
</html>

Checklist SEO HTML

  • <title> unik dan mengandung kata kunci
  • <meta description> 150-160 karakter
  • <meta charset="UTF-8" di baris pertama
  • <meta name="viewport"> untuk responsif
  • Hanya satu <h1> per halaman
  • Heading hierarkis (h1 → h2 → h3)
  • Alt text untuk semua gambar
  • Semantic HTML (article, section, nav)
  • Open Graph meta tags
  • URL SEO-friendly
  • Link internal yang relevan

Ringkasan

  • Struktur heading hierarkis, satu <h1> per halaman
  • Alt text gambar deskriptif dan informatif
  • Meta description 150-160 karakter, menarik
  • Open Graph untuk tampilan di media sosial
  • Semantic HTML membantu Google memahami konten
  • URL dan anchor text yang SEO-friendly

Langkah Selanjutnya

Kamu sudah memahami SEO dasar di HTML. Artikel selanjutnya membahas Canvas dan SVG, cara membuat grafik dan animasi di HTML.