Search Engine Optimization atau SEO adalah cabang ilmu yang mengopmalkan halaman situs kita, agar bisa tampil dengan baik pada search engine, sehingga kita bisa mendapatkan trafik organik. Sebagai contohnya kita coba buka search engine yang paling banyak digunakan pada saat ini, yaitu Google. Kita coba mencari dengan kata kunci mdn fixing the internet. Nah disini kita mendapatkan hasil pertamanya adalah blog MDN, dengan judul “We’re Fixing the Internet. Join Us. – The Mozilla Blog”. Kemudian dibagian bawah judul ada keterangan singkatnya “For over two decades, Mozilla has worked to build the internet into a global public” dan seterusnya.

Nah, pertanyaan kita adalah bagaimana caranya agar halaman kita bisa masuk ke Google, dan dapat ditampilkan secara benar seperti ini? Sehingga setiap kali ada yang mencari kata kunci tertentu, Google akan menampilkan situs kita, dan kita mendapatkan trafik organik dari pencarian tersebut.

Untuk lebih mengerti mengenai hal ini, kita klik ke halaman blog Mozilla tersebut. Lalu kita tekan Ctrl+U untuk View Source atau melihat kode HTML dari halaman ini. Sekarang kita bandingkan dengan hasil pencarian Google. Judul yang ditampilkan oleh Google ini berasal dari tag Title. Kita cari tag Title-nya ya. Nah ini. Kita baca konten dari Title dan bandingkan dengan judul dari hasil search Google. We’re Fixing the Internet. Join Us – The Mozilla Blog. Sama persis ya.

Dan kemudian untuk keterangan dari hasil pencarian Google, bisa kita bandingkan dengan isi meta Description. Kita cari dahulu metanya dari source blog MDN. Udah ketemu. Nah kalau kita bandingkan kontennya juga sama ya dengan keterangan di Google. “For over two decades, Mozilla has worked to build the internet into a global public.”. Hanya saja di hasil pencarian Google, setelah a global public ada perubahan sedikit agar hasilnya lebih optimal dan menarik bagi yang melakukan pencarian.

Disini kita bisa melihat bahwa sebagai pembuat dokumen HTML, kita bisa memberikan sugesti kepada Google, mengenai bagaimana cara menampilkan situs kita di hasil pencariannya. Untuk bagian judul bisa kita taruh pada tag Title. Sedangkan untuk bagian keterangan bisa kita taruh pada meta description. Namun perlu diingat bahwa Google juga memiliki algoritmanya tersendiri untuk melakukan optimisasi hasil pencariannya, jadi walaupun kita memberikan sugesti melalui metadata, nantinya Google sendiri yang akan memutuskan bagaimana cara menampilkan halaman kita. Terkadang Google akan mengganti judul atau deskripsi kita, dengan hasil yang diambil dari konten agar lebih menarik.

Untuk mempelajari lebih lanjut mengenai tag Meta, kita bisa melakukan pencarian di Google dengan kata kunci html meta. Lalu kita buka referensi dari w3schools.com. Disini kita bisa melihat contoh metadata yang diperlukan di dalam dokumen HTML, dimulai dari charset yang telah kita bahas di video sebelumnya. Kemudian description dan keywords yang akan kita gunakan untuk SEO. Sedangkan metadata author akan menjelaskan mengenai nama penulis dokumen HMTL ini. Metadata author ini sifatnya opsional ya, boleh dicantumkan dan boleh tidak, karena pengaruhnya sangat minimal. Dan yang terakhir adalah viewport.

Kita copy contoh metadata dimulai dari deskription hingga viewport. Lalu kita paste ke dalam kode HTML kita, di bawah metadata charset. Lalu kita bisa mengubah content dari metadata description menjadi “Alice’s Adventure in Wonderland is a novel written by Lewis Carroll”. Kemudian untuk metadata keywords, kita bisa mengganti content-nya menjadi “Alice,Wonderland”.

Keywords ini adalah kata kunci yang dimasukan oleh pencari pada saat menggunakan Google. Kita bisa memberikan banyak keywords dalam satu dokumen, dan masing-masing keywords dipisahkan dengan tanda koma. Dengan menambahkan metadata keywords, maka kita memberikan sugesti kepada Google, agar apabila ada yang sedang mencari Alice atau Wonderland, maka Google akan menampilkan halaman kita sebagai hasil pencarian. Namun perlu kita ingat juga, bahwa diluar sana sudah begitu banyak halaman HTML lain, dan semua halaman HTML juga memberikan sugesti kepada Google, maka Google akan memilih hanya halaman terbaik yang akan ditampilkan di halaman pertama hasil pencarian. Dalam hal ini, tentunya halaman yang bisa memberikan informasi yang benar-benar sedang dicari oleh pencari tersebut.

