Semantik Element untuk meningkatkan SEO

Semantik Element untuk meningkatkan SEO
Kali ini saya akan membahas Pentingnya Semantik Element untuk meningkatkan SEO website anda Sebelumnya saya akan membahas dulu Apa itu Semantik Element?

Apa itu Semantik Element ?

Semantik Element adalah element yang menggambarkan arti atau makna sebenarnya dari element tersebut. Makna yang diberikan semantik yaitu nilai dari sebuah kontent pada document.

Lebih jelasnya, jika kita menulis sebuah Tag html misalnya <table></table>. Tag table langsung menggambarkan arti atau nilai cari kontent tersebut. berbeda jika kita menulis tag <div></div>
tag ini tidak serta merta menggambarkan arti dari kontent HTMLnya.

Lebih jauh tentang semantik

HTML5 didukung dengan berbagai element semantik, salah satunya <article></article>. Sayangnya kemajuan teknologi ini berbanding terbalik dengan pengembangan web pada sisi front end. kebanyakan developer tidak terlalu perduli dengan semantik element.
mereka cenderung menggunakan tag <div></div>

sebagai pemisah antara content yang satu dengan yang lainnya.

Lalu apa masalahnya?
Mari kita berfikir jauh kedepan.

Perkembangan dunia website mengalami peningkatan yang jauh signifikan. dan isu belakangan ini yang sedang heboh adalah pengembangan web 3.0 yang lebih terarah kepada semantik website.

Muncul pertanyaan lainnya yaitu apa itu semantik website?

Semantik website adalah website yang dibuat/dikembangkan sebagai partner kita, sebagai assistent kita, dan seolah dia adalah pelayan pribadi kita.

biar saya jelaskan. mungkin diantara kalian ada yang pernah berada disuatu kota dan anda menginginkan suatu makanan seperti fried rice tapi anda tidak mengetahui dimana tempat makan tersebut, anda pasti merasa kecewa. Lalu anda berfikir untuk mencarinya diinternet.
Search enggine langsung menampilkan daftar restoran/ blog yang merefrensikan tempat makan tersebut. dan andapun mencoba ke tempat tersebut dan anda mengalami kekecewaan yang lain dimana fried rice yang anda makan tidak sesuai dengan keinginan anda kejadian seperti ini tentu membuat anda tidak percaya akan search enggine/ internet lagi. Dan anda mungkin akan berfikir untuk mencari informasi dari mulut-kemulut.Begitulah sekilas masalah yang mendasari web 3.0 dibangun.

Jadi bagaimana web semantik bekerja? web semantik akan bekerja seperti asisten pribadi kita. Jika kita menginginkan a delicious fried rice in this town maka web 3.0 akan menampilkannya. seolah kita berbicara kepada asisten kita "can you tell me where is the delicious fried rice in this town?".

Mengapa perlu semantik element dalam website kita?

Seperti yang saya katakan tadi. bukankah lebih baik bagi kita untuk mempersiapkan dari pada membuatnya ditengah jalan?. dengan mempersiapkan element semantik pada website/blog kita, itu artinya kita sudah mempersiapkan website/blog kita 'bertempur' di era web 3.0

kurang jelas tentang permasalahan pada artikel kali ini, atau munggkin anda memiliki pertanyaan?
Kami akan senantiasa menjawab pertanyaan anda.

Studi Kasus Perpustakaan

File ini saya buat pada saat zaman SMK dulu. yang ditugaskan untuk membuat website jenis perpustakaan. karena pengetahuan saya akan studi kasus ini yang minim dan ketertarikan saya akan explorasi hal baru. jadilah website ini. dengan DFD yang tidak sesuai dari pembimbing.

saya pikir harusnya website ini jadi toko online karena memang dilihat dari alur dan cara kerjanyya memang tidak seperti website perpustakaan.

saya menyarankan anda untuk mendownloadnya! kenapa? karena anda yang baru pertama belajar PHP akan terbantu bagaimana cara merancang website secara dinamis dengan pemrograman gaya procedured.

