Cara pengkodean meta tag Html

Cara pengkodean meta tag HTML

Head HTML Elemen
Yang <head> unsur utamanya adalah wadah untuk semua unsur kepala, yang memberikan informasi tambahan tentang dokumen (metadata), atau referensi ke sumber daya lain yang diperlukan untuk dokumen yang ingin ditampilkan atau berperilaku dengan benar di web browser.

Kepala unsur-unsur yang secara kolektif menggambarkan sifat-sifat dokumen seperti judul, memberikan informasi meta seperti karakter set, menginstruksikan browser mana untuk menemukan style sheet atau script yang memungkinkan anda untuk memperpanjang dokumen HTML yang sangat aktif dan interaktif cara.

Elemen HTML yang dapat digunakan dalam <head> elemen ini adalah: <title>, <base>, <link>, <style>, <meta>, <script> dan <noscript> elemen.

HTML Elemen judul
Satu <title> elemen mendefinisikan judul dari dokumen.

Judul adalah elemen yang diperlukan dalam semua HTML/XHTML dokumen untuk menghasilkan dokumen yang valid. Hanya satu judul elemen yang diizinkan dalam dokumen dan itu harus ditempatkan di dalam <head> elemen. Judul elemen berisi teks biasa dan entitas; itu mungkin tidak mengandung lain markup tag.

Judul dari dokumen yang dapat digunakan untuk tujuan yang berbeda. Misalnya:

Untuk menampilkan judul pada title bar browser dan di task bar.
Untuk memberikan judul untuk halaman ketika ditambahkan ke favorit atau bookmark.
Untuk menampilkan judul halaman yang di cari-hasil mesin pencari.
Contoh berikut menunjukkan bagaimana untuk menempatkan judul dalam sebuah dokumen HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

judul Yang baik harus singkat dan spesifik untuk konten dokumen, karena mesin pencari web crawler membayar perhatian khusus untuk kata-kata yang digunakan dalam judul. Judul harus terletak kurang dari 65 karakter. Lihat pedoman untuk judul.

HTML dasar Elemen
HTML <base> elemen ini digunakan untuk menentukan basis URL untuk tautan relatif yang terkandung dalam dokumen, misalnya anda dapat mengatur URL dasar sekali di bagian atas halaman anda, dan kemudian berikutnya semua tautan relatif yang akan menggunakan URL sebagai titik awal. Berikut ini sebuah contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Defining a base URL</title>
    <base href="https://www.calonbloggers.my.id/">
</head>
<body>
    <p><a href="html-tutorial/html-head.php">HTML Head</a>.</p>
</body>
</html>

Hyperlink dalam contoh di atas akan benar-benar memutuskan untuk https://www.calonbloggers.my.id/html-tutorial/html-head.php terlepas dari URL dari halaman saat ini. Hal ini karena relatif URL yang ditentukan di link: html-tutorial/html-head.php ditambahkan ke akhir URL dasar: https://www.calonnloggers.my.id/.

HTML <base> elemen harus muncul sebelum setiap elemen yang mengacu pada sumber daya eksternal. HTML memungkinkan hanya satu elemen dasar untuk setiap dokumen.

HTML link Elemen
Satu <link> elemen yang mendefinisikan hubungan antara arus dokumen dan dokumen eksternal atau sumber daya. Penggunaan umum dari elemen link untuk link ke style sheet eksternal.

<head>
    <title>Linking Style Sheets</title>
    <link rel="stylesheet" href="style.css">
</head>

Catatan: dokumen HTML adalah <head> elemen dapat berisi sejumlah <link> elemen. Dalam <link> elemen ini memiliki atribut, namun tidak ada isinya.

HTML Elemen style
Dalam <style> elemen ini digunakan untuk menentukan tertanam informasi style untuk dokumen HTML. Aturan gaya di dalam <style> elemen menentukan bagaimana elemen HTML render di browser.

<head>
    <title>Embedding Style Sheets</title>
    <style>
        body { background-color: YellowGreen; }
        h1 { color: red; }
        p { color: green; }
    </style>
</head>

Aplikasi embedded style sheet harus digunakan ketika sebuah dokumen tunggal memiliki gaya yang unik. Jika sama style sheet ini digunakan dalam beberapa dokumen, maka sebuah style sheet eksternal akan lebih tepat.

HTML meta Elemen
Dalam <meta> elemen ini menyediakan metadata tentang dokumen HTML. Metadata adalah data yang menggambarkan dan memberikan informasi tentang data-data lain.

