Tips Tag Head HTML SEO Friendly

Daftar Isi

  • Pendahuluan
  • Benefit Setelah Baca
  • Meta Description
  • Title
    • Tips Nulis Title yang Mantap
  • Favicon
    • Tips Bikin Favicon yang Keren
  • Meta Chartset
    • Kenapa Ini Penting?
  • Tag Viewport untuk Responsivitas
    • Cara Pakainya
    • Penjelasan Singkat
    • Kenapa Ini Wajib?
  • Canonical Tag
    • Cara pakainya:
    • Kenapa harus pakai?
    • Tips:
  • Optimalkan Link dan Resource
    • Apa sih maksudnya optimasi link dan resource?
    • Cara gampangnya:
    • Contoh simple:
    • Kenapa ini penting?
  • Open Graph
    • Contohnya kayak gimana?
    • Cara pakai Open Graph gampang banget, taruh di <head>:
    • Penjelasan singkatnya:
    • Kenapa wajib?
  • Twitter Card
    • Cara pakai Twitter Card
    • Penjelasan singkat:
    • Kenapa penting?
  • Tag Language di HTML
    • Cara pakainya gampang banget, tinggal pasang di tag <html> kamu:
    • Kenapa ini penting?
  • Hindari Penggunaan JavaScript Berlebih
    • Kenapa harus hati-hati sama JavaScript?
    • Tips supaya JavaScript kamu tetap ngebut:
    • Contoh loading JavaScript yang baik:
  • Penutup

Pendahuluan

Kalau kamu sering ngoding HTML, pasti nggak asing sama yang namanya <head>. Nah, walaupun bagian ini nggak nongol langsung di tampilan web, tapi jangan salah, ini salah satu bagian yang paling penting buat bikin website kamu dilirik Google sama teman-temannya.

Benefit Setelah Baca

  • ✅ Nggak bingung lagi fungsi tag-tag di <head>.
  • ✅ Bisa bikin website yang nggak cuma keren tapi juga SEO-ready.
  • ✅ Bikin Google makin ngunggulin sama website kamu.

Meta Description

Ini kayak caption buat halaman web kamu. Kalau kamu bisa bikin caption IG, kamu pasti bisa bikin meta description. Intinya: singkat, padat, jelas, dan bikin orang pengen ngeklik.


<meta name="description" content="BuildWithAngga adalah platform belajar coding terbaik di Indonesia yang di ajarkan berdasarkan kasus nyata.">

Title

Tag <title> adalah bagian dari HTML yang wajib ada di setiap halaman web. Letaknya di dalam <head>, dan fungsinya penting banget buat muncul di tab browser dan muncul di hasil pencarian Google.

Title ini penting karena Google baca dan nilai isi <title> buat nentuin topik halaman kamu. Judul yang jelas dan nyantol bisa naikin CTR (Click-Through Rate) alias bikin orang lebih tertarik ngeklik link kamu di Google. Judul yang asal-asalan bisa bikin Google mikir halaman kamu gak relevan

Tips Nulis Title yang Mantap

Masukin Kata Kunci Utama

Misalnya kamu nulis artikel tentang "Cara Membangun Website Belajar", ya tulis aja kata itu di judul.


<title>Cara Membangun Website Belajar Buat Paling Pemula</title>

Bikin Menarik & Jelas

Judul itu ibarat etalase toko. Kalau membosankan, ya orang males masuk. Jadi tambahin daya tarik:


<title>Cara Membangun Website Belajar Buat Paling Pemula</title>

Pada bagian “Buat Paling Pemula” bikin orang langsung berpikir pembelajaran yang akan mereka dapatkan pasti tidak sangat sulit jadi bikin mereka pengen baca.

Jangan Kepanjangan

Idealnya antara 50–60 karakter. Kalau terlalu panjang, Google bisa motong dan hasilnya jadi kurang bagus.

Favicon

Favicon (singkatan dari favorite icon) adalah ikon kecil yang muncul di:

  • Tab browser
  • Daftar bookmark
  • History browser
  • Sidebar tab di mobile browser
  • Bahkan kadang muncul juga di hasil pencarian Google (kalau beruntung)

