SEO atau singkatan dari Search Engine Optimization merupakan aspek penting agar website yang kita buat bisa muncul di hasil pencarian Google ataupun mesin pencari lainnya. Salah satu cara dasar untuk melakukan optimasi SEO adalah dengan menggunakan meta tag yang ditempatkan didalam bagian tag <head> pada struktur HTML. Pada artikel ini, kita akan memahami tentang meta tag, fungsi bagian <head>, dan praktik dasar SEO dalam HTML agar website kamu lebih mudah dikenali oleh mesin pencari.
Meta Tag Head
Meta tag adalah potongan kode pada HTML yang berada didalam elemen <head> untuk memberikan intruksi kepada mesin pencari tentang konten halaman yang kita buat. Informasi dari tag tidak akan terlihat oleh pengguna secara langsung, tetapi sangat berpengaruh pada UX (User Experience). Berikut adalah contoh dari struktur dari meta tag dan tentunya SEO Friendly.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn About Meta Tag & SEO HTML | NganggurDev</title>
<meta name="description" content="Description dor CTA (Call To Action) or Keyword">
<link rel="canonical" href="https://www.nganggurdev.com/article/learn-html-for-beginners-8-meta-tags-and-seo-in-html">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="title for sharing into socmed">
<meta property="og:description" content="short description for sharing into socmed.">
<meta property="og:image" content="https://www.nganggurdev.com/img/og.jpg">
<meta property="og:url" content="https://www.nganggurdev.com/article/learn-html-for-beginners-8-meta-tags-and-seo-in-html">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<!-- Schema.org -->
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Article",
"headline":"Learn About Meta Tag & SEO HTML",
"image":"https://www.nganggurdev.com/img/og.jpg",
"datePublished":"2025-07-21",
"author":{"@type":"Person","name":"NganggurDev"}
}
</script>
</head>
Meta tag diatas merupakan tag-tag umum yang digunakan untuk melakukan optimasi pada SEO. Mari kita bahas beberapa meta tag utama yang sangat penting bagi SEO dari kode diatas.
<title>merupakan judul halaman yang akan tampil pada browser. idealnya, title lebih baik diisi dengan maksimal 60 karakter.<meta charset="UTF-8">mencegah karakter rusak.<meta name="viewport">bergunsi untuk responsifitas, membantu halaman tampil optimal di perangkat mobile.<meta name="description">memberikan deskripsi singkat untuk mengenal isi sebuah halaman website.<meta name="robots" content="index, follow"memberitahu kepada browser, bahwa halaman ini dapat diindeks.<link rel="canonical">digunakan untuk memberitahu browser versi utama dari sebuah halaman web ketika terdapat beberapa halaman dengan konten yang sama atau mirip.
Manfaat Meta Tag Terhadap SEO
Walaupun meta tag tidak terlihat secara langsung oleh pengunjung, meta tag memiliki peran besar dalam optimasi SEO karena mempengaruhi cara search engine melakukan teknik crawling, memahami konten pada situs, dan menampilkan situs di hasil pencarian. Berikut adalah penjelasan detail manfaat meta tag terhadap SEO.
- Meta Description Meta Description biasanya akan ditampilkan dibawah judul halaman di hasil pencarian Google. Dengan menggunakan meta description yang menarik dan menggunakan kata kunci yang relevan, dapat meningkatkan jumlah klik atau biasa disebut CTR.
- Title Tag Mesin pencari menggunakan title tag untuk menentukan judul halaman yang akan ditampilkan di hasil pencarian, dan itu akan menjadi salah satu faktor penentu peringkat.
- Meta Viewport Sejak Google melakukan update pada algoritma Mobile-First Indexing, performa dan tampilan mobile menjadi faktor penting dalam penentuan peringkat. Meta tag ini juga membantu memastikan bahwa halaman tampil dengan benar di perangkat mobile.
- Canonical Tag Mesin pencari seperti Google tidak suka dengan konten yang duplikat. Jika mesin pencari menemukan banyak URL dengan isi serupa, mesin pencari bisa bingung menentukan halaman mana yang seharusnya muncul di hasil pencarian. Maka dari itu, fungsi dari canonical tag adalah untuk memberi tahu kepada mesin pencari URL utama atau asli dari sebuah halaman web.
- Meta Robots Meta Robots digunakan untuk mengontrol perilaku robot mesin pencari (crawler) saat mereka merayapi halaman web yang kita buat. Dengan tag ini, kamu bisa menentukan apakah halaman boleh tampil di hasil pencarian atau tidak.
Tips SEO Dasar Pada HTML
Adapun beberapa tips yang mungkin dapat membantu kalian untuk melakukan optimasi SEO menggunakan HTML.
- Gunakan
<title>yang relevan dan mengandung kata kunci utama sesuai dengan konten yang dibuat. - Usahakan isi dari meta description selalu unik di setiap halaman.
- Maksimal panjang untuk meta description idelanya adalah 150-160 karakter.
- Gunakan heading tag seperti
<h1>untuk judul dari isi konten. - Optimalkan penggunaan gambar dengan attribut
alt - Gunakan tag semantik seperti
<article>,<nav>, dan<footer>untuk struktur konten yang jelas. - Hindari penggunaan kata kunci yang berlebihan.
Kesimpulan
Mengoptimalkan SEO menggunakan berbagai meta tag pada <head> merupakan langkah yang penting saat kita membangun sebuah website. Dengan menulis struktur HTML dengan deskriptif dan SEO Friendly, website kamu akan lebih mudah ditemukan dan dipahami oleh mesin pencari maupun pengunjung.
Terimakasih.
