Some text some message..
Some text some message..
Some text some message..
Some text some message..

Membuat Metadata Pada Halaman Web

previous Previous Page

Metadata suatu web adalah data dan informasi yang terkandung pada sebuah halaman web. Elemen meta digunakan untuk memberikan informasi sebuah halaman web kepada mesin pencari seperti google, bing, msn dan lainnya. Elemen meta juga dapat digunakan dalam membantu program komputer lainnya untuk mengidentifikasi informasi tertentu yang terkandung didalam suatu web.

Metadata memiliki peranan penting dalam meningkatkan rangking di dalam mesin pencari halaman web. Metadata merupakan kunci utama sebuah web agar dapat dikenali oleh mesin pencari. Mesin pencari akan mencari elemen meta yang dimasukkan sebagai informasi halaman web. Metadata tidak akan ditampilkan pada halaman website. Elemen metadata pada HTML diciptakan dengan menggunakan tag <meta>. Tag ini nantinya ditempatkan di dalam elemen <head>...</head>. Pada umumnya elemen meta memerlukan atribut yang berisi nama dan nilainya. Kedua atribut tersebut nantinya digunakan sebagai informasi yang akan disampaikan tentang halaman web yang bersangkutan.

Berikut ini contoh penggunaan tag <meta> :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Demo menggunakan metadata</title>
5.     <meta charset="utf-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
7.     <meta name="description" content="Deskripsi halaman website"/>
8.     <meta name="keywords" content="html, css, javascript, php, dll"/>
9.     <meta name="author" content="Toni"/>
10. </head>
11. <body>
12.    <p>Konten halaman website</p>
13. </body>
14. </html>
15. 

Meta charset digunakan untuk menentukan pengkodean halaman dokumen HTML. Meta viewport digunakan untuk mengontrol ukuran layar saat diakses pada perangkat smartphone. Meta description digunakan sebagai deskripsi dan gambaran utama tentang isi dan konten yang akan disampaikan kepada mesin pencari. Meta keywords digunakan sebagai kata kunci bagi mesin pencari. Kata kunci ini merupakan kata populer yang sering digunakan pengguna internet dalam mencari halaman situs. Kata kunci biasanya beberapa buah kata dan penulisannya dipisahkan dengan tanda koma. Meta author merupakan pihak yang berwenang atau pemilik halaman situs tersebut.

Metadata Pada Jejaring Media Sosial

Pada jejaring media sosial seperti facebook, twitter, whatapps, instagram dan lainnya menggunakan metadata untuk mengindek data dari suatu website. Misalnya jika pengguna melakukan share atau membagi data dari suatu website maka akan muncul judul website berikut deskripsinya dan juga gambar dari website itu sendiri.

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Demo menggunakan metadata untuk media sosial</title>
5.     <meta charset="utf-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
7.     <!-- metadata untuk facebook -->
8.     <meta property="og:type" content="website"/>
9.     <meta property="og:site_name" content=""/>
10.    <meta property="og:url" content="http://www.example.com"/>
11.    <meta property="og:title" content="Belajar menggunakan metadata"/>
12.    <meta property="og:description" content="Deskripsi halaman web"/>
13.    <meta property="og:image" content="https://example.com/images.png"/>
14. 
15.    <!-- metadata untuk twitter -->
16.    <meta name="twitter:title" content="Belajar menggunakan metadata"/>
17.    <meta name="twitter:description" content="Deskripsi halaman website"/>
18.    <meta name="twitter:image:src" content="https://www.example.com/images.png"/>
19. </head>
20. <body>
21.    <p>Konten halaman website</p>
22. </body>
23. </html>
24.    
25.    
26. 

Refresh Halaman dan Redirect Halaman

Elemen metadata dengan atribut <http-equiv> mempunyai kemampuan untuk melakukan refresh (penyegaran) terhadap suatu halaman. Refresh halaman dilakukan pada halaman yang memiliki konten baru. Misalnya saat pengguna selesai melakukan interaksi terhadap suatu halaman dan halaman tersebut memerlukan loading ulang. Setelah refresh halaman dilakukan, maka halaman yang sama dengan konten yang sudah diperbarui akan ditampilkan.

Berikut contoh kode untuk melakukan refresh / penyegaran ulang setiap 5 detik :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Menggunakan metadata</title>
5.     <meta http-equiv="refresh" content="5;"/>
6.  </head>
7.  <body>
8.     <p>Konten halaman web</p>
9.  </body>
10. </html>
11. 

Selain melakukan refresh halaman, elemen metadata <http-equiv> juga dapat melakukan redirect atau mengalihkan suatu halaman menuju halaman lainnya. Suatu halaman yang memiliki trafik yang padat kadang perlu mengalihkan halaman tersebut menuju halaman lain. Hal ini untuk menghindari padatnya lalu lintas data pada halaman tersebut.

Berikut contoh kode untuk melakukan redirect/mengalihkan halaman dengan waktu jeda 20 detik menuju url di https://www.saidalfaruq.net :

HTML

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <title>Menggunakan metadata</title>
5.     <meta http-equiv="refresh" content="20; url=https://www.saidalfaruq.net"/>
6.  </head>
7.  <body>
8.     <p>Konten halaman web</p>
9.  </body>
10. </html>
11. 

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<meta>yayayayaya

Global Attributes :

Tag <meta> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Pengaturan Default CSS :

Tidak ada.

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML