Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO
Webdesign

Tingkatkan Kemampuan Situs Web Anda dengan Semantic Markup

by
Difficulty:BeginnerLength:LongLanguages:

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

Dalam tutorial ini, kita akan melihat makna membangun ke konten Anda dengan grafik terbuka, kartu Twitter, dan microdata. Dengan demikian konten Anda akan lebih menarik, lebih relevan, dan lebih mudah ditemukan oleh pengguna potensial.

Google, Facebook, Twitter, dan platform lain yang Anda dan saya gunakan untuk berbagi dan menemukan konten masih tidak dapat membaca pikiran kita. Mesin yang menggerakkan jumlah besar bergantung pada Anda dan saya, desainer dan pengembang, untuk mengajari mereka tentang makna yang terkandung dalam konten kita dan bagaimana hal itu berkaitan dengan target pemirsa kita. Dengan mengajarkan platform ini tentang abstraksi dan makna, kita mengizinkan mereka menampilkan konten yang lebih relevan, provokatif, dan dapat ditemukan.

Apa itu Discoverability?

Discoverability adalah kemudahan dengan mana sebuah mesin atau orang dapat menemukan sedikit informasi yang relevan secara online.

Yang mana dari postingan  Facebook ini yang lebih menarik perhatian Anda?

Yang satu ini Tweets adalah lebih provokatif?

Dan yang mana dari hasil pencarian Google ini yang lebih relevan dengan minat Anda?

Google search result with and without microdata

Perbedaan di atas jelas. Jika Anda tidak menerapkan Protokol Grafik Terbuka Facebook, sistem Kartu Twitter, dan Microdata untuk mesin telusur, konten Anda cenderung diabaikan demi konten yang ditampilkan oleh pesaing Anda yang lebih relevan. Dalam artikel ini saya akan menunjukkan kepada Anda pentingnya memahami audiens target Anda sambil menerapkan sistem ini ke dalam markup semantik Anda.

Markup

Pertama, apa sebenarnya markup itu?

Bahasa markup dokumen adalah sistem modern untuk membuat anotasi dokumen dengan cara yang dapat dibedakan secara sintaksis dari teks. -Wikipedia

Dalam istilah yang lebih sederhana, ini adalah cara untuk menandai, membubuhi keterangan, atau memberi gaya dokumen dengan pena, pensil atau komputer dengan cara yang terlihat berbeda secara simbolis dari teks yang Anda tandai. Istilah ini berasal dari proofreader yang akan menandai manuskrip untuk pengeditan.

Proofreaders Marks from the Chicago Manual of Style
Dari Chicago Manual of Style

Tanda-tanda penilai adalah bentuk markup. Ingat ini dari kelas bahasa Inggris sekolah menengah (atau apakah Anda terlalu sibuk bermain dengan Walkman mewah Anda untuk memperhatikan?)

Berikut ini tiga cara Anda dapat mem-markup dokumen digital untuk menunjukkan tajuk:

HTML:

Markdown

LaTeX

Sekarang setelah Anda memiliki pemahaman yang lebih jelas tentang apa itu LaTeX ... err, markup, kita akan membuat dokumen HTML5 dasar dengan satu konten tunggal. Kita akan menggunakannya untuk mengilustrasikan berbagai cara kita dapat membangun makna ke konten tersebut, yang mengarah ke peningkatan dalam hal dapat ditemukan.

HTML

Pertama, buat dokumen HTML awal di editor teks pilihan Anda.

Itu jauh lebih sederhana daripada cara dulu. Sekarang mari kita tambahkan beberapa konten!

Konten

Berikut ini satu konten kita, gambar kucing yang sangat tidak bahagia, di bagian dalam badan dokumen kita.

Cheer up mate
Semangati kawan ...

Judul

Sekarang kita tahu konten apa yang kita kerjakan, kita dapat menambahkan sedikit konteks pertama ke halaman kita. Teman lama kami,<title>Tag dalam dokumen<head>.</head></title>

Mari kita beralih ke sesuatu yang sedikit lebih menantang (meskipun masih sederhana) dengan protokol grafik terbuka Facebook!

Protokol Grafik Terbuka Facebook

Open Graph Protocol memungkinkan setiap halaman web untuk menjadi objek yang kaya dalam grafik sosial Facebook. Ini memungkinkan halaman web mana pun memiliki fungsi yang mirip dengan objek di Facebook.

Grafik terbuka Facebook (serta sistem kartu Twitter, yang akan kita lihat berikutnya) berfungsi dengan data meta yang Anda tambahkan di dalam halaman web Anda <head>. Tempat yang sama kita hanya menaruh <title> kita. Dalam kasus protokol grafik terbuka Facebook, ada empat properti yang diperlukan.

Diperlukan Open Graph Markup

Keempat properti grafik terbuka yang diperlukan yang dibutuhkan Facebook adalah:

  1. Title
  2. Type
  3. Image
  4. URL

Title

Yang pertama adalah tag judul, yang merupakan judul objek Anda sebagaimana seharusnya muncul di Facebook.

Di sini adalah bagaimana contoh saya akan diberi judul ketika dokumen HTML dibagikan di Facebook.

