Belajar HTML Part 8: HTML untuk SEO (Meta Tag, Head & Best Practice)

Pada Part 7, kamu sudah memahami bagaimana Semantic HTML membantu Google membaca struktur konten. Sekarang di Part 8, kita masuk ke level berikutnya: HTML untuk SEO.

Di sinilah HTML benar-benar berperan besar dalam:

  • Ranking Google
  • Snippet pencarian
  • CTR (Click Through Rate)

Mengapa HTML Penting untuk SEO?

Search engine tidak melihat desain, tetapi membaca kode HTML.

HTML yang SEO-friendly membantu Google:

  • Memahami topik halaman
  • Menentukan prioritas konten
  • Membuat rich snippet

Struktur Head HTML untuk SEO

Bagian head adalah fondasi SEO on-page.

<head>
  <meta charset="UTF-8">
  <title>Judul Halaman</title>
  <meta name="description" content="Deskripsi halaman">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Title Tag

Title adalah faktor SEO paling kuat.

Aturan best practice:

  • Panjang 50–60 karakter
  • Mengandung keyword utama
  • Unik setiap halaman

<title>HTML untuk SEO Modern – Belajar HTML Part 8</title>

Meta Description

Meta description tidak langsung memengaruhi ranking, tapi sangat berpengaruh ke CTR.

<meta name="description" content="Panduan HTML untuk SEO modern, meta tag dan struktur head HTML. Belajar HTML Part 8 lengkap dan praktis.">

Tips:

  • 140–160 karakter
  • Natural & mengundang klik

Meta Tag Penting untuk SEO

Meta Viewport

Wajib untuk mobile-friendly.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Meta Robots

Mengatur indexing halaman.

<meta name="robots" content="index, follow">

Gunakan:

  • index, follow → halaman publik
  • noindex → halaman admin / internal

Heading Structure yang SEO-Friendly

Heading membantu Google memahami hierarki konten.

Aturan emas:

  • H1 hanya satu
  • H2 untuk topik utama
  • H3–H6 untuk turunan

<h1>Judul Artikel</h1>
<h2>Topik Utama</h2>
<h3>Sub Topik</h3>

Optimasi Konten HTML

Paragraf Awal

Letakkan keyword utama di 100 kata pertama.

Internal Link

Internal link membantu:

  • Crawl Google
  • Topical authority

<a href="/html/dokumentasi-tag-html-lengkap/">Dokumentasi Tag HTML</a>

Alt Text pada Gambar

Alt text penting untuk:

  • Image SEO
  • Aksesibilitas

<img src="example/dokumentasi-tag-html-lengkap.webp" alt="Dokumentasi tag HTML lengkap untuk pemula hingga menengah" width="100%">

Kesalahan SEO HTML yang Sering Terjadi

  • Judul duplikat
  • Tidak ada meta description
  • Heading lompat (H1 ke H4)
  • Keyword stuffing

Ringkasan Part 8

  • HTML adalah fondasi SEO
  • Head section wajib optimal
  • Struktur heading menentukan kualitas konten

Lanjutan Materi

Di Part 9, kita akan membahas:

  • HTML Image & Media SEO
  • Optimasi gambar & video
  • Lazy loading & performance

Sebelumnya: Part 7 Semantic HTML

Leave a Comment