Fitur baru di AstroPaper v1.4.0, memperkenalkan dynamic OG image generation untuk postingan blog.
Rangkuman Isi
Pendahuluan
OG image (gambar sosial) memainkan peranan penting dalam engagement media sosial. Jika kamu tidak tahu apa itu OG image, ia adalah gambar yang ditampilkan setiap kali kamu ingin share URL situs web ini di media sosial seperti Facebook, discord dll.
Gambar sosial yang digunakan untuk Twitter secara teknis tidak disebut OG image.Namun, dalam posting ini, saya akan menggunakan istilah OG image untuk semua jenisnya.
OG Image Default/statis (the old way)
AstroPaper sudah menyediakan cara untuk menambahkan OG image ke postingan blog. Penulis dapat menentukan OG image di frontMatter ogimage.Bahkan ketika penulis tidak mendefinisikan OG image di frontmatter, OG image default akan digunakan sebagai fallback (dalam hal ini public/astropaper-og.jpg). Tetapi masalahnya adalah bahwa OG image default bertipe statis, yang berarti setiap postingan blog yang tidak punya OG image di frontMatter akan selalu menggunakan OG image default yang sama meskipun setiap posting judul/konten berbeda.
OG Image Dinamis
Menghasilkan OG image yang dinamis untuk setiap posting memungkinkan penulis untuk menghindari penentuan OG image untuk tiap postingan blog. Selain itu, ini akan mencegah fallback OG image identik dengan semua posting blog.
Dalam Astropaper v1.4.0, paket Satori digunakan untuk pembuatan OG image dinamis.
OG image dinamis akan dihasilkan pada build time untuk postingan blog yang:
- Tidak menyertakan OG image di frontmatter
- Tidak ditkamui sebagai draft.
Anatomi OG Image Dinamis Astropaper
OG image dinamis dari Astropaper termasuk the blog post title, author name dan site title. Nama penulis (author) dan judul situs akan diambil melalui SITE.author dan SITE.title dari ** “src/config.ts” ** file. Judul ini dihasilkan dari title frontmatter postingan blog.
! Contoh tautan OG image Dinamis
Menampilkan Karakter non-Latin
Judul dengan karakter non-latin tidak akan ditampilkan secara proper. Untuk mengatasi ini, kita harus mengganti fontsconfig di dalam loadgooglefont.ts dengan font pilihanmu.
// file: loadGoogleFont.ts
async function loadGoogleFonts(
text: string
): Promise<
Array<{ name: string; data: ArrayBuffer; weight: number; style: string }>
> {
const fontsConfig = [
{
name: "Noto Sans JP",
font: "Noto+Sans+JP",
weight: 400,
style: "normal",
},
{
name: "Noto Sans JP",
font: "Noto+Sans+JP:wght@700",
weight: 700,
style: "normal",
},
{ name: "Noto Sans", font: "Noto+Sans", weight: 400, style: "normal" },
{
name: "Noto Sans",
font: "Noto+Sans:wght@700",
weight: 700,
style: "normal",
},
];
// other codes
}Coba cek pull-request ini untuk penjelasan lebih lanjut.
Trade-off
Meskipun ini adalah fitur yang bagus untuk dimiliki, ia punya kelemahan. Setiap OG image membutuhkan waktu kira -kira satu detik untuk dihasilkan. Ini mungkin tidak terlihat pada awalnya, tetapi ketika jumlah postingan blog bertambah, kamu mungkin ingin menonaktifkan fitur ini. Karena setiap gambar OG membutuhkan waktu build untuk dihasilkan, jika terlalu banyak akan menambah build time secara signifikan.
Misalnya: Jika satu OG image membutuhkan waktu satu detik untuk dihasilkan, maka 60 gambar akan memakan waktu sekitar satu menit, dan 600 gambar akan memakan waktu sekitar 10 menit. Bisa dibayangkan kan trade-off nya?
Topik yang mirip: #428