Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

Cara Membuat Resume yang Ditenagai HTML5 Microdata

by
Difficulty:BeginnerLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ari Ana (you can also view the original English article)

Pada bulan Mei 2009, Google memperkenalkan Rich Snippets, sebuah blok kecil informasi yang ditampilkan dalam hasil mesin pencari Google untuk mempermudah pengguna menentukan halaman mana yang relevan dengan pencarian mereka. Pada bulan Juni 2011, Google mengumumkan pembuatan Schema.org, sebuah inisiatif baru dari Google, Bing dan Yahoo!. yang bertujuan untuk memperbaiki web dengan membuat skema markup data terstruktur.

Tutorial ini menunjukkan cara membuat resume online yang menggabungkan Microdata Schema.org. Tutorial juga mencakup petunjuk bagaimana menggunakan Authorship Markup!


Item Bonus Termasuk!

Demo tutorial adalah template situs satu halaman yang bebas Anda gunakan untuk resume online Anda. Sebagai bonus, beberapa versi warna disertakan dalam file sumber zip; hijau tua, hijau muda, biru tua dan biru muda.

Harap dicatat bahwa ini bukan desain web atau tutorial CSS, jadi hanya markup HTML5 dan Microdata Schema.org yang akan dibahas.

Sekarang, mari kita mulai!


Langkah 1: CSS

Buat lembar gaya CSS yang disebut "style.css" dan sertakan kode berikut. Jangan khawatir; ini cukup sederhana, dan pemahaman itu tidak perlu untuk tutorial ini.


Langkah 2: Markup (Tanpa Termasuk Microdata Schema.org)

Selanjutnya, kita membutuhkan sebuah .html. Ini adalah tata letak dasar yang mungkin kita kenal.


Sebuah Catatan Sedikit Tentang Markup

HTML5 Shiv

Karena Microdata Schema.org didasarkan pada spesifikasi microdata HTML5, markup HTML5 digunakan untuk membuat template situs resume satu halaman. Sayangnya, browser web lama seperti IE7 dan IE8 tidak mengenali elemen HTML5 tertentu. Halaman yang ditulis menggunakan HTML5 tidak akan ditampilkan dengan benar di browser-browser lawas ini.

Berikut adalah screenshot demo resume online jika dilihat (IE8 Klik pada gambar untuk melihat gambar penuh):

Untuk mengatasi masalah dengan versi browser IE yang lebih tua ini, kode di bawah ini telah ditambahkan di antara tag

(tepat di bawah Stylesheet CSS):

Kode ini adalah shim JavaScript HTML5 untuk IE agar mengenali dan memberi gaya pada elemen HTML5.

Catatan: JavaScript HTML5 shim tidak diperlukan di IE9+ dan browser modern lainnya yang mendukung HTML5.

Daftar Definisi

Daftar definisi, <dd></dd> digunakan di markup dan bukannya unordered lists. Hal ini disebabkan oleh kenyataan bahwa ini lebih masuk akal, saat mempertimbangkan bagaimana setiap item memiliki judul dan deskripsi.

Section vs Article

Tampaknya ada beberapa kebingungan mengenai section HTML5 dan elemen article. Elemen section digunakan dalam markup karena tidak ada bagian dari resume yang dianggap sebagai konten mandiri.
Elemen article HTML5 digunakan untuk konten mandiri yang kemungkinan besar akan disindikasi seperti posting blog atau artikel berita. Artikel ini melakukan pekerjaan yang sangat bagus untuk menjelaskan perbedaan antara elemen HTML5 article dan section.


Langkah 3: Menambahkan Microdata Schema.org - Person dan PostalAddress

Jenis skema pertama yang akan kita tambahkan ke markup adalah Person dan PostalAddress.

Elemen Itemscope dan Atribut Itemtype

Elemen itemscope ditambahkan ke tag <div></div> yang ditempatkan di sekitar konten yang berisi informasi yang berkaitan dengan Schema, seperti ini:

Elemen itemscope dan atribut itemtype untuk Person Schema akan ditempatkan di bagian Contact and Social Media Links dari halaman web resume, seperti:

Elemen itemscope dan atribut itemtype untuk PostalAddress Schema disarangkan di dalam Person Schema dan ditempatkan di sekitar daftar unordered list <ul></ul> yang berisi informasi alamat seperti ini:

Atribut Itemprop