Catatan: Jika Anda membuat judul yang berbeda dari judul aslinya, Facebook akan memberi Anda kesalahan saat melakukan debug pada halaman Anda. Facebook memungkinkan perbedaan tetapi tidak akan memvalidasi 100%. Saya tidak tahu mengapa Facebook tidak menyukai ini, jika Anda memiliki ide mengapa beri tahu saya!

Type

Properti kedua yang dibutuhkan Facebook adalah jenis objek yang akan ditunjukkan pengguna pada platformnya.

Konten kami tidak mewakili musik atau video. Ini bukan artikel, buku, atau profil. Semua yang tersisa adalah kenyataan bahwa konten kita hidup di dalam dokumen HTML, yang ketika diunggah ke server web, menjadi situs web.

Image

Properti ketiga yang dibutuhkan Facebook adalah gambar yang mewakili objek kita. Satu ini sangat sederhana!

URL

Properti keempat dan terakhir yang dibutuhkan Facebook adalah pengguna URL yang akan mengalami ketika berinteraksi dengan objek.

Sama seperti properti gambar yang satu ini cukup mudah.

Itu untuk semua yang diperlukan. Saatnya untuk menjadi lebih abstrak dengan makna yang kita suntikkan ke konten kami, dan untuk itu kami perlu mengidentifikasi target pemirsa kami.

Target Audiens

Inti dari artikel ini bukanlah untuk mengajari Anda cara mengidentifikasi audiens target Anda. Namun, saya ingin menekankan pada Anda pentingnya mengetahui siapa itu. Ketika Anda membangun konteks ke konten Anda, Anda perlu tahu siapa yang Anda ingin menemukan konten Anda, dan apa yang harus mereka pelajari tentang konten itu.

Untuk konten dalam artikel ini, gambar kucing yang terlihat tidak senang, pemirsa target adalah perancang web yang ingin mempelajari lebih lanjut tentang kemampuan untuk dapat ditemukan (Anda). Mari kita lihat apa yang terlihat seperti selanjutnya di markup opsional yang dipahami Facebook.

Markup Abstrak Opsional

Kami dapat menambahkan beberapa markup tambahan seperti deskripsi, yang meskipun tidak diperlukan, membuatnya jauh lebih menarik bagi siapa saja yang terjadi pada konten kita.

Jadi bagaimana seharusnya deskripsi kita? Itu harus relatif terhadap audiens target.

Hebat! Ingat bagaimana saya memberi tahu Anda bahwa Twitter bekerja dengan cara yang mirip dengan Open Graph Protocol Facebook? Mari kita lihat selanjutnya!

Twitter

Twitter membutuhkan properti berbeda tergantung pada jenis kartu yang Anda gunakan. Untuk contoh ini kita akan menggunakan Kartu Ringkasan default yang memerlukan empat properti ini:

  1. Tipe kartu
  2. Atribusi
  3. Title
  4. Deskripsi

Sebagian besar properti ini sebenarnya tidak mengharuskan kita melakukan pekerjaan tambahan apa pun. Kenapa bisa begitu?

“Ketika prosesor kartu Twitter mencari tag di halaman Anda, pertama kali memeriksa properti Twitter, dan jika tidak ada, kembali ke properti Open Graph yang didukung. Ini memungkinkan keduanya untuk didefinisikan pada halaman secara independen, dan meminimalkan jumlah markup duplikat yang diperlukan untuk mendeskripsikan konten dan pengalaman Anda. -Twitter

Meminimalkan Markup Duplikat

Itu bagus! Tag yang tidak perlu kita duplikasi (meskipun Anda bisa jika punya alasan untuk) adalah:

  1. og:title
  2. og:description
  3. og:image

Tiga turun, dua untuk pergi!

Jenis kartu

Pertama-tama, beri tahu Twitter jenis konten yang kita bagikan. Kita akan menetapkan kartu ini ke Kartu Ringkasan default ketika dokumen HTML dibagikan di Twitter.

Itu sederhana, apa selanjutnya? Saya harap itu sesuatu yang luar biasa!

Atribusi

Twitter membutuhkan akun untuk dikaitkan dengan akun Twitter milik pembuat konten dan/atau pemilik konten. Jika konten dimiliki oleh halaman perusahaan, atau departemen perusahaan, (atau ada di situs perusahaan tetapi tidak dimiliki oleh perusahaan), Anda dapat menggunakan pengaitan gaya situs.

Berikut ini bagaimana tampilan ini jika dihosting di situs pribadi saya:

Di sini adalah bagaimana itu akan terlihat jika Tuts+Desain Web menghosting HTML:

Twitter perlu mengautentikasi dan daftar putih domain untuk setiap jenis Kartu Twitter. Ini sederhana dan otomatis, meskipun saya tidak tahu apa yang terlibat jika Anda masuk daftar hitam. Jika ada yang memiliki pengalaman dengan ini, saya akan senang belajar lebih banyak.

Itu untuk Twitter! Untung kita melakukan Open Graph pertama, Twitter menghemat banyak waktu dengan bekerja dengan platform lain untuk yang terbaik dari kemampuannya. Twitter terima kasih!

