Indonesian (Bahasa Indonesia) translation by Puuma (you can also view the original English article)
Satu halaman aplikasi (Spa) yang didukung oleh render sisi klien template, yang memberikan pengguna akhir pengalaman yang sangat dinamis. Baru-baru ini, Google mengumumkan bahwa mereka merangkak web page dan menjalankan JavaScript sebagai user biasa bisa, menghasilkan situs yang didukung oleh kerangka SPA (sudut, Ember dan Vue, untuk beberapa nama) yang dijelajahi tanpa penalti Google.
Melampaui pencarian, crawler web lain penting untuk visibilitas situs Anda — yakni kaya robot berbagi sosial yang bergantung pada meta tag masih buta untuk JavaScript.
Dalam tutorial ini, kita akan membangun rute alternatif dan render modul untuk server Express dan Node.js yang dapat Anda gunakan dengan kebanyakan SPA kerangka yang akan memungkinkan situs Anda untuk memiliki kaya berbagi di Twitter, Facebook dan Pinterest.
Kata Peringatan
Tutorial ini berurusan secara eksklusif dengan robot web yang ekstrak sosial berbagi informasi. Jangan mencoba teknik ini dengan web crawler mesin pencari. Search engine perusahaan dapat mengambil perilaku semacam ini serius dan memperlakukan itu sebagai spam atau penipuan perilaku, dan dengan demikian peringkat Anda dapat dengan tangki cepat.
Demikian pula, dengan kaya berbagi sosial informasi, pastikan Anda mewakili konten dalam cara yang sejalan dengan apa yang pengguna lihat dengan apa robot baca. Gagal untuk menjaga kesejajaran ini dapat mengakibatkan pembatasan dari situs media sosial.
Rich Social Sharing
Jika Anda posting update di Facebook dan memasukkan sebuah URL, Facebook robot akan membaca HTML dan mencari OpenGraph meta tag. Berikut adalah contoh dari Envato Tuts + homepage:
Memeriksa halaman, di tag head, berikut adalah relevan tag yang menghasilkan Tinjauan ini:
1 |
<meta content="Envato Tuts+" property="og:title"> |
2 |
<meta content="Envato Tuts+ teaches creative and technical skills across many topics to millions of people worldwide. We offer tutorials, articles, news and insights that help you take your knowledge to the next level." property="og:description"> |
3 |
<meta content="http://static.tutsplus.com/assets/favicon-8b86ba48e7f31535461f183680fe2ac9.png" property="og:image"> |
Pinterest menggunakan protokol yang sama sebagai Facebook, OpenGraph, sehingga mereka berbagi bekerja sama.
Pada kegugupan, konsep ini disebut "kartu", dan kericau memiliki beberapa varietas yang berbeda tergantung pada bagaimana Anda ingin menampilkan konten Anda. Berikut adalah contoh kartu Twitter dari GitHub:
Dan di sini adalah HTML yang menghasilkan kartu ini:
1 |
<meta content="@github" name="twitter:site"> |
2 |
<meta content="summary" name="twitter:card"> |
3 |
<meta content="NodeRedis/node_redis" name="twitter:title"> |
4 |
<meta content="redis client for node. Contribute to node_redis development by creating an account on GitHub." name="twitter:description"> |
5 |
<meta content="https://avatars1.githubusercontent.com/u/5845577?v=3&s=400" name="twitter:image:src"> |
Catatan: GitHub menggunakan teknik yang sama untuk apa yang digambarkan dalam tutorial ini. Halaman HTML sedikit berbeda dalam tag dengan atribut name set ke twitter:deskripsi. Aku harus mengubah agen pengguna seperti dijelaskan nanti dalam artikel untuk mendapatkan benar meta tag.
The Rub With Client-Side Rendering
Menambahkan meta tag bukanlah sebuah masalah jika Anda ingin hanya satu judul, deskripsi, atau gambar untuk seluruh situs. Hanya hard-code nilai-nilai ke dalam head dokumen HTML Anda. Mungkin,walaupun, Anda membangun sebuah situs yang jauh lebih kompleks dan Anda ingin kaya Anda berbagi sosial bervariasi berdasarkan URL (yang mungkin pembungkus di sekeliling API sejarah HTML5 yang kerangka memanipulasi).
Usaha pertama mungkin untuk membangun template Anda dan menambahkan nilai ke meta tag seperti yang Anda lakukan dengan konten apapun lainnya. Karena, saat ini, bot yang mengekstrak informasi ini tidak mengeksekusi JavaScript, Anda akan berakhir dengan template tag Anda, ketika Anda yang mencoba untuk berbagi.
Untuk membuat situs tersebut dapat dibaca oleh bot, kami membangun middleware yang mendeteksi agen pengguna bot berbagi sosial, dan kemudian router alternatif yang akan menyajikan konten yang benar ke bot, menghindari penggunaan kerangka SPA Anda.
Middleware Agen Pengguna
Klien (robot, crawler web, browser) mengirimkan string User Agent (UA) dalam header HTTP setiap permintaan. Ini seharusnya mengidentifikasi perangkat lunak klien; sementara browser web memiliki variasi besar string UA, bot cenderung lebih atau kurang stabil. Facebook, berkicau dan Pinterest menerbitkan dawai agen pengguna bot sebagai rasa hormat.
Di Express, UA string terkandung dalam permintaan objek sebagai agen-pengguna. Saya menggunakan ekspresi reguler untuk mengidentifikasi bots berbeda saya tertarik dalam melayani konten pengganti. Kami akan memuat ini di middleware. Middlewares adalah seperti rute, tetapi mereka tidak perlu jalan atau metode dan mereka (umumnya) lulus permintaan pada middleware lain atau untuk rute. Di Express, rute dan middlewares yang berurutan, jadi tempat ini di atas rute lain di Express app.
1 |
app.use(function(req,res,next) { |
2 |
var
|
3 |
ua = req.headers['user-agent']; |
4 |
|
5 |
if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) { |
6 |
console.log(ua,' is a bot'); |
7 |
}
|
8 |
|
9 |
next(); |
10 |
});
|
Ekspresi reguler di atas terlihat untuk "facebookexternalhit", "Twitterbot" atau "Pinterest" pada awal UA string. Jika ada, itu akan log UA ke konsol.
Berikut adalah seluruh server:
1 |
var
|
2 |
express = require('express'), |
3 |
app = express(), |
4 |
server; |
5 |
|
6 |
app.use(function(req,res,next) { |
7 |
var
|
8 |
ua = req.headers['user-agent']; |
9 |
|
10 |
if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) { |
11 |
console.log(ua,' is a bot'); |
12 |
}
|
13 |
|
14 |
next(); |
15 |
});
|
16 |
|
17 |
app.get('/',function(req,res) { |
18 |
res.send('Serve SPA'); |
19 |
});
|
20 |
|
21 |
server = app.listen( |
22 |
8000, |
23 |
function() { |
24 |
console.log('Server started.'); |
25 |
}
|
26 |
);
|
Pengujian Middleware Anda
Di Chrome, navigasikan ke server baru (yang harus http://localhost:8000 /). Buka DevTools dan nyalakan 'Mode perangkat' dengan mengklik ikon smartphone di atas kiri bagian dari panel pengembang.
Di toolbar perangkat, menempatkan "Twitterbot/1.0" ke dalam kotak edit UA.
Sekarang, reload halaman.
Pada titik ini, Anda akan melihat "Melayani SPA" di halaman, tetapi melihat output konsol app Express Anda, Anda akan melihat:
Twitterbot 1.0 adalah sebuah bot
Alternatif Routing
Sekarang kita dapat mengidentifikasi bot, mari kita membangun router alternatif. Express dapat menggunakan beberapa router, sering digunakan untuk partisi rute keluar oleh jalan. Dalam kasus ini, kita akan menggunakan router dalam cara yang sedikit berbeda. Router adalah pada dasarnya middlewares, sehingga mereka kecuali req, res, dan selanjutnya, seperti setiap middleware lainnya. Idenya di sini adalah untuk menghasilkan set yang berbeda dari rute yang memiliki jalur yang sama.
1 |
nonSPArouter = express.Router(); |
2 |
nonSPArouter.get('/', function(req,res) { |
3 |
res.send('Serve regular HTML with metatags'); |
4 |
});
|
Middleware kami perlu berubah juga. Bukan hanya penebangan klien yang bot, kami akan sekarang mengirim permintaan ke router baru dan, penting, hanya lulus dengan next() jika gagal tes UA. Jadi, dalam singkat, bot mendapatkan satu router dan orang lain mendapatkan router standar yang berfungsi kode SPA.
1 |
var
|
2 |
express = require('express'), |
3 |
app = express(), |
4 |
|
5 |
nonSPArouter
|
6 |
= express.Router(), |
7 |
server; |
8 |
|
9 |
nonSPArouter.get('/', function(req,res) { |
10 |
res.send('Serve regular HTML with metatags'); |
11 |
});
|
12 |
|
13 |
app.use(function(req,res,next) { |
14 |
var
|
15 |
ua = req.headers['user-agent']; |
16 |
|
17 |
if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) { |
18 |
console.log(ua,' is a bot'); |
19 |
nonSPArouter(req,res,next); |
20 |
} else { |
21 |
next(); |
22 |
}
|
23 |
});
|
24 |
|
25 |
app.get('/',function(req,res) { |
26 |
res.send('Serve SPA'); |
27 |
});
|
28 |
|
29 |
server = app.listen( |
30 |
8000, |
31 |
function() { |
32 |
console.log('Server started.'); |
33 |
}
|
34 |
);
|
Jika kita menguji menggunakan rutin yang sama seperti di atas, pengaturan UA Twitterbot/1.0 browser akan menunjukkan pada isi ulang:
Melayani HTML biasa dengan metatags
Sementara dengan UA Chrome standar Anda akan mendapatkan:
Melayani SPA
Meta Tag
Seperti yang kita telah diteliti di atas, berbagi sosial yang kaya bergantung pada meta tag di dalam kepala dokumen HTML Anda. Karena Anda sedang membangun sebuah SPA, Anda mungkin bahkan tidak punya mesin template yang diinstal. Untuk tutorial ini, kita akan menggunakan jade. Jade dalah cukup bahasa sederhana yang menggoda mana ruang dan tab yang relevan dan tag penutup tidak diperlukan. Kita dapat menginstalnya dengan menjalankan:
NPM menginstal jade
Dalam kode sumber server kami, tambahkan baris ini sebelum Anda app.listen.
App.set ('Lihat mesin', 'jade');
Sekarang, kita akan memasukkan informasi yang kita ingin melayani untuk bot hanya. Kami akan mengubah nonSPArouter. Karena kita telah membuat mesin lihat di app set, res.render akan melakukan render jade.
Mari kita mengatur template jade kecil untuk melayani bots berbagi sosial:
1 |
doctype html |
2 |
html |
3 |
head |
4 |
title= title |
5 |
meta(property="og:url" name="twitter:url" content= url) |
6 |
meta(property="og:title" name="twitter:title" content= title) |
7 |
meta(property="og:description" name="twitter:description" content= descriptionText) |
8 |
meta(property="og:image" content= imageUrl) |
9 |
meta(property="og:type" content="article") |
10 |
meta(name="twitter:card" content="summary") |
11 |
body |
12 |
h1= title |
13 |
img(src= img alt= title) |
14 |
p= descriptionText |
Sebagian besar template ini adalah meta tag, tetapi Anda juga dapat melihat bahwa saya memasukkan formasi dalam tubuh dokumen. Sebagai penulisan tutorial ini, tak satu pun dari bot berbagi sosial tampaknya benar-benar melihat apapun melampaui meta tag, tapi itu adalah praktik yang baik untuk menyertakan informasi dalam cara yang agak manusia dapat dibaca, harus jenis manusia memeriksa dilaksanakan di d kemudian makan.
Simpan template untuk app Anda lihat direktori dan nama itu bot.jade. Nama file tanpa ekstensi ('bot') akan menjadi argumen pertama fungsi res.render.
Sementara itu selalu ide yang baik untuk mengembangkan secara lokal, Anda akan perlu untuk mengekspos app Anda akhir lokasi untuk sepenuhnya men-debug Anda meta tag. Versi deployable server kecil kami terlihat seperti ini:
1 |
var
|
2 |
express = require('express'), |
3 |
app = express(), |
4 |
|
5 |
nonSPArouter
|
6 |
= express.Router(), |
7 |
server; |
8 |
|
9 |
nonSPArouter.get('/', function(req,res) { |
10 |
var
|
11 |
img = 'placeholder.png'; |
12 |
|
13 |
res.render('bot', { |
14 |
img : img, |
15 |
url : 'https://bot-social-share.herokuapp.com/', |
16 |
title : 'Bot Test', |
17 |
descriptionText
|
18 |
: 'This is designed to appeal to bots', |
19 |
imageUrl : 'https://bot-social-share.herokuapp.com/'+img |
20 |
});
|
21 |
});
|
22 |
|
23 |
app.use(function(req,res,next) { |
24 |
var
|
25 |
ua = req.headers['user-agent']; |
26 |
|
27 |
if (/^(facebookexternalhit)|(Twitterbot)|(Pinterest)/gi.test(ua)) { |
28 |
console.log(ua,' is a bot'); |
29 |
nonSPArouter(req,res,next); |
30 |
} else { |
31 |
next(); |
32 |
}
|
33 |
});
|
34 |
|
35 |
app.get('/',function(req,res) { |
36 |
res.send('Serve SPA'); |
37 |
});
|
38 |
app.use('/',express.static(__dirname + '/static')); |
39 |
app.set('view engine', 'jade'); |
40 |
server = app.listen( |
41 |
process.env.PORT || 8000, |
42 |
function() { |
43 |
console.log('Server started.'); |
44 |
}
|
45 |
);
|
Juga mencatat bahwa saya menggunakan express.static middleware untuk melayani gambar dari /static direktori.
Debug Aplikasi Anda
Setelah Anda telah digunakan aplikasi Anda ke suatu tempat yang dapat diakses publik, Anda harus memverifikasi bahwa Anda meta tag bekerja seperti yang diinginkan.
Pertama, Anda dapat menguji dengan Facebook Debugger. Masukan URL Anda dan klik informasi mengikis Fetch baru.
Anda harus melihat sesuatu seperti:
Selanjutnya, Anda dapat melanjutkan untuk menguji kartu Twitter Anda dengan Validator Kartu Twitter. Untuk yang satu ini, Anda perlu untuk login dengan Twitter account.
Pinterest menyediakan debugger , tetapi contoh ini tidak akan berfungsi di luar kotak karena Pinterest hanya mengizinkan "pin kaya" di URL selain situs Anda.
Langkah Selanjutnya
Dalam implementasi aktual Anda, Anda harus menangani integrasi sumber data dan perutean Anda. Sebaiknya lihat rute yang ada dalam kode SPA Anda dan buat versi alternatif untuk semua yang Anda pikir dapat dibagikan. Setelah Anda menetapkan rute yang kemungkinan akan dibagikan, siapkan meta tag di template utama Anda yang berfungsi sebagai fallback Anda dalam situasi ketika seseorang membagikan halaman yang tidak Anda harapkan.
Meskipun Pinterest, Facebook, dan Twitter menyumbangkan sebagian besar pasar media sosial, Anda mungkin memiliki layanan lain yang ingin Anda integrasikan. Beberapa layanan mempublikasikan nama robot berbagi sosial mereka, sementara yang lain tidak. Untuk menentukan agen pengguna, Anda dapat console.log dan memeriksa keluaran konsol — coba ini terlebih dahulu di server non-produksi karena Anda mungkin mengalami kesulitan saat mencoba menentukan agen pengguna di situs yang sibuk. Dari titik itu, Anda dapat menyesuaikan nama reguler di middleware kami untuk juga menangkap agen pengguna baru.
Berbagi media sosial yang kaya dapat menjadi cara yang bagus untuk menarik orang-orang ke dalam situs web Anda yang berbasiskan satu halaman aplikasi. Dengan mengarahkan robot secara selektif ke konten yang dapat dibaca mesin, Anda dapat memberikan informasi yang tepat kepada robot.
