Atribut name <meta> HTML

Tanda <meta> HTML

Definisi dan penggunaan

name Atribut yang diatur adalah

name Atribut yang diatur adalah Atribut content nama nilai

dengan menggunakan name dan content atribut, dapat menggunakan pasangan nama/nilai untuk mendefinisikan metadata dokumen. Diantaraname Atribut menunjukkan jenis metadata, sementara content Atribut digunakan untuk menyediakan nilai.

Tabel di bawah ini menampilkan beberapa jenis tipe metadata yang telah ditentukan sebelumnya.

Perhatian:jika diatur atribut http-equivjika diatur name Atribut.

Peringatan:HTML5 memperkenalkan metode yang memungkinkan desainer halaman web untuk mengendalikan viewport melalui tag <meta> (area yang dapat dilihat pengguna halaman web) (lihat contoh di bawah "Atur viewport").

Contoh

Gunakan atribut name untuk menentukan deskripsi, kata kunci, dan penulis dokumen HTML. Juga tentukan viewport untuk mengontrol ukuran halaman dan skala untuk berbagai perangkat:

<head>
  <meta name="description" content="Gratis Tutorial Web">
  <meta name="keywords" content="HTML,CSS,JavaScript">
  <meta name="author" content="YK Investment">
  <meta\s+name="viewport"\s+content="width=device-width,\s+initial-scale=1.0">
</head>

Coba sendiri

Sintaksis

<meta name="value">

Nilai atribut

Nilai Deskripsi
application-name Tentukan nama aplikasi Web yang mewakili halaman.
author

Tentukan nama penulis dokumen. Contoh:

<meta name="author" content="YK Investment">
description

Tentukan deskripsi halaman. Mesin pencari dapat memilih deskripsi ini untuk ditampilkan dalam hasil pencarian. Contoh:

<meta name="description" content="Gratis Tutorial Web">
generator

Tentukan salah satu paket perangkat lunak yang digunakan untuk membuat dokumen (tidak digunakan untuk halaman yang ditulis dengan tangan). Contoh:

<meta name="generator" content="FrontPage 4.0">
keywords

Tentukan daftar kata kunci yang berhubungan dengan halaman, dipisahkan dengan koma. Beritahu mesin pencari tentang konten halaman.

Peringatan:Tetapkan\s+kata\s+kunci\s+(pencari\s+harus\s+mengelompokkan\s+halaman\s+ini).\s+Contoh:\s+

<meta\s+name="keywords"\s+content="HTML,\s+tag\s+meta,\s+referensi\s+tag">
viewport Kendali\s+viewport\s+(area\s+yang\s+dilihat\s+oleh\s+pengguna\s+dalam\s+halaman\s+web)

Keterangan

Selain\s+enam\s+tipe\s+metadata\s+yang\s+didefinisikan\s+terlebih\s+dahulu,\s+dapat\s+digunakan\s+metadata\s+ekspansi\s+—\s+kunjungi\s+halaman\s+ini\s+untuk\s+mendapatkan\s+daftar\s+ekspansi\s+yang\s+terkini:\s+

http://wiki.whatwg.org/wiki/MetaExtensions

Beberapa\s+ekspansi\s+dapat\s+digunakan\s+lebih\s+banyak,\s+sedangkan\s+beberapa\s+ekspansi\s+hanya\s+dapat\s+digunakan\s+dalam\s+fungsi\s+khusus,\s+hampir\s+tidak\s+dipakai\s+oleh\s+orang\s+lain\s+—\s+metadata\s+robots\s+tentu\s+termasuk\s+di\s+kategori\s+ini\s+—\s+para\s+wakil\s+dokumen\s+HTML\s+dapat\s+menggunakan\s+dari\s+dapat\s+mengatakan\s+kemana\s+pencari\s+harus\s+menanggapi\s+dokumen\s+ini\s+contoh:\s+

