lifelong learner — urip iku urup, currently working on accenture.

7 Cara Membuat Struktur Kode Website Sesuai Standar Agar Dapat Muncul di Mesin Pencari Google

0
Degananda.com -

html-structure-seo

Salah satu tujuan memiliki suatu website adalah untuk mengenalkan produk / perusahaan / jasa yang hendak ditawarkan pada website tersebut pada khalayak luas melalui internet. Pada tahun 2020 google masih memiliki market share tertinggi dalam kategori search engine.

di tahun 2020 ini Google memiliki 92.26% market share, jauh menungguli mesin pencaran lain (search engine) seperti bing dan yahoo.

Sehingga, saat membangun website, harus dipastikan bahwa website tersebut telah mengikuti standar penulisan struktur kode (HTML) agar mesin pencari google dapat mengenali website tersebut dan netizen dapat menemukan website itu pada google search.

7 Cara Membuat Struktur Kode Website Sesuai Standar Agar Dapat Muncul di Google Search

Membuat website, baik dengan menggunakan CMS yang telah ada seperti wordpress ataupun membangunya dari awal (from scatch) dengan teknologi tertentu akan memakan waktu dan biaya. Oleh karena itu, pastikan website tersebut mengikuti kaidah-kaidah penulisan kode HTML agar website dapat terindex di google. Sehingga biaya dan waktu tidak terbuang sia-sia.


Berikut ini adalah beberapa langkah yang harus di ikuti dalam strukturisasi kode html untuk memastikan bahwa mesin pencari (terutama google) dapat mengindex website.

Langkah strukturisasi Kode 1 – Penggunaan html tag title

seo-website-struktur-utama-html-title.JPG
syntax title akan digunakan pada nama tab di browser.

Title (title) dalam syntax html berada pada bagian head. Kegunaanya adalah memberikan text pada browser tab. Mesin pencari akan mengidentifikasi konten dari suatu website salah satunnya adalah berdasarkan title ini.

Usahakan untuk menggunakan isi title (judul) dinamis. Berarti, title tersebut akan bergantung pada halaman yang sedang ditampilkan. Contohnya, apabila disuatu halaman website membahas mengenai “proses pemangganan ikan”, maka pastikan pada sisi title harus menggunakan judul yang selaras dengan konteks posting tersebut

Pada degananda.com, setiap halaman-nya selalu memiliki title yang berbeda berdasarkan tema artikel yang dituliskan.

pada mesin pencari google, title inilah yang akan ditampilkan sebagai judul dari hasil pencarian.

title_google_search_hasil_pencarian.JPG
isi yang ada pada syntax html title akan ditampilkan pada hasil pencarian google.

Langkah strukturisasi kode 2 – Penggunaan metadata : description

metadata-contoh-seo.JPG
contoh penggunaan metadata description pada degananda.com

Secara harfiah metadata pada website adalah identitas yang menjelaskan mengenai konten yang disajikkan oleh suatu website. Terdapat satu metadata yang sangat penting dan harus terdapat dalam suatu website agar mesin pencari dapat melakukan index website tersebut yakni metadata:description.

meta property="description" content="sinopsis halaman"

Metadata ini terletak pada bagian header (head) dari website bersama dengan tag title yang ada pada langkah 1. Metada description ini berisi mengenai deskripsi singkat yang menjelaskan mengenai halaman tersebut.

Deskripsi singkat dalam penulisan artikel biasannya disebut sebagai sinopsis. Oleh karena itu, penting mendefinisikan sinopsi artikel pada metadata:description

Langkah strukturisasi Kode 3 – Penggunaan heading

heading-pada-microsoft-word.JPG
heading pada microsoft word.

layaknya seperti menulis pada microsoft word, agar setiap seksi dari artikel yang ada pada microsoft word dapat terindex maka diperlukan penggunaan heading.

pada heading diatas cara menanam jagung adalah heading 1 kemudian dibawahnya akan digunakan heading 2 dan heading 3 untuk strukturisasi-nya.

selalu gunakan heading mulai dari terkecil hingga terbesar. Umumnya, hanya empat level heading yang digunakan. level 1 hingga level 4. Level 1 menjelaskan mengenai seksi utama(penjelasan lebih umum) yang akan dibahas, level 2 ke-atas akan menjelaskan sub seksi(penjelasan lebih khusus) dari konteks yang dibahas.

usahakan untuk selalu menggunakan struktur heading ini meskipun website yang dibangun bukanlah di tujukan untuk menampilkan artikel. Jika memang secara kondisi tidak dapat menggunakan heading maka gunakanlah div dengan leveling (parent-child) yang baik.

Langkah strukturisasi Kode 4 – Penempatan alt-text pada gambar

setiap gambar yang ditampilkan pada website dengan menggunakan syntax img sebaiknya diberikan alternate text yang mana adalah penjelasan singkat mengenai konteks dari website tersebut.

