Kamis, 31 Januari 2019
Banyak framework frontend yang mengandalkan JavaScript untuk menampilkan konten. Artinya, Google mungkin perlu waktu untuk mengindeks konten Anda atau memperbarui konten yang telah diindeks.
Solusi yang kami bahas di Google I/O tahun ini adalah rendering dinamis. Ada banyak cara untuk mengimplementasikan solusi ini. Postingan blog ini menunjukkan contoh implementasi rendering dinamis menggunakan Rendertron, sebuah solusi open source berbasis Chromium headless.
Situs mana yang perlu mempertimbangkan rendering dinamis?
Tidak semua mesin telusur atau bot media sosial yang mengunjungi situs Anda dapat menjalankan JavaScript. Misalnya, Googlebot mungkin memerlukan waktu untuk menjalankan JavaScript dan memiliki beberapa batasan.
Rendering dinamis berguna untuk konten yang sering berubah dan memerlukan JavaScript agar dapat ditampilkan. Pengalaman pengguna situs Anda (khususnya waktu untuk first meaningful paint) dapat memanfaatkan rendering hybrid (misalnya, Universal Angular).
Bagaimana cara kerja rendering dinamis?
Rendering dinamis adalah pengalihan antara konten yang dirender di sisi klien dan konten yang telah dipra-render untuk agen pengguna tertentu.
Anda akan memerlukan perender untuk menjalankan JavaScript dan menghasilkan HTML statis. Rendertron adalah project open source yang menggunakan Chromium headless untuk melakukan rendering. Aplikasi Halaman Tunggal sering memuat data di latar belakang atau menunda pekerjaan untuk merender kontennya. Rendertron memiliki mekanisme untuk menentukan kapan sebuah situs menyelesaikan rendering. Rendertron akan menunggu sampai semua permintaan jaringan selesai dan tidak ada pekerjaan yang belum terselesaikan.
Postingan blog ini mencakup:
- Melihat contoh aplikasi web
- Menyiapkan server
express.jskecil untuk menayangkan aplikasi web - Menginstal dan mengonfigurasi Rendertron sebagai middleware untuk rendering dinamis
Contoh aplikasi web
Aplikasi web "kitten corner" menggunakan JavaScript untuk memuat berbagai gambar kucing dari API dan menampilkan gambar-gambar tersebut dalam petak.
Berikut ini JavaScript-nya:
const apiUrl = 'https://api.thecatapi.com/v1/images/search?limit=50';
const tpl = document.querySelector('template').content;
const container = document.querySelector('ul');
function init () {
fetch(apiUrl)
.then(response => response.json())
.then(cats => {
container.innerHTML = '';
cats
.map(cat => { const li = document.importNode(tpl, true); li.querySelector('img').src = cat.url; return li;
}).forEach(li => container.appendChild(li));
})
}
init();
document.querySelector('button').addEventListener('click', init);
Aplikasi web ini menggunakan JavaScript modern (ES6), yang belum didukung di Googlebot. Kita dapat menggunakan pengujian situs mobile-friendly untuk memeriksa apakah Googlebot dapat melihat kontennya:
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, gunakan
express, yang merupakan library node.js,
untuk membuat server web.
Kode server akan terlihat seperti 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;
// Serve static assets (images, css, etc.)
app.get('*.*', express.static(DIST_FOLDER));
// Point all other URLs to index.html for our single page app
app.get('*', (req, res) => {
res.sendFile(DIST_FOLDER + '/index.html');
});
// Start Express Server
app.listen(PORT, () => {
console.log(`Node Express server listening on https://localhost:${PORT} from ${DIST_FOLDER}`);
});
Anda dapat
mencoba contoh live-nya - Anda
akan melihat banyak gambar kucing jika menggunakan browser modern. Untuk menjalankan project dari
komputer, Anda memerlukan
node.js untuk menjalankan perintah
berikut:
npm install --save express rendertron-middleware node server.js
Kemudian, arahkan browser Anda ke
https://localhost:8080.
Sekarang saatnya menyiapkan rendering dinamis.
Men-deploy 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.
Perlu diperhatikan bahwa Anda dapat memulai dengan tingkat penggunaan yang tersedia tanpa pembayaran; penggunaan penyiapan ini dalam 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 yang dijelaskan dalam dokumentasi dan 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.jsondi direktori rendertron dengan konten berikut:{ "datastoreCache": true } -
Jalankan perintah berikut dari direktori rendertron. Ganti
YOUR_PROJECT_IDdengan ID project Anda 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. Anda akan melihat antarmuka Rendertron dengan satu kolom input dan beberapa tombol.
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 di bagian selanjutnya dalam proses ini.
Menambahkan Rendertron ke server
Server web menggunakan express.js dan Rendertron memiliki
middleware express.js. Jalankan perintah berikut di direktori file server.js:
npm install --save 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 user-agent untuk menentukan apakah permintaan berasal dari bot
atau browser pengguna. Header ini memiliki
daftar agen pengguna bot yang dikelola dengan baik
untuk melakukan perbandingan. 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 kemudian membandingkan header user-agent dengan ekspresi reguler ini.
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 versi HTML statis ke crawler.