Contohnya? Kalau kamu buka YouTube, pasti lihat logo merah kecil di tab browser. Nah itu favicon-nya YouTube. Keliatannya remeh, tapi ini bikin web kamu keliatan lebih “niat”. Contoh buatnya kayak gini :


<link rel="icon" href="/favicon.ico" type="image/x-icon">

Tips Bikin Favicon yang Keren

  • Ukurannya kecil, biasanya 16x16 px atau 32x32 px
  • Simpel, jelas, dan mudah dikenali
  • Boleh pakai logo, inisial, atau simbol khas dari brand kamu
  • Gunakan generator favicon kalau butuh banyak versi (favicon untuk dark mode, Android, iOS, dll)

Meta Chartset

Ini buat ngatur biar karakter kayak huruf é atau emoji bisa tampil dengan benar.


<meta charset="UTF-8">

Kenapa Ini Penting?

Supaya karakter tampil dengan benar, contohnya:

<p>Saya suka belajar di BWA dan membaca artikel-nya!</p>

Tanpa UTF-8, bisa-bisa emoji dan huruf artikel-nya jadi simbol aneh karena encoding-nya salah.

Tag Viewport untuk Responsivitas

Sekarang coba buka website yang nggak responsive di HP. Pasti tampilannya kayak nge-zoom out total, kecil semua, dan harus di-pinch buat baca isinya. Nah, itu karena web-nya belum pakai tag viewport.

Tag ini penting banget supaya tampilan web kamu bisa menyesuaikan diri dengan ukuran layar pengunjung mau itu HP, tablet, laptop, atau monitor ultrawide.

Tanpa tag ini, browser bakal nganggep lebar layar web kamu tuh tetap kayak layar desktop (sekitar 980px), padahal sekarang banyak user buka dari HP.

Cara Pakainya

Masukin ini ke dalam <head> HTML kamu:


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

Penjelasan Singkat

  • width=device-width: Maksudnya, lebar tampilan website bakal ngikutin lebar layar perangkat yang dipakai.
  • initial-scale=1.0: Ngatur tingkat zoom awal jadi 1 (alias 100%), biar tampilannya langsung pas.

Kenapa Ini Wajib?

  • Bikin tampilan web kamu mobile-friendly tanpa harus ngoding dua kali.
  • Gak perlu zoom-zoom kalau buka dari HP.
  • Desain kamu tetap rapi dan terbaca di semua ukuran layar.
  • Google juga lebih suka web yang responsive (poin plus buat SEO!).

Fun Fact: Google ngasih ranking lebih bagus ke website yang mobile-friendly, jadi jangan sampai ketinggalan pakai tag ini, ya!

Canonical Tag

Nah, pernah nggak sih kamu punya dua URL yang isinya sama aja? Contohnya nih, kamu punya:

  • https://contoh.com/produk/sepatu
  • https://contoh.com/produk/sepatu?ref=instagram

Padahal isinya sama, cuma URL-nya doang yang beda. Nah, Google tuh bisa bingung, nih, kira-kira mana yang asli? Kalau bingung, bisa-bisa website kamu malah kalah saing di hasil pencarian.

Makanya, ada yang namanya Canonical Tag. Fungsinya kayak bilang ke Google, “Eh, yang ini ya versi asli dan yang harus diutamain!”

Cara pakainya:

Pasang ini di <head> halaman kamu yang duplikat:


<link rel="canonical" href="<https://contoh.com/produk/sepatu>">

Jadi Google ngerti, yang ini yang bener-bener kamu pengen muncul di pencarian.

Kenapa harus pakai?

  • Biar Google gak bingung dan gak kasih nilai jelek karena ada konten duplikat.
  • Biar SEO kamu tetep joss dan gak ‘terpecah’ karena banyak URL.
  • Biar website kamu kelihatan lebih profesional di mata Google.

