Loading time...
Google AdSense Leaderboard (728x90) Paste AdSense responsive code in this widget
Latest
LATEST | Memuat artikel terbaru...
Home » Tutorial Web Dasar Part 7: Rahasia Tag head, Meta SEO, dan Viewport Responsive
11.14

Tutorial Web Dasar Part 7: Rahasia Tag head, Meta SEO, dan Viewport Responsive

Assalamualaikum Wr. Wb.

Tutorial Web Dasar Part 7: Rahasia Tag <head>, Meta SEO, dan Viewport Responsive | Bikin Web Ramah HP & Google | Sering membuat web yang saat dibuka di HP tampilannya mengecil dan harus di-zoom manual? Atau saat link dibagikan ke WhatsApp dan Facebook tidak muncul judul serta gambar thumbnail-nya? Masalahnya terletak pada konfigurasi tag <head> yang belum lengkap. Kali ini admin akan membagikan rahasia menyusun tag meta SEO dan viewport yang work 100%.

1. Viewport: Kunci Halaman Responsive di Smartphone

Tanpa tag ini, browser HP akan menganggap website anda adalah tampilan desktop berukuran 980px sehingga seluruh teks akan tampak sangat kecil:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: Menyesuaikan lebar layar dengan ukuran piksel layar HP pengguna.
  • initial-scale=1.0: Mengatur rasio zoom awal sebesar 100% tanpa distorsi.

2. Meta Tag SEO Dasar untuk Google Search

Agar halaman web mudah ditemukan pembaca dan cuplikan deskripsi di Google terlihat meyakinkan:

  • charset="UTF-8": Memastikan simbol karakter huruf, angka, dan emoji terbaca normal tanpa error kotak-kotak.
  • meta description: Rangkuman isi artikel 1–2 kalimat yang tampil langsung di bawah judul hasil pencarian Google.
  • meta author: Menyematkan identitas pembuat / pemilik artikel.

3. Open Graph (OG Tags) untuk Media Sosial

Supaya link yang di-share ke WhatsApp, Telegram, Facebook, dan X (Twitter) langsung menampilkan kartu pratinjau (*rich card*) yang elegan, gunakan protokol Open Graph:

  • og:title : Judul tebal yang muncul di kartu share medsos.
  • og:description : Cuplikan teks penjelasan link.
  • og:image : URL gambar banner/thumbnail yang otomatis muncul di preview link.
  • og:url : Alamat link kanonikal website.
Preview tampilan layar responsif mobile serta hasil cuplikan Meta SEO Google dan Medsos

4. Template Lengkap <head> Siap Pakai

Berikut adalah template struktur <head> standar profesional yang bisa langsung anda gunakan untuk template website atau postingan blog:

<!DOCTYPE html>
<html lang="id">
<head>
    <!-- Encoding & Viewport Wajib -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <!-- Judul Tab Browser -->
    <title>Tutorial Lengkap HTML & SEO untuk Pemula di 2026</title>

    <!-- Meta Tag SEO Google -->
    <meta name="description" content="Pelajari cara optimasi tag head HTML, meta description SEO, dan viewport responsive agar website cepat terindeks dan pas di layar HP.">
    <meta name="keywords" content="tutorial html, belajar web dasar, meta tag seo, responsive html">
    <meta name="author" content="Admin Blog">
    <meta name="robots" content="index, follow">

    <!-- Open Graph untuk Social Media (WhatsApp, FB, LinkedIn) -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="Tutorial Lengkap HTML & SEO untuk Pemula">
    <meta property="og:description" content="Panduan menyusun tag head dan meta SEO agar website rapi dan profesional saat dibagikan.">
    <meta property="og:image" content="https://bloganda.com/images/banner-html-seo.jpg">
    <meta property="og:url" content="https://bloganda.com/tutorial-html-seo.html">

    <!-- Favicon Ikon Tab -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>

    <h1>Halaman Siap Index & Mobile-Friendly!</h1>
    <p>Buka menu Inspect Element (F12) > Device Toolbar untuk menguji responsivitasnya.</p>

</body>
</html>

Itulah tutorial lengkap mengenai optimasi tag <head>, meta SEO, dan responsive viewport. Pastikan link gambar pada atribut og:image menggunakan protokol https:// dengan resolusi minimal 1200x630 piksel agar kartu media sosial tampil tajam.

Sekian tutorial kali ini, semoga bermanfaat, jika ada kesalahan mohon di maafkan, jika berguna mohon di share ke Social Media.

Terima Kasih.

Wassalamualaikum Wr. Wb.

Sumber gambar: Koleksi Pribadi / Screenshot Praktik

0 Komentar

Posting Komentar

Pengunjung yang baik selalu meninggalkan komentar

Silahkan berikan komentar/kritik/saran tentang artikel ini untuk kemajuan blog ini,
Mohon untuk tidak berkomentar berbau SARA, Pornografi, Spam, dan kata-kata kasar agar tidak terjadi kesalah pahaman disini.

Terima Kasih