Cloudflare Worker yang menyediakan OG Image & Video dinamis berdasarkan waktu lokal pengguna, dengan dukungan redirect langsung dan metadata Open Graph.
dynamic-og-media/
├── src/
│ └── worker.js # Kode utama Worker
├── wrangler.toml # Konfigurasi Cloudflare Worker
├── package.json # Dependensi dan skrip
└── README.md-
Clone repositori
git clone https://github.com/yourusername/dynamic-og-media.git cd dynamic-og-media -
Install dependencies
npm install
-
Konfigurasi Wrangler Buat file
wrangler.tomldengan isi:name = "your-worker-name" main = "src/worker.js" compatibility_date = "2024-03-15" [build.upload] format = "service-worker"
-
Development Mode
npm run dev
Akses di
http://localhost:8787 -
Deploy ke Cloudflare
npm run deploy
-
Sebagai Meta Tags Langsung
```<!-- Di dalam <head> --> <meta property="og:video" content="https://your-worker.domain/video" /> <meta property="og:video:type" content="video/mp4" /> <meta property="og:video:width" content="1280" /> <meta property="og:video:height" content="720" />
-
Sebagai Endpoint API
# Dapatkan metadata lengkap GET https://your-worker.domain/ # Response contoh: { "og:image": "url_gambar", "og:video": "url_video", ... }
-
Redirect Langsung
# Akses video langsung curl -L https://your-worker.domain/video # Akses gambar langsung curl -L https://your-worker.domain/image
Ubah parameter di `src/worker.js`:
```js
// Sesuaikan URL media
const ASSETS = {
day: {
image: "url_gambar_siang",
video: "url_video_siang",
},
night: {
image: "url_gambar_malam",
video: "url_video_malam",
},
};
// Atur jam siang/malam
const DAY_HOURS = [6, 17]; // 06:00 - 17:59
```
-
Tambahkan meta tags di HTML
-
Untuk CMS (WordPress/Next.js), buat komponen khusus:
// Contoh React Component const DynamicMeta = () => ( <> <meta property="og:video" content={workerURL + "/video"} /> <meta property="og:image" content={workerURL + "/image"} /> </> );
-
Cache Control: Worker menggunakan header no-store untuk memastikan konten selalu fresh
-
Validasi OG Tags: Gunakan tool berikut untuk test:
- (Facebook Sharing Debugger)[https://developers.facebook.com/tools/debug/]
- (Twitter Card Validator)[https://cards-dev.twitter.com/validator]
-
Monitoring: Pantau log Worker melalui Cloudflare Dashboard untuk melihat traffic
-
Fallback Content: Pastikan URL media alternatif tetap dapat diakses jika Worker down