Tips:

  • Selalu tulis URL lengkap, jangan setengah-setengah.
  • Jangan dipakai buat halaman yang isinya beda ya, cuma buat yang mirip banget aja.
  • Ini penting banget buat kamu yang suka upload produk sama konten yang mirip-mirip.

Optimalkan Link dan Resource

Nah, ini juga bagian penting banget supaya website kamu nggak cuma tampil keren, tapi juga cepat banget loadingnya. Kamu pasti nggak mau kan, pengunjung nunggu lama cuma buat liat gambar atau CSS yang berat?

Apa sih maksudnya optimasi link dan resource?

Intinya, kamu harus pinter-pinter ngatur gimana file-file kayak gambar, CSS, JavaScript, sama font dimuat di halaman web kamu. Kalau asal-asalan, bisa bikin website kamu lemot, dan itu bikin pengunjung bete dan cabut!

Cara gampangnya:

  • Gunakan file versi kecil (minified) buat CSS dan JS. Jadi, file-nya diperkecil tanpa mengurangi fungsi supaya loading lebih cepat.
  • Pakai lazy loading buat gambar dan video, supaya file multimedia cuma dimuat saat pengunjung scroll ke situ.
  • Gunakan format gambar modern kayak WebP yang ukurannya kecil tapi kualitas tetap oke.
  • Manfaatkan caching browser supaya file yang sama nggak terus-terusan didownload ulang.
  • Gunakan CDN (Content Delivery Network) supaya file kamu disimpan di server yang deket sama pengunjung.

Contoh simple:


<!-- Minified CSS -->
<link rel="stylesheet" href="style.min.css">

<!-- Lazy loading gambar -->
<img src="foto.webp" loading="lazy" alt="Foto BuildWithAngga">

<!-- Script di bagian bawah biar nggak blocking -->
<script src="script.min.js" defer></script>

Kenapa ini penting?

Google suka banget sama website yang cepet loading-nya. Selain itu, pengunjung juga pasti senang karena gak perlu nunggu lama buat liat konten kamu.

Open Graph

Pernah nggak sih kamu share link website di sosmed kayak Facebook, Twitter, atau WhatsApp, terus yang muncul cuma link doang? Atau malah gambarnya nggak sesuai sama judulnya?

Nah, itu karena kamu belum pasang yang namanya Open Graph. Ini semacam “kartu identitas” buat halaman web kamu supaya pas dibagiin ke sosmed, tampilannya cakep dan informatif.

Contohnya kayak gimana?

Pas kamu pasang Open Graph, kalau kamu share link, yang muncul bisa kaya gini:

  • Gambar keren
  • Judul yang menarik
  • Deskripsi singkat yang jelas

Jadi yang liat langsung tergoda buat ngeklik.

Cara pakai Open Graph gampang banget, taruh di <head>:


<meta property="og:title" content="BuildWithAngga - Belajar Coding dari Kasus Nyata">
<meta property="og:description" content="Platform belajar coding terbaik yang bikin kamu siap kerja!">
<meta property="og:image" content="<https://buildwithangga.com/assets/og-image.jpg>">
<meta property="og:url" content="<https://buildwithangga.com>">
<meta property="og:type" content="website">

Penjelasan singkatnya:

  • og:title = Judul yang tampil di preview.
  • og:description = Deskripsi singkat.
  • og:image = Gambar yang muncul di preview.
  • og:url = URL halaman.
  • og:type = Jenis konten, biasanya website atau article.

Kenapa wajib?

  • Biar link kamu di sosmed makin menarik dan profesional.
  • Meningkatkan klik dari sosmed karena tampilannya kece.
  • Biar branding kamu makin kuat.

Twitter Card

Kalau kamu aktif di Twitter dan sering share link, kamu pasti pengen tampilannya kece juga, kan? Nah, Twitter Card ini fungsinya mirip sama Open Graph, tapi khusus buat Twitter.

Dengan Twitter Card, saat kamu share link, bakal muncul preview yang cakep: ada gambar, judul, dan deskripsi singkat yang bikin orang pengen klik.