Berikut ini sebuah contoh:

<head>
    <title>Specifying Metadata</title>
    <meta charset="utf-8">
    <meta name="author" content="John Smith">
</head>

HTML script Elemen
Dalam <script> elemen ini digunakan untuk mendefinisikan client-side script seperti JavaScript dalam dokumen HTML.

Contoh berikut akan menampilkan pesan ucapan di browser:

<head>
    <title>Adding JavaScript</title>
    <script>
        document.write("<h1>Hello World!</h1>") 
    </script>
</head>

Mendefinisikan Metadata
 <meta> merupakan kategori yang biasanya digunakan untuk memberikan terstruktur metadata seperti dokumen itu, kata kunci, deskripsi, nama penulis, karakter encoding, dan metadata lainnya. Sejumlah meta tag dapat ditempatkan di dalam bagian kepala dari dokumen HTML atau XHTML.

Metadata tidak akan ditampilkan pada halaman web, tetapi akan menjadi mesin dapat diuraikan, dan dapat digunakan oleh browser, mesin pencari seperti Google atau layanan web lainnya.

Bagian berikut ini menjelaskan penggunaan meta tag untuk berbagai keperluan.

Menyatakan Pengkodean Karakter dalam HTML
Meta tag biasanya digunakan untuk menyatakan karakter encoding dalam dokumen HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Declaring Character Encoding</title> 
    <meta charset="utf-8">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Untuk mengatur pengkodean karakter di dalam sebuah dokumen CSS, yang @charset di-aturan yang digunakan.

Catatan : UTF-8 adalah sangat fleksibel dan direkomendasikan pengkodean karakter untuk memilih. Namun, jika ini tidak ditentukan, maka pengkodean default dari platform yang digunakan.

Mendefinisikan Penulis dari Dokumen
Anda juga dapat menggunakan tag meta untuk secara jelas mendefinisikan siapa penulis atau pencipta halaman web.

Penulis dapat menjadi seorang individu, perusahaan secara keseluruhan atau pihak ketiga.

<head>
    <title>Defining Document's Author</title>
    <meta name="author" content="Alexander Howick">
</head>

Catatan : Kode name atribut dari tag meta mendefinisikan nama bagian dari dokumen-tingkat metadata, sedangkan content atribut yang memberikan nilai yang sesuai. Yang content nilai atribut dapat berisi teks dan badan, tetapi hal ini mungkin tidak berisi tag HTML.

Kata kunci dan Deskripsi untuk Mesin Pencari
Beberapa search engine menggunakan metadata terutama kata kunci dan deskripsi untuk mengindeks halaman web; namun hal ini belum tentu benar. Kata kunci memberikan tambahan berat ke dokumen kata kunci dan deskripsi memberikan sinopsis singkat dari halaman. Berikut ini sebuah contoh:

<head>
    <title>Defining Keywords and Description</title>  
    <meta name="keywords" content="HTML, CSS, javaScript">
    <meta name="description" content="Easy to understand tutorials and references on HTML, CSS, javaScript and more..."> 
</head>

Search engine akan sering menggunakan deskripsi meta dari sebuah halaman untuk membuat sinopsis singkat untuk halaman ketika itu muncul di hasil pencarian.

Konfigurasi Pandang untuk Perangkat Mobile
Anda dapat menggunakan viewport meta tag untuk menampilkan halaman web dengan benar pada perangkat mobile.

Tanpa viewport meta tag, mobile browser me-render halaman web di desktop layar lebar, lalu skala ke bawah untuk menyesuaikan layar ponsel. Akibatnya, hal ini membutuhkan pinch-dan-zoom untuk melihat halaman web yang benar di perangkat mobile, yang sangat nyaman.

Viewport meta tag memungkinkan anda untuk mengatur yang terbaik viewport ukuran dan skala batas untuk melihat halaman web pada perangkat mobile. Khas viewport meta tag definisi akan terlihat sebagai berikut:

<head>
    <title>Configuring the Viewport</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Para width=device-width pasangan kunci-nilai dalam content atribut set lebar viewport untuk sama dengan lebar layar dari perangkat, sedangkan initial-scale=1 set awal skala atau tingkat zoom ke 100% saat halaman pertama kali dimuat oleh browser.

Tips : Selalu gunakan <meta> tag viewport dalam halaman web anda. Hal ini akan membuat website anda user-friendly dan lebih mudah diakses pada perangkat mobile seperti ponsel dan tablet.

Next Post Previous Post

Baca Juga