divclassid

Elemen HTML yang sebaiknya ada di 'head'

Photo by James Orr on Unsplash

Elemen HTML yang sebaiknya ada di 'head'

divclassid's photo
divclassid
·

4 min read

Elemen <head> digunakan untuk menampung elemen-elemen HTML yang fungsinya memberi informasi kepada peramban, mesin pencari, dan situs lain tentang halaman web yang sedang dan akan diakses. Isi dari elemen ini akan memengaruhi cara peramban dalam menampilkan web dan cara mesin pencari serta situs lain dalam menyajikan informasi mengenai web tersebut.

Ada begitu banyak elemen yang bisa digunakan pada <head> dan kamu bisa melihat daftarnya di laman htmlhead.dev. Namun, setidaknya beberapa elemen berikut perlu ada meskipun kita hanya membuat prototipe atau contoh latihan sederhana.

Elemen-elemen utama pada <head>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Judul Halaman Web</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="script.js"></script>
</head>

Berikut penjelasannya:

<meta charset="UTF-8">

Elemen ini akan mengatur encoding karakter yang digunakan pada web. Nilai UTF-8 direkomendasikan karena sudah mendukung hampir seluruh karakter dan simbol dari berbagai bahasa di dunia.

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

Elemen ini akan mengatur beberapa hal terkait viewport atau area web yang kita lihat pada peramban. Hal yang akan diatur tersebut ditulis di dalam atribut content, antara lain:

  • width=device-width: Nilai ini akan membuat lebar web didasarkan pada lebar layar perangkatnya.
  • initial-scale=1.0: Nilai ini akan memastikan web tidak ter-zoom saat pertama kali ditampilkan.

<title>

Elemen ini akan menampilkan judul halaman web yang sedang diakses pada tab peramban. Peramban juga akan menggunakan isi dari elemen ini untuk web yang ingin di-bookmark.

<link rel="stylesheet" href="style.css">

Elemen ini akan menghubungkan berkas HTML dengan berkas CSS yang mengatur tampilan atau visual web. Atribut href digunakan untuk menunjukkan lokasi dari berkas tersebut.

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

Elemen ini akan menghubungkan berkas HTML dengan berkas JavaScript yang membuat web bisa tampil dinamis dan interaktif. Atribut src digunakan untuk menunjukkan lokasi dari berkas tersebut.

Elemen ini biasanya diletakkan sebelum (di atas) tag penutup </body>. Namun, kini tempat terbaik untuk meletakkannya adalah di dalam <head> dengan perlu menambahkan atribut defer pada tag pembukanya (alasannya dapat dibaca pada artikel berjudul Efficiently load JavaScript with defer and async).

Selain elemen-elemen di atas, untuk web yang sudah ter-deploy atau sudah dapat diakses secara daring, saya menyarankan beberapa elemen berikut juga perlu ditambahkan.

Rekomendasi elemen-elemen pada <head>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="DESKRIPSI HALAMAN">
  <meta name="author" content="NAMA KREATOR">
  <meta name="robots" content="index, follow">
  <meta name="google-site-verification" content="TOKEN_VERIFIKASI">
  <meta name="theme-color" content="#0b6758">
  <!-- Open Graph start -->
  <meta name="twitter:card" content="summary_large_image">
  <meta property="og:url" content="ALAMAT_HALAMAN">
  <meta property="og:type" content="website">
  <meta property="og:title" content="JUDUL HALAMAN">
  <meta property="og:description" content="DESKRIPSI HALAMAN">
  <meta property="og:image" content="GAMBAR_HALAMAN">
  <meta property="og:image:alt" content="DESKRIPSI GAMBAR">
  <meta property="og:site_name" content="NAMA SITUS">
  <meta property="og:locale" content="id_ID">
  <!-- Open Graph end -->
  <title>Judul Halaman Web</title>
  <base href="ALAMAT_UTAMA_SITUS">
  <link rel="icon" type="image/x-icon" href="favicon.png">
  <link rel="stylesheet" href="style.css">
  <script defer src="script.js"></script>
</head>

Berikut penjelasannya:

<meta name="description" content="DESKRIPSI HALAMAN">

Elemen ini akan menjelaskan deskripsi singkat (kurang dari 150 karakter) tentang halaman web tersebut. Mesin pencari akan menggunakan isi dari elemen ini untuk ditampilkan pada hasil penelusuran, sehingga penting untuk digunakan agar web berpeluang mendapat peringkat penelusuran yang lebih tinggi.

Contoh hasil penelusuran mesin pencari menampilkan isi Meta Description

<meta name="author" content="NAMA KREATOR">

Elemen ini akan menyimpan nama kreator dari konten yang dibuat pada halaman web tersebut, sehingga cocok digunakan jika jumlah kontributor webnya lebih dari seorang.

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

Elemen ini akan memberi informasi kepada mesin pencari bagaimana seharusnya robot crawl mereka menangani halaman web tersebut. Nilai index, follow artinya halaman web tersebut mengizinkan untuk diindeks (ditampilkan) ke hasil penelusuran dan mengizinkan pula untuk ikut mengindeks semua tautan yang ada di dalamnya, baik yang mengarah ke halaman lain maupun ke situs lain.

<meta name="google-site-verification" content="TOKEN_VERIFIKASI">

Jika kita ingin mengeklaim kepemilikan situs sehingga dapat memantau statistik dan mengelolanya di Google Search Console, maka tempatkan token verifikasinya pada elemen ini.

<meta name="theme-color" content="#0b6758">

Elemen ini akan menyesuaikan warna antarmuka pengguna disekitarnya dengan warna yang kita inginkan. Sejauh pemahaman saya efeknya baru akan tampil ketika web diakses melalui peramban Chrome Android.

Contoh tampilan antarmuka yang menggunakan Meta Theme Color

Open Graph

<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="ALAMAT_HALAMAN">
<meta property="og:type" content="website">
<meta property="og:title" content="JUDUL HALAMAN">
<meta property="og:description" content="DESKRIPSI HALAMAN">
<meta property="og:image" content="GAMBAR_HALAMAN">
<meta property="og:image:alt" content="DESKRIPSI GAMBAR">
<meta property="og:site_name" content="NAMA SITUS">
<meta property="og:locale" content="id_ID">

Saat menggunakan media sosial, kita tentu pernah melihat pratinjau dari halaman web yang dibagikan baik oleh orang lain maupun kita sendiri. Pratinjau tersebut dibentuk oleh Open Graph.

Contoh pratinjau Twitter yang menggunakan Open Graph

Khusus untuk media sosial Twitter, perlu ada penambahan elemen <meta name="twitter:card" content="summary_large_image"> agar pratinjau tersebut dapat tampil. Meskipun Twitter punya mekanisme tersendiri untuk membentuk pratinjau (disebut Twitter Cards), tapi mereka juga mendukung Open Graph sehingga penggunaannya menjadi opsional.

<base href="ALAMAT_UTAMA_SITUS">

Elemen ini akan membuat semua alamat relatif pada halaman web tersebut (seperti berkas gambar dan tautan antara halaman) didasarkan pada alamat web yang tertulis. Maka dari itu, penting bagi kita untuk menulis alamat utama situs pada elemen ini agar tidak terjadi kegagalan dalam menemukan berkas atau halaman yang dimaksud.

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

Elemen ini akan menyisipkan ikon web pada tab peramban. Beberapa peramban juga akan menampilkan ikon ini ketika web disimpan di-bookmark atau ketika ditambahkan ke halaman awal (start page) peramban.

Demikian pembahasan dari elemen HTML yang sebaiknya ada di <head>. Rekomendasi di atas sepenuhnya merupakan pilihan pribadi dan kamu tentu dapat mengubahnya sesuai kebutuhan.

Semoga bermanfaat.

HTMLWeb Development