SEO untuk Web Developer

*Melakukan kegiatan tulis menulis kode saat lebaran di kampung halaman*

Sebut saja kalian mempunyai sebuah web yang sangat keren atau perusahaan kalian mempunyai web yang sangat bagus.

Apa gunanya itu semua jika orang tidak tahu web tersebut?

Berarti kita perlu telaah terlebih dahulu dari mana orang bisa mengetahui situs web tersebut? Dari mesin pencari. Data menunjukkan 93% trafik web datang dari mesin pencari.

Itulah gunanya SEO.

SEO dapat membantu web kalian tersebut lebih mudah ditemukan orang lain melalui mesin pencari.

SEO merupakan kependekan dari Search Engine Optimization. Dengan kata lain bagaimana cara melakukan optimasi web kalian pada mesin pencari agar mudah ditemukan.

Pada dasarnya cara meningkatkan SEO terbagi 2: sisi marketing dan sisi teknis.

Sisi marketing meliputi bagaimana konten dalam web harus ditulis.

Sisi teknis meliputi apa kode yang perlu ditulis di web tersebut. Inilah yang akan kita bahas sekarang.

1. Sitemap

Berbentuk 1 (atau lebih) file yang biasanya bernama sitemap.xml.

Fungsi:

Menyediakan informasi mengenai konten di situs web kita dan hubungan diantara mereka.
Membantu mesin pencari untuk melakukan crawl lebih efektif.

Contoh:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.com/foo.html</loc>
    <lastmod>2022-06-04</lastmod>
  </url>
</urlset>

2. Robots

Berbentuk 1 file yang bernama robots.txt yang terletak di root situs web kita.

Fungsi:

Memandu crawler URL apa yang mereka bisa akses

Contoh:

User-agent: Googlebot
Disallow: /nogooglebot/

User-agent: *
Allow: /

Sitemap: http://www.example.com/sitemap.xml

3. Meta Tag

Dituliskan di antara tag <head>, ditulis menggunakan tag <meta>.

Fungsi:

Menyediakan informasi utama dari situs web kita
Mengatur tampilan pratinjau saat URL situs web dibagikan

Terbagi 2:

Open Graph (Google, Facebook, LinkedIn, Slack, Discord, dll)

<head>
  <meta property="og:title" content="Over Hangman" />
  <meta property="og:description" content="Tech related question hangman game" />
  <meta property="og:url" content="https://over-hangman.iwgx.io" />
  <meta property="og:image" content="https://i.ibb.co/5LYPM4Z/overhangman-card.png" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="iwgx" />
</head>

X / Twitter

<head>
  <meta name="twitter:title" content="Over Hangman" />
  <meta name="twitter:description" content="Tech related question hangman game" />
  <meta name="twitter:url" content="https://over-hangman.iwgx.io" />
  <meta name="twitter:image" content="https://i.ibb.co/5LYPM4Z/overhangman-card.png" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:creator" content="@ilhamwahabigx" />
</head>

4. Structured Data

Dituliskan didalam tag <script> dengan format JSON.

Fungsi:

Membantu mesin pencari untuk memahami dan mengklasifikasikan konten kita
Menampilkan hasil yang lebih kaya di laman pencarian

Ada 35 jenis structured data yang kita terapkan, lihat dibawah ini.

Structured Data Markup that Google Search Supports | Google Search Central | Documentation | Google for Developers

Explore the structured data-powered features that can appear in Google Search, including examples of how they appear in search results. Learn how to add structured data to help your site display in rich results on Google Search.

https://developers.google.com/search/docs/appearance/structured-data/search-gallery

Contoh: menambahkan search bar

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://www.example.com/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://query.example.com/search?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  }
}
</script>

5. Sitelinks

Merupakan link dari satu situs yang dikelompokkan di hasil pencarian

Fungsi

Menghemat waktu pengguna
Membantu pengguna mendapatkan informasi laman dengan cepat

Otomatis ditambahkan oleh mesin pencari, kita tidak menuliskan apa-apa secara eksplisit, namun bisa dibantu dengan:

Membuat struktur situs web yang mudah dijelajahi
Pastikan judul dan bagian kepala tiap laman informatif, relevan, dan ringkas
Pastikan teks dari link internal relevan dan ringkas

Pengauditan:

Sekarang kita sudah tahu cara meningkatkan SEO situs web kita, namun bagaimana cara kita tahu apa yang kita lakukan itu sudah benar? Kita bisa melakukan pengecekan dengan menggunakan cara berikut:

Google Search Console

Layanan gratis dari Google dimana kita bisa memasukkan situs web kita untuk dianalisa.

Fungsi:

Membantu kita mengetahui masalah dan cara meningkatkan visibilitas situs web kita di laman pencarian

Lighthouse

Kakas gratis dari Google untuk membantu kita mengaudit situs web kita salah satunya SEO.

Fungsi:

Membantu menampilkan apa masalah atau hal yang dapat kita lakukan untuk membuat situs web kita lebih baik lagi

Selain hal yang disebutkan diatas sebenarnya masih banyak lagi hal yang dapat kita lakukan untuk meningkatkan visibilitas situs web kita di mesin pencari. Misalnya: meningkatkan aksesibilitas, membuat web lebih cepat, menjadikan ramah mobile, dll. Namun itu bisa jadi pembahasan di lain hari.

Sekarang apa kalian sudah siap untuk membuat situs web kalian lebih banyak ditemukan orang? Mulailah menulis kode itu!