websitenya terdiri dari 3 level admin yaitu
Superadmin: keperluan untuk maintenance website.
Admin : Untuk penginput buku baru, layaknya seorang admin perpustakaan.
Member: Untuk member yang ingin meminjam buku,

Silahkan di download:
Linknya

Untuk anda yang mempunyai pertanyaan silahkan tulis di coment.!
Super admin:

username: cecep
password: 123456

Pentingnya SEO on the road

Pentingnya Seo on the road
Kali ini penulis akan membahas bagaimana cara seo bekerja dan bagaimana kita sebagai driver blog/website mengemudikan blog kita melalui arung jeram.

Kita semua tau situs web dengan peringkat nomor 1 didunia adalah Google.com dimana google adalah sebuah searh engine terpadat didunia. kita ibaratkan google S.E (searh enggine) adalah sebuah jalan raya yang sangat padat, lalulintas yang sangat padat membuat kendaraan kita (blog) sulit untuk dikemudikan.

lalu bagaimana cara agar blog kita mendapat peringkat yang baik tanpa harus berbuat curang dengan tools yang betebaran di internet yang beresiko kita akan di kick oleh pemilik jalan raya.

saatnya kita semua belajar bagaimana cara memodif kendaraan kita agar dapat berjalan pada situasi apapun.

Mengapa harus Seo on the road

jika anda baru memulai pengalaman tentang seo, ingat baik-baik google adalah SE yang canggih dengan jutaan web/blog terdaftar didalamnya dan masing masing pemilik web/blog tersebut ingin menampilkan web/blognya pada halaman pertama di google.

google mempunyai banyak algoritma, dimana masing-masing memiliki fungsi uniknya tersendiri. dengan fungsi unik yang banyak dan macam-macam kitapun sebagai driver harus mempunyai blog yang 'unik'.

SEO on the road sendiri adalah sebuah istilah yang digunakan untuk menggambarkan optimasi webkita pada saat google sedang menelusuri keyword yang baru saja diketik oleh user.

jika anda masih bingung coba simak baik-baik analogi ini.
blog anda adalah sebuah mobil. dan google adalah sebuah jalan raya yang padat lancar. anda ingin memodifikasi mobil anda saat itu tapi anda tidak diizinkan berhenti di tengah jalan raya. bagaimana cara anda memodif mobil anda? saya tidak menyuruh anda untuk memodifnya secara manual. saya hanya ingin mengajak anda berfikir bukankah lebih baik jika sebelum mobil kita masuk kejalan raya kita sudah mensettingnya agar siap disegala kondisi?

itulah yang saya maksud seo on the road. yaitu blog kiat seolah telah memberi tahu google bahwa kita mempunyai content yang user inginkan.

lalu apa saja yang harus di optimalkan pada blog kita?

Pengoptimalan title tag dan meta tag

Mungkin anda mendengar desas desus kalau meta tag saat ini sudah tidak terlalu berpengaruh untuk google. tapi alangkah baiknya anda jika anda membawa uang lebih ditengah perjalanan.

berikut adalah optimasi title tag pada blogger (blogspot)

 

404: Maaf halaman yang ada cari tidak ada | Namablog 




Pencarian keyword untuk :: <data:blog.searchQuery/> :: | NamaBlog


 
Arsip Artikel Bulan <data:blog.pageName/> | NamaBlog
 



 
<data:blog.pageName/> | NamaBlog 

 








Pencarian pada Label :: <data:blog.pageName/> :: | NamaBlog
 


 
<data:blog.pageTitle/> | NamaBlog 
 
 



 


 
<data:blog.pageName/> - NamaBlog
 


 



 



kode meta tag diatas diambil dari blog omm.com blog dengan peringkat nomor 2 di Indonesia.