Saatnya mengunjungi kembali mesin telusur untuk beberapa cara baru, kontekstual, dan menarik untuk mengoptimalkan konten Anda.

Microdata dan Search Engine Optimization

Google SEO Microdata Rich Text Snippet Example

Pertama, kata cepat dari Microsoft:

“Pada 2 Juni [2011] kita [Microsoft] mengumumkan kolaborasi antara Bing, Google, dan Yahoo untuk membuat dan mendukung seperangkat skema standar untuk markup data terstruktur di halaman web. Meskipun perusahaan kita bersaing dalam banyak hal, jelas bagi kita bahwa kolaborasi dalam ruang ini akan baik untuk setiap mesin pencari secara individual dan untuk industri secara keseluruhan. - Michael O'Connor

Microdata berbeda dari markup lain yang telah kita susun karena tidak ada di kepala dokumen.

Kita akan menggunakan microdata untuk menanamkan konteks ke konten kiat di tubuh dokumen HTML Anda. Mesin pencari akan menggunakan data kita untuk meningkatkan penemuan konten kita untuk penggunanya.

Mesin percaya apa yang kita katakan kepada mereka. Sekarang setidaknya...

Diperlukan Microdata Markup

Tag berikut diperlukan untuk setiap item yang Anda inginkan untuk membangun makna.

  1. Item Scope
  2. Item Type

Pertama kita perlu mengidentifikasi hal yang kita gambarkan. Mari bersenang-senang dengan semantik dan membangun beberapa konteks atau makna ke konten kita yang ditujukan untuk target pemirsa kita.

Ingat kita hanya memiliki satu konten tunggal. Apa satu arti nyata dari makna yang terkandung dalam gambar kita?

 gato

Yah, memang terlihat seperti kucing. Itu hebat karena internet suka kucing! Apa yang terbaik mewakili kucing di markup skema yang tersedia bagi kita?

Makna yang terkandung dalam gambar ini mungkin bukan tindakan, layanan penyiaran, entitas medis acara, atau tempat. Ini jelas merupakan Karya Kreatif, lebih khusus lagi adalah contoh dari Karya Seni Visual, meskipun Google saat ini membuat beberapa perubahan yang mungkin mempengaruhi penggunaan markup ini dalam jangka pendek:


Mari kita menyatakan itemtype di dalam tag bagian:

Itu awal yang bagus, meskipun konten kita sebagian besar masih tidak bermakna. Google, Bing, Yahoo, dan Yandex sekarang 100% yakin bahwa konten kita adalah karya kreatif, tetapi tidak ada yang lain. Mari tambahkan beberapa konteks yang lebih bermakna yang ditujukan untuk target pasar kita: desainer web.

Opsional Microdata properti

Tidak perlu bagi saya untuk mencantumkan semua properti yang dapat Anda gunakan dengan jenis item Pekerjaan Kreatif, di sini adalah beberapa relatif terhadap desainer web, yang kita identifikasi sebagai target target kita.

Mari mulai dengan mendeklarasikan semua hal tentang konten ini yang tidak abstrak tetapi sebaliknya konkret, kokoh, dan tidak berubah dalam maknanya.

Image

Pertama, ini adalah gambar dengan lokasi sumber (src) di web.

Penulis

Aku penulis, atau pencipta, ilustrasi digital.

Penonton

Tampak baik! Mari kita sekarang menambahkan target penonton.

Penggunaan Pendidikan

Sekarang kita akan menetapkan jenis penggunaan pendidikan yang kita maksudkan untuk gambar ini, yang merupakan contoh dalam kasus ini.

Family Friendly

Tidak ada tentang ini NSFW, jadi mari pastikan itu jelas.

Karakter

Apa yang kita beri nama karakter kucing kita ?

Oh ya. Itu nama yang sangat luar biasa, meskipun itu bergerak ke ranah yang lebih abstrak. Semuanya akan menjadi abstrak sekarang.

Tentang

Mari tambahkan lebih banyak konteks tentang situasi di gambar kita yang terkait dengan target pemirsa kita.

Mari selesaikan ini dengan daftar kata kunci yang dibatasi koma, bertarget, dan relatif untuk menabrak faktor kemampuan menemukan konten kami lebih dari 9000.

Validasi

Semua yang tersisa untuk dilakukan adalah memvalidasi kode Anda dengan Google, kemudian Facebook, dan akhirnya dengan Twitter. Berikut adalah apa yang terlihat seperti di:

Facebook

Validating facebook open graph markup

Twitter

Twitter validation

Google

Google Structured Data Testing Tool Validation

Ringkasan

Jadi apa yang terlihat seperti bersama?

Dengan membangun makna ke dalam konten tunggal kita dengan grafik terbuka, kartu Twitter, dan microdata, kita telah meningkatkan peluang bahwa target pemirsa kita akan menemukannya, membagikannya, dan membuat t-shirt dengan itu dicetak di bagian depan dalam terang, tebal warna. Selamat mencoba menerapkan markup yang berarti di situs web Anda sendiri!

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.