Cara pakai Twitter Card

Taruh ini di <head> halaman kamu:


<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="BuildWithAngga - Belajar Coding dari Kasus Nyata">
<meta name="twitter:description" content="Platform belajar coding terbaik yang bikin kamu siap kerja!">
<meta name="twitter:image" content="<https://buildwithangga.com/assets/twitter-image.jpg>">
<meta name="twitter:site" content="@buildwithangga">

Penjelasan singkat:

  • twitter:card: Jenis kartu yang mau dipakai. summary_large_image biasanya paling cakep karena ada gambar besar.
  • twitter:title: Judul yang muncul di kartu.
  • twitter:description: Deskripsi singkatnya.
  • twitter:image: Link gambar yang mau ditampilkan.
  • twitter:site: Username Twitter kamu (optional tapi bagus buat branding).

Kenapa penting?

  • Biar tweet kamu makin menarik perhatian.
  • Bisa ningkatin klik dan followers juga karena tampilannya lebih kece.
  • Bikin branding kamu makin dikenal.

Tag Language di HTML

Pernah nggak sih kamu buka halaman web terus teksnya aneh-aneh, kayak kebalik, atau malah hurufnya nggak muncul dengan benar? Salah satu penyebabnya bisa karena kamu nggak set bahasa di HTML kamu.

Nah, tag language ini berguna buat ngasih tau browser dan mesin pencari, ini website kamu pakai bahasa apa. Jadi, mereka bisa nampilinnya dengan bener, dan mesin pencari juga ngerti target audiens kamu.

Cara pakainya gampang banget, tinggal pasang di tag <html> kamu:


<html lang="id">

Kalau website kamu pakai bahasa Indonesia, pakai id. Kalau bahasa Inggris, pakai en.

Kenapa ini penting?

  • Biar browser ngerti bahasa yang dipakai, supaya teks bisa ditampilkan dengan tepat.
  • Mesin pencari bisa lebih mudah memahami target pengunjung kamu.
  • Membantu tools aksesibilitas buat pengguna dengan kebutuhan khusus.

Hindari Penggunaan JavaScript Berlebih

Kadang, kita suka semangat banget pas bikin website, pengen segala fitur serba keren dan interaktif pake JavaScript. Tapi, jangan sampai kebanyakan JavaScript malah bikin website kamu jadi lemot dan berat, ya!

Kenapa harus hati-hati sama JavaScript?

Karena kalau file JS-nya besar atau kebanyakan, loading website jadi lama, pengunjung jadi bete, dan Google juga bisa kasih nilai kurang bagus buat SEO kamu.

Tips supaya JavaScript kamu tetap ngebut:

  • Gunakan hanya yang perlu saja. Jangan asal comot library atau script yang gak dipakai.
  • Minify dan compress file JavaScript biar ukurannya kecil.
  • Load script secara asynchronous pakai async atau defer supaya gak blocking proses loading halaman.
  • Pakai lazy loading buat fitur yang gak langsung dipakai di awal.
  • Evaluasi terus performa website kamu pake tools kayak Google PageSpeed Insights atau Lighthouse.

Contoh loading JavaScript yang baik:


<script src="script.min.js" defer></script>

Dengan defer, browser bakal tetap ngebaca HTML dulu, baru eksekusi JavaScript setelahnya. Jadi, halaman bisa tampil lebih cepat.

Penutup

Nah, itu dia teman-teman, beberapa tag penting di <head> yang wajib kamu tahu biar website kamu nggak cuma cakep dilihat, tapi juga ramah sama mesin pencari dan pengunjung. Ingat, walaupun tag-tag ini kelihatannya kecil dan tersembunyi, pengaruhnya besar banget buat performa dan SEO web kamu.

Jadi, jangan cuma asal bikin website, tapi pastiin juga kamu ngerti dan manfaatin tag-tag ini dengan baik. Dengan begitu, website kamu bukan cuma keren, tapi juga makin gampang ditemukan orang di internet. Selamat ngoding dan terus semangat bikin website kece.