Oleh karena itu kita sangat disarankan untuk menuliskan keywords hanya untuk kata kunci yang sangat berhubungan dengan konten yang sedang kita sajikan. Sebagai contoh apabila saya membuat halaman HTML untuk video ini, maka saya bisa memberikan keywords seperti belajar HTML, tag meta, metadata, SEO dan hal-hal lain yang masih dibahas dalam video ini. Namun saya tidak boleh memberikan keywords yang tidak ada hubungannya dengan konten, misalnya seperti makanan, pakaian, kucing, dan lain-lain. Karena search engine akan memberikan penalty terhadap keywords yang tidak sesuai.

Untuk metadata author, bisa kita isikan dengan nama penulis dokumen HTML. Misalnya bisa saya isi dengan Skysen, atau bisa juga dengan nama saya David. Namun metadata ini tidak memiliki pengaruh yang besar terutama untuk SEO, sehingga jarang digunakan.

Metadata viewport akan kita bahas secara khusus setelah ini. Untuk sementara kita lanjutkan dahulu ke tag Title. Tag Title ini akan menjadi judul utama dari hasil pencarian Google, jadi kita isikan dengan judul utama halaman kita, yaitu Alice’s Adventure In Wonderland. Kita perhatikan disini bahwa kita menuliskan judul utama dua kali ya, yang pertama adalah dengan menggunakan elemen Title di dalam Head. Dan yang kedua dengan menggunakan elemen Header di dalam Body.

Kita simpan kode HTML kita. Lalu kita tekan refresh pada browser kita.

Untuk metadata keywords dan description tidak ada perubahan pada tampilan halaman HTML kita. Namun untuk bagian Title, akan dituliskan oleh Chrome pada bagian tab. Bisa dilihat disini. Sebagai tambahan saja, kita juga bisa menggunakan huruf unicode di dalam tag Title. Contohnya kita copy emoticon dari Header1 ke dalam Title. Dan kemudian kita save dan refresh. Bisa dilihat bahwa judul di dalam tab Chrome juga bisa menampilkan emoticon tersebut.

Sekarang kita bahas mengenai metadata viewport. Dengan menggunakan viewport, kita bisa mengatur berapa bagian dari layar yang bisa digunakan untuk menampilkan konten kita. Hal ini sudah menjadi penting, karena pada saat ini orang-orang yang mengakses halaman HTML kita sudah tidak hanya menggunakan dekstop komputer ataupun laptop lagi, melainkan sudah lebih banyak yang menggunakan smartphone dan tablet. Dengan semakin banyak jenis perangkat yang digunakan, ukuran layarnya pun semakin banyak berbeda. Kita pun mesti memberikan pengaturan agar browser dapat memanfaatkan ukuran layar secara optimal.

Untuk informasi lebih lanjut mengenai viewport, kita bisa melakukan pencarian di Google dengan kata kunci meta viewport. Kita coba klik referensi dari w3schools.com. Disini kita bisa melihat penjelasan ringkas mengenai viewport. Lalu ini adalah tag meta viewport yang disarankan untuk digunakan pada standart HTML 5. Di dalam tag meta, kita bisa melihat attribute name yang isinya viewport, berarti kita sedang memberikan meta data mengenai viewport. Kemudian attribute content memiliki 2 nilai. Nilai pertama width=device-width, yang artinya kita mengatur agar lebar dari konten kita menjadi sama dengan lebar layar dari perangkat yang sedang digunakan untuk melihat konten. Dan nilai kedua initial-scale=1.0 berarti ukuran zoom awal yang digunakan untuk menampilkan konten kita. Dengan mengatur nilai initial-scale dengan nilai 1, berarti browser akan menampilkan konten kita dengan ukuran font normal, namun untuk perangkat dengan ukuran layar kecil ada kemungkinan browser secara otomatis akan menggunakan ukuran font lebih besar agar tulisan bisa lebih terbaca.

Dibagian bawahnya lagi kita bisa melihat contoh halaman HTML, dimana gambar sebelah kiri adalah halaman HTML yang tidak menggunakan meta viewport. Kita bisa melihat bahwa ukuran gambar yang ditampilkan hanya kecil, karena hanya menggunakan separuh dari ukuran layar yang tersedia. Sedangkan teks yang berada dibawah gambar menggunakan font dengan ukuran yang terlalu kecil, sehingga tidak nyaman untuk dibaca. Sedangkan contoh gambar disebelah kanan adalah halaman HTML yang sama, namun mengunakan viewport. Kita bisa melihat bahwa ukuran gambar dan teks sudah lebih enak untuk dibaca. Namun perbedaan ini hanya bisa dilihat kalau kita sedang menggunakan perangkat smartphone atau tablet untuk mengakses halaman tersebut.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.