Atribut itemprop perlu ditambahkan sedapat mungkin menggunakan tag span sehingga informasi tambahan diberikan ke mesin pencari tentang halaman web kita. Berikut adalah atribut yang akan kita gunakan dari skema-skema ini:

Person Schema

  • itemprop="image"
  • itemprop="name"
  • itemprop="jobTitle"
  • itemprop="telephone"
  • itemprop="email"
  • itemprop="url"

PostalAddress Schema

  • itemprop="streetAddress"
  • itemprop="addressLocality"
  • itemprop="addressRegion"
  • itemprop="postalCode"
  • itemprop="addressCountry"

Markup Akhir untuk Bagian Contact and Social Media Links


Langkah 4: Menambahkan Microdata Schema.org - Daftar Item

Skema berikutnya yang akan kita tambahkan ke markup adalah ItemList.

Elemen Itemscope dan Atribut Itemtype

Elemen itemscope dan atribut itemtype untuk ItemList Schema akan ditempatkan di Bagian Skills seperti ini:

Atribut Itemprop

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Skema ItemList

  • itemprop="itemListElement"

Markup Akhir untuk Bagian Skills


Langkah 5: Menambahkan Microdata Schema.org - Organization

Selanjutnya, skema Organization akan ditambahkan ke markup.

Elemen Itemscope dan Atribut Itemtype

Elemen itemscope dan atribut itemtype untuk Organization Schema akan ditempatkan di sekitar setiap "Position" yang tercantum di bagian "Experience", seperti:

Atribut Itemprop

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Organization Schema

  • itemprop="jobTitle"
  • itemprop="name"
  • itemprop="description"

Markup Akhir untuk Bagian Experience


Langkah 6: Menambahkan Microdata Schema.org - Article

Selanjutnya skema Article akan ditambahkan ke markup.

Elemen Itemscope dan Atribut Itemtype untuk Article

Elemen itemscope dan atribut itemtype untuk Article Schema akan ditempatkan di "Article" yang tercantum di Bagian Publications seperti ini:

Atribut Itemprop

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

Article Schema

  • itemprop="name"
  • itemprop="url"

Markup Akhir untuk Bagian Publications


Langkah 7: Menambahkan Microdata Schema.org - EducationalOrganization and PostalAddress

Selanjutnya skema EducationalOrganization dan PostalAddress akan ditambahkan ke markup.

Elemen Itemscope dan Atribut Itemtype untuk EducationalOrganization

Elemen itemscope dan atribut itemtype untuk skema EducationalOrganization akan ditempatkan di Education Section seperti ini:

Elemen Itemscope dan Atribut Itemtype untuk PostalAddress

Elemen itemscope dan atribut itemtype untuk Skema PostalAddress bersarang di dalam EducationalOrganization Schema dan ditempatkan di sekitar kode yang berisi informasi alamat di bagian Education seperti ini:

Atribut Itemprop

Tambahkan atribut "itemprop" bila sesuai dengan tag <span></span>. Berikut adalah atribut yang akan kita gunakan dari skema ini:

EducationalOrganization Schema

  • itemprop="name"
  • itemprop="url"

PostalAddress Schema

  • itemprop="streetAddress"
  • itemprop="addressLocality"
  • itemprop="addressRegion"
  • itemprop="postalCode"
  • itemprop="addressCountry"

Markup Akhir untuk Bagian Education


Tentang Markup Authorship

Gambar menunjukkan Markup Authorship (John Resig) yang ditampilkan di hasil pencarian Google.

Pada bulan Juni 2011, Google mulai mendukung "Authorship Markup". Melalui penggunaan markup, seperti rel="author" dan rel= "me", mesin pencari dapat mengidentifikasi konten yang dibuat oleh penulis yang sama di seluruh web. Menggunakan Markup Authorship, situs web multi-pengarang dapat menghubungkan semua artikel dan tulisan yang ditulis oleh masing-masing pengarang ke "halaman pengarang" mereka yang spesifik.

Artikel dan posting individual dari situs web multi-pengarang harus dihubungkan ke halaman penulis yang sesuai dengan menggunakan tag rel="author". Jika halaman penulis juga menyertakan tautan ke Google Profile penulis menggunakan tag rel="me", informasi pengarang dapat muncul di hasil pencarian.

Untuk membantu pengguna menemukan konten berkualitas, Google menguji coba tampilan informasi penulis di hasil mesin pencarian. Fitur ini diluncurkan secara bertahap dan mungkin menjadi bagian yang sangat penting dari hasil dan peringkat mesin telusur.