img src="degananda.com.jpg" alt="tutorial pemrograman"

Penggunaan alt text ini ditujukan agar mesin pencari (terutama google) juga dapat mengenai gambar tersebut dengan text. Sehingga website dapat semakin diprioritaskan dalam proses indexing.

dengan alt-text, maka saat cursor mouse diarahkan pada gambar itu akan terdapat tooltip text.

Langkah strukturisasi Kode 5 – Penggunaan open graph (OG) tag

facebook-og-tags-sosial-media.JPG
salah satu media sosial yang support dengan open graph adalah facebook.

terdapat konsensus dalam dunia sosial media pencari yakni open graph tag. Ini adalah tag / syntax html yang dikhususkan untuk media sosial. Apabila suatu website menggunakan metadata dengan jenis og (open graph) maka website tersebut juga dapat dikenali oleh sosial media seperti facebook, instagram dan lain sebagaiinya.

meta property="og:description" content="sinopsis halaman"

Sebagai contoh untuk menggunakan metadata description dengan open graph (og) maka cukup tambahkan prefix “og:” pada property tersebut. Hal ini berlaku untuk metadata lainnya (tidak hanya description).

Jika sosial media tersebut tidak mendukung open graph tag maka dapat menggunakan tag khusus untuk media sosial tersebut. Sebagai contoh twitter tidak mendukung og, tetapi memiliki tag khusus yang dapat digunakan yakni prefix “twitter:”, sehingga contoh implementasi pada metadata description adalah sebagai berikut

meta property="twitter:description" content="sinopsis halaman"

Langkah strukturisasi Kode 6 – Mengizinkan mesin pencari untuk melakukan pemindaian website

Kelima hal diatas yang telah di implementasikan pada website akan menjadi sia-sia apabila website tersebut tidak mengizinkan search engine crawler (robot untuk melakukan pemindaian website)  untuk melakukan indexing / pemindaian atas website itu.

Agar dapat mengizinkan mesin pencari memindai website yang dibuat adalah dengan cara menggunakan robots.txt. Crawler mesin pencari akan membaca file robots.txt ini, dan apabila pada file tersebut terdapat baris kode untuk mengizinkan search engine crawler memindah website itu, maka website tersebut dapat di pindah dan di index pada mesin pencari.

User-agent: * Disallow: [daftar-halaman-yang-tidak-dizinkan] Allow: /

dibawah ini adalah baris kode yang harus dituliskan agar web crawler milik mesin pencari (baik itu google, bing ataupun yahoo) dapat memindai suatu webstie.

robots.txt.degananda.com.jpg
implementasi robots txt pada degananda.com

contoh, pada website degananda.com. terdapat file robots.txt. Pada contoh diatas, pada sisi allow tidak maksimal karena hanya mengizinkan admin-ajax php. Olehkarena itu diperlukan mengubah konten dari property Allow menjadi “/“.

implementasi_robots_txt_all_degananda.jpg
contoh implementasi robots.txt yang mengizinkan seluruh halaman di pindah oleh mesin pencari.

Langkah strukturisasi Kode 6 – Alamat website untuk semua tipe (canonical)

terdapat berbagai cara mengakses suatu website dengan domain tertentu. Contohnya pada degananda.com dapat diakses dengan cara menggunakan beberapa alamat dibawah ini :

  • degananda.com
  • www.degananda.com
  • http://degananda.com
  • https://degananda.com
  • http:/www.degananda.com

hal yang harus dipastikan adalah keseluruhan cara tersebut harus bisa menampilkan isi dari halaman degananda.com inilah yang disebut dengan canonical dalam konteks pengaksesan website dengan menggunakan nama domain.

cobalah akses salah satu dari lima cara mengakses degananda.com, secara canonical, seluruhnya akan diarahkan ke https://degananda.com (mengapa https? karena lebih aman)

Langkah strukturisasi Kode 7 – Implementasi Responsive web design data Metadata-nya

degananda-com-versi-desktop.JPG
degananda.com versi desktop
degananda-com-versi-mobile.JPG
degananda.com versi mobile

usahakan untuk selalu membuat desain dari website yang dapat dibuka dari desktop  / laptop ataupun mobile. Ini dikarenakan salah satu sifat dari mesin pencari seperti google adalah menyukai website yang dapat dibuka pada mobile phone.

Mesin pencari menyukai website yang dapat dibuka di desktop dan smartphone karena mereka akan mendapatkan audience (user) yang lebih luas tidak terbatas pada platform tertentu.

meta name="viewport" content="width=device-width, initial-scale=1"

Setelah memastikan bahwa website responsive, maka tambahkanlah metadata diatas tersebut untuk memberi tahu mesin pencari bahwa website tersebut menggunakan kaidah responsive web desain (RWD) atau kaidah desain yang memungkinkan website tersebut dapat dibuka disegala resolusi device.

(Visited 10 times, 1 visits today)

Leave a Reply