Meskipun masalah ini mudah diatasi, sebaiknya pelajari cara menyiapkan rendering dinamis. Dengan rendering dinamis, Googlebot dapat melihat semua gambar kucing tanpa perubahan pada kode aplikasi web.
Menyiapkan server
Untuk menayangkan aplikasi web ini, kita akan menggunakan
express, sebuah library node.js, untuk membuat server web.
Kode server tersebut terlihat seperti di bawah ini (temukan
kode sumber project lengkap di sini):
const
express
= require('express');
const
app
= express();
const
DIST_FOLDER
= process.cwd()
+ '/docs';
const
PORT
= process.env.PORT
|| 8080;
//
Menayangkan aset statis (gambar, CSS, dll.)
app.get('*.*',
express.static(DIST_FOLDER));
//
Mengarahkan semua URL lain ke index.html untuk aplikasi satu halaman
kita
app.get('*',
(req,
res)
=>
{
res.sendFile(DIST_FOLDER
+ '/index.html');
});
//
Memulai Server Express
app.listen(PORT,
() =>
{
console.log(`Server
Node Express yang mendeteksi http://localhost:${PORT}
dari ${DIST_FOLDER}`);
});
Anda dapat
mencoba contoh live-nya di sini - Jika menggunakan browser modern, Anda akan melihat sejumlah gambar kucing. Untuk menjalankan project ini dari komputer, Anda memerlukan
node.js untuk menjalankan perintah berikut:
npm
install express rendertron-middleware
node
server.js
Selanjutnya, arahkan browser Anda ke
http://localhost:8080. Sekarang saatnya menyiapkan rendering dinamis.
Menerapkan instance Rendertron
Rendertron menjalankan server yang menerima URL dan menampilkan HTML statis untuk URL tersebut menggunakan Chromium headless. Kita akan mengikuti
rekomendasi dari project Rendertron dan menggunakan
Google Cloud Platform.
Formulir untuk membuat project Google Cloud Platform baru. Harap perhatikan bahwa Anda dapat memulai dengan
tingkat penggunaan gratis; menggunakan penyiapan ini pada tahap produksi dapat menimbulkan biaya sesuai dengan
harga Google Cloud Platform.
- Buat project baru di Google Cloud Console. Catat “ID Project” di bawah kolom input.
- Instal Google Cloud SDK seperti dijelaskan dalam dokumentasi dan lakukan login.
- Clone repositori Rendertron dari GitHub dengan:
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
- Jalankan perintah berikut untuk menginstal dependensi dan membuat Rendertron di komputer Anda:
npm install && npm run build
- Aktifkan cache Rendertron dengan membuat file baru bernama config.json di direktori rendertron dengan isi berikut:
{ "datastoreCache": true }
- Jalankan perintah berikut dari direktori rendertron. Ganti YOUR_PROJECT_ID dengan ID project dari langkah 1.
gcloud app deploy app.yaml --project YOUR_PROJECT_ID
- Tentukan wilayah pilihan Anda dan konfirmasi penerapan. Tunggu sampai selesai.
- Masukkan URL YOUR_PROJECT_ID.appspot.com (ganti YOUR_PROJECT_ID dengan ID project sebenarnya dari langkah 1) ke browser Anda. Anda akan melihat antarmuka Rendertron dengan sebuah kolom input dan beberapa tombol.
 |
| UI Rendertron setelah diterapkan ke Google Cloud Platform |
|
Jika melihat antarmuka web Rendertron, berarti Anda berhasil menerapkan instance Rendertron Anda sendiri. Catat URL project Anda (YOUR_PROJECT_ID.appspot.com) karena Anda akan memerlukannya pada bagian selanjutnya dari proses ini.
Menambahkan Rendertron ke server
Server web menggunakan express.js dan Rendertron memiliki middleware express.js. Jalankan perintah berikut pada direktori file server.js:
npm
install rendertron-middleware
Perintah ini akan menginstal rendertron-middleware dari npm sehingga kita bisa menambahkannya ke server:
const
express
= require('express');
const
app
= express();
const
rendertron
= require('rendertron-middleware');
Mengonfigurasi daftar bot
Rendertron menggunakan header HTTP agen pengguna untuk menentukan apakah permintaan berasal dari bot atau browser pengguna. Permintaan ini memuat
daftar terkelola yang berisi sejumlah agen pengguna untuk dibandingkan. Secara default, daftar ini tidak menyertakan Googlebot, karena Googlebot dapat menjalankan JavaScript. Agar Rendertron juga merender permintaan Googlebot, tambahkan Googlebot ke daftar agen pengguna:
const
BOTS
= rendertron.botUserAgents.concat('googlebot');
const
BOT_UA_PATTERN
= new
RegExp(BOTS.join('|'),
'i');
Rendertron membandingkan header agen pengguna dengan ekspresi reguler ini nanti.
Menambahkan middleware
Untuk mengirim permintaan bot ke instance Rendertron, kita perlu menambahkan middleware ke server express.js. Middleware memeriksa agen pengguna yang mengirim permintaan dan meneruskan permintaan dari bot yang dikenal ke instance Rendertron. Tambahkan kode berikut ke server.js dan jangan lupa untuk mengganti “YOUR_PROJECT_ID” dengan ID project Google Cloud Platform Anda:
app.use(rendertron.makeMiddleware({
proxyUrl:
'https://YOUR_PROJECT_ID.appspot.com/render',
userAgentPattern:
BOT_UA_PATTERN
}));
Bot yang meminta situs contoh ini akan menerima HTML statis dari Rendertron, sehingga bot tidak perlu menjalankan JavaScript untuk menampilkan konten.
Menguji penyiapan
Untuk menguji apakah penyiapan Rendertron berhasil atau tidak, jalankan kembali pengujian situs mobile-friendly.
Tidak seperti pada pengujian pertama, gambar kucing sekarang terlihat. Pada tab HTML, kita dapat melihat semua HTML yang dihasilkan kode JavaScript, dan bahwa dengan Rendertron, JavaScript tidak diperlukan lagi untuk menampilkan konten.
Kesimpulan
Anda telah membuat penyiapan rendering dinamis tanpa melakukan perubahan apa pun pada aplikasi web. Dengan perubahan ini, Anda dapat menayangkan aplikasi web dalam versi HTML statisnya ke crawler.
Diposting oleh Martin Splitt, Open Web Unicorn
