title dan Perannya dalam SEO
Tulis judul halaman yang efektif agar mendapat peringkat baik di mesin pencari.
title dan Perannya dalam SEO adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Elemen Judul
Elemen <title> menetapkan judul dokumen—salah satu bagian HTML terpenting:
- Ditampilkan pada tab peramban
- Ditampilkan dalam hasil mesin pencari (SERP)
- Digunakan sebagai nama penanda halaman bawaan
- Dibacakan oleh pembaca layar saat halaman dimuat
Tempat Judul Diletakkan
Elemen judul berada di dalam <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML5 — CoddyKit</title>
</head>
<body>...</body>
</html>Praktik Terbaik Pengoptimalan Mesin Pencari untuk Judul
Menulis judul yang efektif untuk pengoptimalan mesin pencari:
- Batasi hingga kurang dari 60 karakter (Google memotong judul yang lebih panjang)
- Sertakan kata kunci utama di dekat awal
- Sertakan nama situs (biasanya di akhir)
- Buat judul yang unik untuk setiap halaman di situs
- Buat judul yang deskriptif dan menarik—itulah hal pertama yang dibaca pengguna saat mencari
Pola Judul: Halaman — Situs
Pola judul umum:
<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>
<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>
<!-- Avoid: -->
<title>Untitled Document</title> <!-- terrible -->
<title>Page 1</title> <!-- not descriptive -->Judul Dinamis dalam Aplikasi Satu Halaman
Aplikasi satu halaman harus memperbarui judul saat navigasi:
// React / Next.js:
// <title> is set in document.head or via framework
// Vanilla JavaScript:
function navigateTo(page) {
const titles = {
home: 'Home — MyApp',
about: 'About Us — MyApp',
blog: 'Blog — MyApp',
};
document.title = titles[page] || 'MyApp';
history.pushState({}, '', '/' + page);
}Judul dan Open Graph
Elemen judul dilengkapi Open Graph untuk berbagi di media sosial:
<head>
<title>HTML5 Semantic Elements Guide — CoddyKit</title>
<!-- Override title for social sharing: -->
<meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->Menguji Panjang Judul
Cara memeriksa panjang judul di DevTools:
- Buka Chrome DevTools → panel Elements
- Cari
<head>→<title> - Hitung karakter, termasuk spasi
- Atau: audit Lighthouse → pengoptimalan mesin pencari → Dokumen memiliki judul
Nama Schema.org vs Judul
Judul halaman vs nama Schema.org:
<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>
<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
"@type": "Product",
"name": "Widget Pro"
}
</script>Aksesibilitas Judul
Judul adalah hal pertama yang didengar pengguna pembaca layar saat membuka halaman baru:
- Selalu gunakan judul yang bermakna
- Untuk halaman modal/dialog atau aplikasi satu halaman: perbarui judul untuk menjelaskan keadaan saat ini
- Pembaca layar membacakan judul saat halaman dimuat dan setiap kali rute berubah
- Buat judul yang tetap masuk akal saat dibaca tanpa konteks halaman
Judul Terinternasionalisasi
Untuk situs multibahasa, tetapkan judul dalam bahasa halaman:
<!-- French page: -->
<html lang="fr">
<head>
<title>Apprendre HTML5 — CoddyKit</title>
</head>
<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">Judul dalam Bingkai Sebaris
Saat halaman dimuat dalam bingkai sebaris, judul bingkai sebaris tersebut penting:
<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->Mengukur Dampak SEO Judul
Alat untuk memeriksa pengoptimalan judul:
- Lighthouse → audit pengoptimalan mesin pencari
- Google Search Console → Performance (lihat judul pencarian yang sebenarnya)
- SEMrush / Ahrefs → periksa pratinjau cuplikan SERP
- Ekstensi Chrome: MozBar, SEO Meta in 1 Click
Pemeriksaan Singkat
Berapa jumlah maksimum karakter yang disarankan untuk judul halaman HTML?
Rekap: Judul dan SEO
Hal-hal penting tentang judul:
- Di dalam
<head>; unik untuk setiap halaman; wajib - Kurang dari 60 karakter; kata kunci di dekat awal; nama situs di akhir
- Perbarui dalam aplikasi satu halaman pada setiap navigasi
- Melengkapi og:title untuk berbagi di media sosial
- Pembaca layar membacakan judul saat halaman dimuat
Pertanyaan yang Sering Diajukan
Apakah pelajaran “title dan Perannya dalam SEO” gratis?
Ya — teks lengkap “title dan Perannya dalam SEO” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “title dan Perannya dalam SEO”?
Tulis judul halaman yang efektif agar mendapat peringkat baik di mesin pencari. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “title dan Perannya dalam SEO” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- title dan Perannya dalam SEO
- meta charset viewport author dan description
- URL Kanonis dan meta robots
- Favicon dan Ikon Apple Touch