bagaimana cara kerja kode diatas? sederhana, kode diatas hanya menampilkan isi berupa judul postingan pada blog kita setiap halaman post akan mempunyai title yang berbeda beda.

terdengar sederhana memang tapi memiliki pengaruh yang cukup besar pada SE bukan hanya google, tapi berpengaruh juga pada yahoo, bing dan SE lainnya.

Untuk artikel selanjutnya penulis akan membahas tentang optimasi seo pada element semantik.

jika anda mempunyai pertanyaan silahkan isi di kolom komentar. penulis dengan senang hati akan menjawab pertanyaan-pertanyaan dari pembaca.

Membuat element baru pada HTML 5

Membuat element baru pada HTML 5

Assalamu'alaikum. buat agan-agan pembaca setia, walau blog ini sekarang masih di reconstruksi u r da real MVP :'(

ok, Back to topic. agan-agan pasti pernah suatu hari berfikir untuk Membuat element baru pada HTML 5 yups, pemikikiran yang Briliant sekarang bukan hal yang mustahil untuk membuat tag baru. berikut saya kasih contohnya.

kita akan mencoba membuat tagbaru bernama <wtd> kerenkan gan tagnya

<!DOCTYPE html>
<html>

<head>
  <title>Membuat Element Baru</title>
  <script>document.createElement("wtd")</script>
  <style>
  wtd{
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  }
  </style>
</head>

<body>

<h1>
My First Heading</h1>
My first paragraph.
<wtd>My First Hero</wtd>

</body>
</html> 

Nah, gampangkan gan? Eits tapi jangan seneng dulu. seorang designer/ UI developer yang baik selalu melihat sesuatu yang baru dari sudut pandang yang berdeda dan akan memunculkan pertanyaan seperti "Apakah tag baru ini akan work di semua browser?" dan kalau ente bukan orang yang suka menjelajah dunia maya. maka ide agan Membuat element baru pada HTML 5 hanya akan jadi Isapan jempol belaka.

ingat gan
Setiap Penyakit pasti ada obatnya
itu bagi seorang dokter dan pasien tapi bagi seorang programmer
Setiap Bug pasti ada jalan keluarnya

dan inilah saatnya kalian diperkenalkan kepada HTML5shiv. Apa itu HTML5shiv ? jawabannya ada di tulisan selanjutnya.. :p

Terimakasih kepada agan yang telah berkunjung. tunggu pembahasan menarik berikutnya.
Wassalam WR WB

Apa yang baru dari HTML 5 ?


Membuat element baru pada HTML 5

Assalamu'alaikum mas/mba di perkembangan zaman yang makin maju dan etika moral yang makin amburadul ini (apa pula.. xD). perkembangan web semakin maju dengan berbagai tools, plugin dan pengembangan bahasa markah itu sendiri, bahasa markah? yups ituloh kang HTML bahasa markah yang digunakan untuk membuat/mendesain rangka website.

apa yang baru dari HTML 5 ? jika kamu tidak mengupdate bahasa markah yang 1 ini, kamu bagaikan im legend(baca, manusia primitif) ditengah kota newyork. kenapa sih kita harus belajar HTML 5 dan apa yang baru dari HTML 5 ?. banyak banget keuntungan yang bisa kita ambil dari HTML 5 ini sob. kalo ente masih bingung perbedaannya oke ane jelasin sob cekidot.

di HTML 5 kita harus menambahkan DOCTYPE intinya inilah yang membuat mesin browser mengetahui kalo yang ente tulis itu HTML 5 cmiiw.

<!DOCTYPE html>

Selanjutnya ente juga harus menambahkan charset apa itu charset, charset adalah tag meta yang akan menjaga tampilan huruf yang ente tulis. maksudnya? jadi tampilan hurufnya akan tetap latin walau web ente dibuka di Jazirah Arab, China, Nyanmar, Thailand, dll cmiiw.

<meta charset="UTF-8">

Jadi Struktur dasarnya berubah gan jadi seperti ini:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>
</html> 

Nah, strukturnya berbeda dengan yang kita pelajari dulu di struktur dasar html. Oke, sekian dulu dari saya kurang lebih mohon maaf.

orang baik selalu meninggalkan Komeng gan!!

Wassalam Wr. Wb

urutan prioritas pada selektor css



Asslamu'Alaikum..

Halo, sobat WTD sore ini saya ingin membahas kelanjutan dari dasar css yang sudah saya posting sebelumnya, kali ini saya akan membahas tentang prioritas pada selektor css, maksudnya adalah saat browser membaca css anda maka yang mana yang akan didahulukan. langsung saja lihat pada gambar :


Perhatikan baik-baik css diatas. saya sudah memberi background berbeda pada setiap selektor.

Aturan mainnya adalah selektor yang paling spesifiklah yang akan menjadi pemenangnya. lalu set background yang kalah akan kemana? tentusaja yang kalah hanya akan tertimpa oleh pemenang, seperti hukum Alam.

Jadi Aturannya adalah seperti ini!
  1. Setiap element/tag selector bernilai 0.0.0.1
  2. Setiap Class selector bernilai 0.0.1.0
  3. Setiap id selector bernilai 0.1.0.0
  4. dan setiap inline selektor akan bernilai 1.0.0.0
Semakin angkanya mendekat ke kiri maka semakin spesifiklah suatu selektor.

nah, jadi yang paling diutamakan oleh browser adalah yang inline selector. apa itu inline selektor, bagi yang belum tau haraf baca ini dulu penulisan dasar css. bagi yang udah ngerti kita lanjut gan.!

sekarang saatnya kita hitung ke-spesifikan dari code yang kita buat tadi.
  1. selektor div bernilai 0.0.0.1
  2. selektor p bernilai 0.0.0.1
  3. selektor div p bernilai 0.0.0.2
  4. selektor div p.text bernilai 0.0.1.2
  5. selektor #string bernilai 0.1.0.0
jadi dari code diatas maka yang menang/ yang paling spesifik adalah #string jadi dia yang lebih diutamakan. silahkan cek codenya JSFiddle - prioritas CSS.

Selanjutnya perintah !important

!important pada css digunakan saat mendesak intinya adalah important akan merubah seluruh prioritas pada css dan !importantlah yang paling diutamkan.


Perhatikan code diatas! pastikan anda menggunkan !important. disaat terdesak, karena selain perintah ini akan menghancurkan urutan prioritas yang ada code juga akan semakin membingungkan bagi orang yang awam. silahkan cek JSFiddle - Prioritas css dengan perintah !important silahkan tambahkan !important pada selektor yang mana saja.

Sekian Tulisan saya kali ini, semoga membantu.

Asslamu'Alaikum..

struktur dasar penulisan css


Assalamu'Alaikum..

Halo, sobat WTD posting saya kali ini adalah struktur dasar penulisan css, css mempunyai block level prioritas yaitu css mana yang akan ditampilkan lebih dahulu oleh browser, ada 3 block level pada css, yaitu tag, id, Class. apa itu tag, id dan class?  langsung ke gambar aja ya :


gambar diatas menunjukan 3 tingkatan yang ada pada css.

pertama adalah tag
css manipulasi ini ditulis langsung pada tag HTML seperti gambar diatas yang pertama cssnya langsung merujuk pada tag  body. jadi pada saat anda memakai tag body maka akan mengasilkan background berwarna putih.

kedua adalah id ditulis dengan tanda [#] diawal penulisan css, jika anda telah menulis di css <code>#body</code> maka di HTML anda akan memasukan atribut id pada tag html tersebut. lihat gambar dibawah!

ketiga adalah class ditulis dengan tanda [.] diawal penulisan css, dan akan dipanggil menggunakan Atribut class pada HTML lihat gambar dibawah! 


lihat cara memakai id dan class pada gambar diatas, class dan id yang digunakan ada pada gambar pertama.