Referensi API
Komponen

<meta> - This feature is available in the latest Canary

Canary

Ekstensi React pada <meta> saat ini hanya tersedia di saluran eksperimental dan canary. Dalam rilis stabil React <meta> hanya bekerja sebagai komponen HTML bawaan. Pelajari lebih lanjut tentang saluran rilis React di sini.

Komponen HTML bawaan <meta> memungkinkan Anda menambahkan metadata ke dokumen.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

Referensi

<meta>

Untuk menambahkan metadata dokumen, render komponen HTML bawaan <meta>. Anda dapat me-render <meta> dari komponen apa pun dan React akan selalu menempatkan elemen DOM yang sesuai di <head> dokumen.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

Lihat contoh lebih lanjut di bawah.

Props

<meta> mendukung semua props elemen pada umumnya.

Elemen ini harus memiliki setidaknya satu dari props berikut: name, httpEquiv, charset, itemProp. Komponen <meta> akan menghasilkan hal yang berbeda tergantung dari props yang diberikan.

  • name: sebuah string. Menentukan jenis dari metadata yang akan dilampirkan ke dokumen.
  • charset: sebuah string. Menentukan setelan karakter yang akan digunakan dokumen. Nilai yang valid hanyalah "utf-8".
  • httpEquiv: sebuah string. Menentukan direktif dalam memproses dokumen.
  • itemProp: sebuah string. Menentukan metadata tentang item tertentu dalam dokumen, bukan dokumen secara keseluruhan.
  • content: sebuah string. Menentukan metadata yang akan dilampirkan saat digunakan dengan props name atau itemProp atau perilaku direktif saat digunakan dengan prop httpEquiv.

Perilaku khusus pe-render-an

React akan selalu menempatkan elemen DOM yang terkait dengan komponen <meta> di dalam <head> dokumen, di mana pun elemen tersebut di-render di pohon React. Hanyalah <head>tempat yang valid untuk meletakkan <meta> di dalam DOM, namun tetap cocok dan membuat semuanya tetap dapat disusun jika komponen yang mewakili halaman tertentu dapat me-render komponen <meta> itu sendiri.

Ada satu pengecualian: jika komponen <meta> memiliki sebuah prop itemProp, maka tidak ada perilaku khusus, karena dalam hal ini komponen tersebut tidak mewakili metadata tentang dokumen, melainkan metadata tentang bagian tertentu dari halaman.

Penggunaan

Menandai dokumen dengan metadata

Anda dapat memberikan keterangan dokumen dengan metadata seperti kata kunci, ringkasan, atau nama pembuat. React akan menempatkan metadata ini di dalam dokumen <head> terlepas dari di mana metadata tersebut di-render di pohon React.

<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />

Anda dapat me-render komponen <meta> dari komponen mana pun. React akan meletakkan simpul DOM <meta> tersebut di dalam dokumen <head>.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <meta name="keywords" content="React" />
      <meta name="description" content="A site map for the React website" />
      <h1>Site Map</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

Menandai item tertentu di dalam dokumen dengan metadata

Anda dapat menggunakan komponen <meta> dengan prop itemProp untuk memberi anotasi pada item tertentu dalam dokumen dengan metadata. Dalam hal ini, React tidak akan menempatkan anotasi ini di dalam dokumen <head>, melainkan akan menempatkannya seperti komponen React lainnya.

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>
Sebelumnya<link>
Selanjutnya<script>