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?
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.
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:
1 |
<h1>I Am the Best Heading</h1> |
1 |
##No I Am the Best Heading |
1 |
\section{I'm 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.
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head></head>
|
4 |
<body></body>
|
5 |
</html>
|
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.
1 |
<body>
|
2 |
<section>
|
3 |
<img
|
4 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
5 |
>
|
6 |
</section>
|
7 |
</body>
|
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>
1 |
<head>
|
2 |
<title>
|
3 |
Forlorn Feline |
4 |
</title>
|
5 |
</head>
|
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:
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.
1 |
<meta
|
2 |
property="og:title" |
3 |
content="Forlorn Feline" |
4 |
>
|
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.
1 |
<meta
|
2 |
property="og:type" |
3 |
content="website" |
4 |
>
|
Image
Properti ketiga yang dibutuhkan Facebook adalah gambar yang mewakili objek kita. Satu ini sangat sederhana!
1 |
<meta
|
2 |
property="og:image" |
3 |
content="http://ryanallen.com/img/forlorn-feline.gif" |
4 |
>
|
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.
1 |
<meta
|
2 |
property="og:url" |
3 |
content="http://ryanallen.com/forlorn-feline.html" |
4 |
>
|
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.
1 |
<meta
|
2 |
property="og:description" |
3 |
content="Vincenzo the cat is sad that no one is |
4 |
discovering the online content he worked so hard
|
5 |
to create. Such hurt. Very Sadness."
|
6 |
>
|
Hebat! Ingat bagaimana saya memberi tahu Anda bahwa Twitter bekerja dengan cara yang mirip dengan Open Graph Protocol Facebook? Mari kita lihat selanjutnya!
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:
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:
og:titleog:descriptionog: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.
1 |
<meta
|
2 |
name="twitter:card" |
3 |
content="summary" |
4 |
>
|
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:
1 |
<meta
|
2 |
name="twitter:creator" |
3 |
content="@ryanallen_com" |
4 |
>
|
Di sini adalah bagaimana itu akan terlihat jika Tuts+Desain Web menghosting HTML:
1 |
<meta
|
2 |
name="twitter:creator" |
3 |
content="@ryanallen_com" |
4 |
>
|
5 |
<meta
|
6 |
name="twitter:site" |
7 |
content="@wdtuts" |
8 |
>
|
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
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.
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?
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:
@ryanallen_com @googledevs @google tidak, lebih baik kita memiliki beberapa penundaan (mudah-mudahan satu off) yang mengintegrasikan penambahan Feb i.e. http://t.co/09JUDuUIwW
— Dan Brickley (@danbri) 2 Maret 2015
Mari kita menyatakan itemtype di dalam tag bagian:
1 |
<section
|
2 |
itemscope
|
3 |
itemtype="https://schema.org/CreativeWork" |
4 |
>
|
5 |
<img
|
6 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
7 |
>
|
8 |
</section>
|
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.
1 |
<img
|
2 |
itemprop="image" |
3 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
4 |
>
|
Penulis
Aku penulis, atau pencipta, ilustrasi digital.
1 |
<meta
|
2 |
itemprop="author" |
3 |
content="Ryan Allen" |
4 |
>
|
Penonton
Tampak baik! Mari kita sekarang menambahkan target penonton.
1 |
<meta
|
2 |
itemprop="audience" |
3 |
content="web designers" |
4 |
>
|
Penggunaan Pendidikan
Sekarang kita akan menetapkan jenis penggunaan pendidikan yang kita maksudkan untuk gambar ini, yang merupakan contoh dalam kasus ini.
1 |
<meta
|
2 |
itemprop="educationalUse" |
3 |
content="example" |
4 |
>
|
Family Friendly
Tidak ada tentang ini NSFW, jadi mari pastikan itu jelas.
1 |
<meta
|
2 |
itemprop="isFamilyFriendly" |
3 |
content="true" |
4 |
>
|
Karakter
Apa yang kita beri nama karakter kucing kita ?
1 |
<meta
|
2 |
itemprop="character" |
3 |
content="Vincenzo" |
4 |
>
|
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.
1 |
<meta
|
2 |
itemprop="about" |
3 |
content="Vincenzo the cat is sad that no one is |
4 |
discovering the online content he worked so hard
|
5 |
to create. Such hurt. Very Sadness."
|
6 |
>
|
Mari selesaikan ini dengan daftar kata kunci yang dibatasi koma, bertarget, dan relatif untuk menabrak faktor kemampuan menemukan konten kami lebih dari 9000.
1 |
<meta
|
2 |
itemprop="keywords" |
3 |
content="designer, design, web design, seo, |
4 |
discoverability, open graph, twitter cards,
|
5 |
microdata, google, bing, microsoft, yahoo,
|
6 |
yandex, content, context, semantics, meaning,
|
7 |
sad, cat, animation, gif, cute, illustration, tutsplus"
|
8 |
>
|
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:
Ringkasan
Jadi apa yang terlihat seperti bersama?
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>
|
5 |
Forlorn Feline |
6 |
</title>
|
7 |
<!-- FACEBOOK'S OPEN GRAPH PROTOCOL -->
|
8 |
<meta
|
9 |
property="og:title" |
10 |
content="Forlorn Feline" |
11 |
>
|
12 |
<meta
|
13 |
property="og:type" |
14 |
content="website" |
15 |
>
|
16 |
<meta
|
17 |
property="og:image" |
18 |
content="http://ryanallen.com/img/forlorn-feline.gif" |
19 |
>
|
20 |
<meta
|
21 |
property="og:url" |
22 |
content="http://ryanallen.com/forlorn-feline.html" |
23 |
>
|
24 |
<meta
|
25 |
property="og:description" |
26 |
content="Vincenzo the cat is sad that no one is |
27 |
discovering the online content he worked so hard
|
28 |
to create. Such hurt. Very Sadness."
|
29 |
>
|
30 |
<!-- TWITTER CARDS -->
|
31 |
<meta
|
32 |
name="twitter:card" |
33 |
content="summary" |
34 |
>
|
35 |
<meta
|
36 |
name="twitter:creator" |
37 |
content="@ryanallen_com" |
38 |
>
|
39 |
</head>
|
40 |
<body>
|
41 |
<section
|
42 |
itemscope
|
43 |
itemtype="https://schema.org/CreativeWork"> |
44 |
<img
|
45 |
itemprop="image" |
46 |
src="http://ryanallen.com/img/forlorn-feline.gif" |
47 |
>
|
48 |
<meta
|
49 |
itemprop="author" |
50 |
content="Ryan Allen" |
51 |
>
|
52 |
<meta
|
53 |
itemprop="audience" |
54 |
content="web designers" |
55 |
>
|
56 |
<meta
|
57 |
itemprop="educationalUse" |
58 |
content="example" |
59 |
>
|
60 |
<meta
|
61 |
itemprop="isFamilyFriendly" |
62 |
content="true" |
63 |
>
|
64 |
<meta
|
65 |
itemprop="character" |
66 |
content="Vincenzo" |
67 |
>
|
68 |
<meta
|
69 |
itemprop="about" |
70 |
content="Vincenzo the cat is sad that no one is |
71 |
discovering the online content he worked so hard
|
72 |
to create. Such hurt. Very Sadness."
|
73 |
>
|
74 |
<meta
|
75 |
itemprop="keywords" |
76 |
content="designer, design, web design, seo, |
77 |
discoverability, open graph, twitter cards,
|
78 |
microdata, google, bing, microsoft, yahoo,
|
79 |
yandex, content, context, semantics, meaning,
|
80 |
sad, cat, animation, gif, cute, illustration, tutsplus"
|
81 |
>
|
82 |
</section>
|
83 |
</body>
|
84 |
</html>
|
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!