<meta\s+name="robots"\s+content="noindex">

Tipe\s+metadata\s+ini\s+memiliki\s+tiga\s+nilai\s+yang\s+dikenali\s+sebagian\s+besar\s+browser\s+umum:

  • noindex\s+—\s+berarti\s+jangan\s+indeks\s+halaman\s+ini
  • noarchive\s+—\s+berarti\s+jangan\s+arkibkan\s+atau\s+diarsipkan\s+halaman\s+ini
  • nofollow\s+—\s+berarti\s+jangan\s+lanjut\s+mengikuti\s+link\s+dari\s+halaman\s+ini\s+untuk\s+mencari

Banyak\s+metadata\s+yang\s+ketersediaan\s+dalam\s+jumlah\s+kurang\s+dan\s+para\s+developer\s+menyukai\s+baca\s+tabel\s+daftar\s+terbuka\s+di\s+atas\s+lihat\s+apa\s+yang\s+dapat\s+digunakan\s+pada\s+proyek\s+sendiri.

Pesan\s+ingat

Untuk\s+mengatakan\s+bagaimana\s+pencari\s+memfasilitasi\s+kelasifikasi\s+dan\s+peringkat\s+konten,\s+pasti\s+yang\s+terpenting\s+sebelumnya\s+adalah\s+gunakan\s+metadata\s+keywords\s+—\s+kini\s+kemampuan\s+penggunaan\s+metadata\s+keywords\s+turun\s+lebih\s+rendah\s+karena\s+kemungkinan\s+penyelewengan\s+dalam\s+membuat\s+halaman\s+isi\s+halaman\s+dengan\s+kemiripan\s+kemampuan\s+konten\s+yang\s+berhubungan\s+lebih\s+dari\s+kemampuan\s+yang\s+akan\s+dilihat\s+oleh\s+pencari\s+yang\s+diantarai\s+oleh\s+kreator\s+terbaik\s+adalah\s+menggunakan\s+saran\s+yang\s+dikirim\s+oleh\s+dari\s+sendiri\s+—they\s+provide\s+guidelines\s+for\s+optimizing\s+web\s+pages\s+or\s+entire\s+websites.

Google:\s+Pedoman\s+Pemula\s+Optimasi\s+Pencari\s+(SEO)

https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn

Baidu:\s+Pedoman\s+Optimasi\s+Pencari\s+Baidu

https://ziyuan.baidu.com/college/articleinfo?id=1346

Atur\s+viewport

Viewport\s+adalah\s+area\s+yang\s+dilihat\s+oleh\s+pengguna\s+dalam\s+halaman\s+web\s+yang\s+berbeda\s+berdasarkan\s+perangkat\s+yang\s+dipakai\s+—\s+itu\s+lebih\s+kecil\s+dalam\s+handphone\s+dibanding\s+dengan\s+layar\s+komputer.

Anda\s+harus\s+termasuk\s+elemen\s+<meta>\s+berikut\s+pada\s+semua\s+halaman\s+web\s+anda:

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

Ini menyediakan petunjuk bagi browser tentang bagaimana mengendalikan ukuran halaman dan skala.

width=device-width Bagian yang menetapkan lebar halaman untuk mengikuti lebar layar perangkat (berbeda-beda perangkat).

initial-scale=1.0 Bagian yang menetapkan tingkat skala awal yang diunggah pertama kali halaman di browser.

Ini adalah contoh halaman web tanpa tag meta viewport, serta halaman yang sama dengan tag meta viewport:



Tidak menggunakan tag meta viewport


Menggunakan tag meta viewport


Peringatan:Jika Anda menggunakan ponsel atau tablet untuk melihat halaman ini, Anda dapat mengklik dua tautan di bawah ini untuk melihat perbedaan.

Anda dapat mengakses diPelajaran Desain Web Respon -ViewportBelajar lebih banyak tentang viewport.

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Tanda <meta> HTML