META tag adalah kunci untuk mendapatkan peringkat halaman web blogspot yang baik di hasil mesin pencari atau search engine. Untuk memahami deskripsi meta tag untuk blogspot dan website dengan jelas, Anda perlu terlebih dahulu memahami bagaimana cara kerja mesin pencari. Mengapa meta tag sangat penting untuk search engine? Mari kita bahas sama-sama fungsi meta tag di bawah
Meta tag ditulis di antara <HEAD> dan </ HEAD> dalam dokumen html. Fungsi Meta tag dalam sebuah dokumen html memberikan informasi tentang berbagai aspek dari halaman web atau blogspot, baik dari nama penulis bahasa yang digunakan, judul dan kata kunci dari halaman web. di masa lalu Mesin pencari internet, meta tag digunakan untuk rating halaman web. Namun, penggunaan meta tag oleh webmaster situs dewasa ‘, menyebabkan mesin pencari utama seperti mesin pencari Google , Yahoo, MSN, dll untuk menghapus meta tag dari kriteria prioritas mereka. Webmaster situs-situs dewasa menggunakan meta tag untuk memasukkan kata kunci yang tidak relevan di situs Web mereka, untuk tujuan mengarahkan lalu lintas ke situs Web mereka. Namun, meta tag tertentu dapat membantu robot mesin pencari dalam mengindeks halaman web Anda. Robot mesin adalah program kecil yang menelusuri halaman Web dan mengumpulkan data yang relevan dari halaman web dan membantu mesin pencari melakukan peringkat.
Cara pasang / Membuat Meta Tag
Mari kita lihat berbagai jenis meta tag blogspot, yang dapat di pasang dalam sebuah situs webblog. Ini akan memberikan ide untuk Anda, bagaimana membuat atau cara memasang meta tag. Oleh karena Daftar meta tag sangat panjang dan oleh karena itu kita akan melihat beberapa bagian yang paling penting saja.
Meta Author (Penulis)
Meta author biasanya tersimpan nama penulis halaman web. Email Id penulis juga dapat dimasukkan ke dalam meta tag ini. Namun, meta tag ini tidak didukung oleh mesin pencari utama seperti Google, Yahoo atau MSN.
Sintaks: <METANAME=”nama author”CONTENT=”nama, id email”>
Meta Content Language (Konten Bahasa)
Bahasa yang digunakan pada halaman Web, dapat dimasukkan dalam meta content language. Beberapa robot mesin pencari menggunakannya untuk mengkategorikan halaman web dengan bahasa yang digunakan.
Syntax: <META HTTP-EQUIV=”Content-Language” CONTENT=”language”>
Meta Content Type (Jenis konten)
Ini adalah salah satu meta tag yang paling penting. Dianjurkan untuk menggunakannya untuk semua halaman web. Penggunaan meta inilah menyebabkan set karakter yang sesuai ditetapkan untuk dimuat, sebelum halaman web dimuat.
Sintaks: <meta http-equiv=”Content-Type” content=”content type, teks atau html”>
Meta Description (Gambaran umum)
Ini adalah satu meta tag blogspot yang penting. Memberikan Penjelasan atau gambaran umum tentang isi dari halaman web. Jumlah karakter yang disarankan tidak lebih dari 160 karakter dan Ini adalah bagian yang umumnya dicari oleh robot mesin pencari, untuk mengetahui kalimat yang dicari ada dalam halaman web
Syntax: <META NAME=”description” CONTENT=”ketikkan deskripsi disini”>
Meta Keywords (kata kunci)
Bersama kata-kata dan frase dalam konten dan deskripsi, meta keyword juga sering digunakan oleh mesin pencari, untuk mengurutkan halaman web ke dalam hasil mesin pencari mereka. Oleh karena itu, memberikan meta keyword ke halaman web terbukti sangat mengntungkan.
Sintaks: <META name=”keywords” CONTENT=”ketikkan kata kunci dipisahkan dengan tanda koma”>
Meta Title (Judul)
Meta Title ini berisi judul sama seperti judul pada tag HTML. Anda dapat menggunakannya pada halaman web Anda juga.
Sintaks: <META NAME=”Title” CONTENT=”Page Judul Here”>
Meta Google
Meta Google khusus digunakan oleh mesin pencari Google. Tag ini digunakan di halaman web untuk menghentikan Google untuk menampilkan kutipan atau konten cache. Ada fitur lain juga, bahwa Anda dapat menentukan penggunaan meta tag Google. Sebagai contoh, jika anda tidak ingin Google melakukan peringkat atau mempopulerkan link dari halaman web anda.
Meta Robot
Tujuan dari penggunaan meta robot ialah untuk menentukan halaman web yang mana saja boleh atau tidak di-index oleh spider dan halaman web. Tag ini sangat penting sekali terutama jika sesuatu website menggunakan frame untuk navigasinya. Sudah tentu anda tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.
Format dasar dari meta robot adalah sebagai berikut :
<meta name=”robots” content=”index | noindex | follow | nofollow”>
Misalnya, jika Anda menghendaki agar spider membaca halaman utama, dan menelusuri semua tautan yang ada maka tambahkan perintah berikut ini :
<meta name=”robots” content=”index follow”>
Dengan perintah ini spider akan meng-index halaman utama Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href=”">).
Perintah berikut ini akan menginstruksikan agar spider tidak melakukan index maupun penelusuran tautan yang ada pada suatu halaman web.
<meta name=”robots” content=”noindex nofollow”>
OBJEKTIF:
Setelah mempelajari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML.
MATERI:
Struktur dasar dokumen HTML(Tag, Element, Attribute), Element HTML, Element HEAD, Element TITLE, Element BODY.
STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:
<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>
Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag
Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar
<p>
<b>
................
</b>
</p>
Contoh penulisan tag-tag yang salah
<p>
<b>
................
</p>
</b>
c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<TAG
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
> .................
</TAG>
Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow">
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
..........
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.
Sintaks:
<head>
...........
</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
.........
</title>
g. Element BODYElement ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z">
..............
</body>
Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.
LATIHAN
Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_1.html
<html>
<head>
<title>Latihan1-1</title>
</head>
<body>
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Gantilah teks tersebut dengan teks lainnya.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga :)
Nama file: latihan1_2.html
<html>
<head>
<title>Latihan1-2</title>
</head>
<body text="red">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html
<html>
<head>
<title>Latihan1-3</title>
</head>
<body text="red" bgcolor="black">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text="red" bgcolor="aqua" background="./images/image027.jpg">
Belajar bahasa pemrograman web ternyata mudah juga :)
</body>
</html>
catatan:
./images/ = nama direktori file gambar disimpanimage027.jpg = nama file gambar
Kumpulan Syntax Dasar HTML
Struktur Dasar
<html>
<head>
<!-ini adalah bagian header-->
<title>judul web</title>
</head>
<body>
<!-tempat menuliskan kode-->
</body>
</html>
<!--…-->
<!—Ini adalah komentar dan tidak akan ditampilkan dibrowser-->
<a>
Mendefinisikan tag anchor. Digunakan untuk membuat link ke dokumen lain menggunakan atribut herf dan juga untuk membuat bookmark dokumen mengunakan atribut name.
Contoh
<body>
<a href=http://www.google.com”>kunjungi website google</a>
</body>
<b>
Digunakan untuk mencetak tebal suatu teks.
Contoh:
<b>teks tercetak tebal (bold)</b>
<body>
Digunakan untuk mendefinisikan badan html, yang didalamnya merupakan tempat untuk meletakan elemen-elemen html lainnya, seperti gambar, teks, table, form, dll
Contoh:
<html>
<head>
<title>judul web</title>
</head>
<body>
<!-ini adalah bagian badan tempat anda menuliskan kode-->
</body>
</html>
<br>
Digunakan untuk menyisipkan sebuah baris(ganti baris)
Contoh:
<body>
Salah satu aplikasi internet adalah web<br>
Html adalah kode dasar untuk membuat web<br>
</body>
<center>
Digunakan untuk menampilkan teks ditengah halaman
Contoh:
<center> teks ini akan tampil ditengah halaman</center>
<div>
Digunakan untuk mendifinisikan bagian dari sebuah halaman web. Seringkali digunakan untuk mengelompokan elemen-elemen HTML dengan format style tertentu.
Contoh:
<div style=’color:#ff0000”>
<h3>ini merupakan judul</h3>
<p>ini merupakan paragraph</p>
</div>
<form>
Digunakan untuk mendifinisikan sebuah form masukan dari pengguna
Contoh:
<form action=”action.php” method=”get”>
Nama: <input type=”text” name=”f_nama”/>
<br>
email: <input type=”text” name=”f_email”/>
<br>
<input type=”submite” value=’simpan”/>
</form>
<h1> sampai dengan <h6>
Digunakan untuk mendinisikan bagian atas (heading) teks. Dimulai dari ukuran besar<h1> hingga ukuran kecil<h6>
Contoh:
<h1> HTML adalah kode dasar membuat web</h1>
<h2> HTML adalah kode dasar membuat web</h2>
<h3> HTML adalah kode dasar membuat web</h3>
<h4> HTML adalah kode dasar membuat web</h4>
<h5> HTML adalah kode dasar membuat web</h5>
<h6> HTML adalah kode dasar membuat web</h6>
<head>
Digunakan untuk mendifinisikan bagian atas(head) sebuah dokumen html. Bagian ini biasanya digunakan untuk mendifinisikan tag <base>, <link>, <meta>, <script>, <style>, dan <title>.
Contoh:
<head>
<title>judul web</title>
</head>
<hr>
Digunakan untuk mendifinisikan sebuah garis horizontal dalam halaman html
Contoh:
Salah satu aplikasi internet adalah web<hr>
Html adalah kode dasar untuk membuat web
<i>
Digunakan untuk mencetak miring suatu teks.
Contoh:
<i>teks tercetak miring(italic)</i>
<p>
Digunakan untuk membuat paragraph baru.
<select>
Digunakan untuk mendinisikan daftar pilihan
Contoh:
<select>
<option value=”detik”>detik</option>
<option value=”viva”>vivanews</option>
<option value=”glodokshop”>glodok shop</option>
<option value=”bhineka”>Bhineka</option>
</select>
<Strong>
Digunakan untuk mempertegas tampilan suatu teks.
Contoh:
Kode dasar untuk membuat web adalah <strong>HTML</strong>
<Style>
Digunakan untuk mendifinisikan informasi style pada dokumen html
Contoh:
<head>
<style type=”text/css”>
Span.blue {color:lightskyblue;
Font-weight:bold}
</style>
</head>
<body>
Kode dasr untuk membuat web adalah <span class=”blue”>HTML</span>
</body>
<table>
Digunakan untuk membuat table dalam halaman web.
Contoh:
<table border=”1”>
<caption>daftar situs</caption><tr>
<th>berita</th>
<title>
Digunakan untuk mendifinisikan judul pada dokumen html.
Contoh:
<head>
<title>judul web</title>
</head>
<u>
Digunakan untuk menambahkan garis bawah suatu teks
Contoh:
<u>teks bergaris bawah(bold)</u>
<ul>
Digunakan untuk membuat daftar yang tak berurut(unordered list) menggunakan symbol bullets.
Contoh:
<ul>
<li>webpribadi</li>
<li>blog</li>
<li>facebook</li>
</ul>
keren
ReplyDelete