Tag Rel

Bagian Contact and Social Media Links dari template situs resume satu halaman berisi URL yang terhubung ke halaman utama situs web dan media sosial. Atribut "rel" perlu ditambahkan pada tautan dari bagian ini sehingga Markup Authorship dapat diimplementasikan. Markup Authorship memungkinkan mesin pencari untuk mengidentifikasi konten yang dibuat oleh penulis yang sama di seluruh web.

Ada dua tag rel khusus yang digunakan untuk markup Authorship:

  • rel="me"
  • rel="author"

Sebagian besar tautan disertakan dalam laman web resume mengarah ke situs yang berisi orang yang sama. Jadi tag rel="me" telah ditambahkan. Untuk tautan Google Profile, tag rel="author" telah ditambahkan. Bergantung pada tempat Anda memposting resume online Anda, mungkin Anda perlu menggunakan tag rel="me" untuk tautan Google Profile.


Langkah 8: Membuat Google Profile

Jika Anda ingin mulai mengidentifikasi konten asli Anda di seluruh web menggunakan Markup Authorship, pertama Anda perlu membuat Google Profile.

Jika Anda sudah memiliki halaman Google Profile, maka Anda harus memperbarui informasi profil Anda sesuai dengan itu (tambahkan foto diri Anda, informasi tentang diri Anda, pekerjaan, dll.)

Anda juga perlu memastikan bahwa ada tab +1 sedang ditampilkan di halaman.

Jika profil Google Anda menyertakan tangkapan diri yang bagus dan jernih dari diri Anda, foto tersebut layak tampil sebagai thumbnail di hasil penelusuran.


Langkah 9: Menautkan Halaman Web ke Google Profile Anda

Menurut Google, untuk membuat kepengarangan sebuah halaman web, Anda perlu melakukan dua hal:

  • Tautkan halaman web itu ke Google Profile Anda
  • Perbarui Google Profile Anda dengan menautkan kembali ke beranda situs yang ada di halaman web.

Anda dapat menautkan konten ke Google Profile menggunakan tautan teks:

atau dengan menggunakan kode Tombol Google Profile:

Google baru-baru ini membuat perubahan pada instruksi markup authorship mereka yang mempengaruhi penggunaan tag rel="author" dan rel="me". Instruksi baru mengatakan untuk menggunakan rel="author" untuk kedua link teks dan tombol profil. Namun, tag rel="me" perlu digunakan, bukan rel="author". Lihat gambar di bawah ini.

Tangkapan layar "Error: Author profile page does not have a rel=me link to a Google Profile"

Menggunakan John Resig sebagai contoh:


Langkah 10: Melengkapi Formulir Google Authorship (Penting!)

Setelah Anda menambahkan microdata Schema.org dan menyelesaikan langkah 8 dan 9, Lengkapi dan kirimkan Formulir Permintaan Google Authorship.

Markup Authorship Anda mungkin tidak bekerja dengan benar sampai Formulir Google Authorship selesai dan diserahkan.


Langkah 11: Menguji Markup Microdata Menggunakan Rich Snippets Testing Tool

Klik gambar untuk melihat hasil pengujian yang lengkap

Anda dapat memastikan bahwa Google dapat mengurai dan menampilkan markup microdata Anda dengan benar di hasil pencarian dengan memeriksa halaman web Anda menggunakan Google Rich Snippets Testing Tool. Alat Pengujian ini dapat memeriksa beberapa jenis markup data terstruktur termasuk Microdata, Micro formats dan RDFa.

Catatan: Google Rich Snippets Testing Tool berada di Beta dan dapat memiliki hasil yang tidak diharapkan. Hasil yang ditunjukkan pada tangkapan layar ukuran penuh mencakup kesalahan "Warning: Missing required field fn." dari Schema.org tidak menggunakan tag "fn", namun tag-nya digunakan dengan Microformats. Ini kemungkinan besar sebuah kesalahan.


Semua Sudah Selesai!

Anda sekarang telah membuat resume online yang bagus dengan menggunakan HTML5 dan Microdata Schema.org, yang memberikan informasi tentang Anda yang mungkin ditampilkan dalam hasil mesin pencari. Selain itu, dengan menggunakan Authorship Markup, Anda dapat membantu mesin pencari mengidentifikasi semua konten asli Anda di seluruh web!

Ada pertanyaan? Beritahu kami di komentar dan terima kasih banyak telah membaca!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.