feat: update Open Graph and Twitter Card metadata in index.html, introduce new image assets for social previews, and enhance image compression script for better compatibility. Maintain legacy image path for backward compatibility.

apps/web/index.html

@@ -8,9 +8,11 @@
     <meta property="og:title" content="Labas — AI-Powered Exam Practice Platform" />
     <meta property="og:description" content="Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." />
     <meta property="og:url" content="https://labas.rogasper.com/" />
+    <meta property="og:site_name" content="Labas" />
+    <meta property="og:locale" content="id_ID" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="https://labas.rogasper.com/og_image.png" />
-    <meta property="og:image:secure_url" content="https://labas.rogasper.com/og_image.png" />
+    <meta property="og:image" content="https://labas.rogasper.com/opengraph-image.png" />
+    <meta property="og:image:secure_url" content="https://labas.rogasper.com/opengraph-image.png" />
     <meta property="og:image:type" content="image/png" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
@@ -18,8 +20,11 @@
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Labas — AI-Powered Exam Practice Platform" />
     <meta name="twitter:description" content="Generate AI-powered practice questions for JLPT, TOPIK, TOAFL, and more. Practice smarter with adaptive test preparation." />
-    <meta name="twitter:image" content="https://labas.rogasper.com/og_image.png" />
+    <meta name="twitter:image" content="https://labas.rogasper.com/twitter-image.jpg" />
     <meta name="twitter:image:alt" content="Labas — platform latihan ujian bahasa dengan AI Generator dan simulasi tes" />
+    <meta name="twitter:image:type" content="image/jpeg" />
+    <meta name="twitter:image:width" content="1200" />
+    <meta name="twitter:image:height" content="630" />
     <meta name="robots" content="index, follow" />
     <link rel="canonical" href="https://labas.rogasper.com/" />
     <title>Labas — AI-Powered Exam Practice Platform</title>

apps/web/src/lib/site-seo.ts

@@ -1,7 +1,14 @@
 export const SITE_URL = "https://labas.rogasper.com";
+export const SITE_NAME = "Labas";
+
+/** Match rogasper.com: separate OG (PNG) + Twitter (JPEG) assets for crawler compatibility. */
+export const OG_IMAGE_PATH = "/opengraph-image.png";
+export const TWITTER_IMAGE_PATH = "/twitter-image.jpg";
+/** @deprecated Use OG_IMAGE_PATH — kept for old links */
+export const LEGACY_OG_IMAGE_PATH = "/og_image.png";
 
-export const OG_IMAGE_PATH = "/og_image.png";
 export const OG_IMAGE_URL = `${SITE_URL}${OG_IMAGE_PATH}`;
+export const TWITTER_IMAGE_URL = `${SITE_URL}${TWITTER_IMAGE_PATH}`;
 export const OG_IMAGE_WIDTH = 1200;
 export const OG_IMAGE_HEIGHT = 630;
 export const OG_IMAGE_ALT =
@@ -28,6 +35,8 @@ export function buildSocialMeta(input: SiteHeadInput = {}) {
     { property: "og:title", content: title },
     { property: "og:description", content: description },
     { property: "og:url", content: url },
+    { property: "og:site_name", content: SITE_NAME },
+    { property: "og:locale", content: "id_ID" },
     { property: "og:type", content: "website" },
     { property: "og:image", content: OG_IMAGE_URL },
     { property: "og:image:secure_url", content: OG_IMAGE_URL },
@@ -38,7 +47,10 @@ export function buildSocialMeta(input: SiteHeadInput = {}) {
     { name: "twitter:card", content: "summary_large_image" },
     { name: "twitter:title", content: title },
     { name: "twitter:description", content: description },
-    { name: "twitter:image", content: OG_IMAGE_URL },
+    { name: "twitter:image", content: TWITTER_IMAGE_URL },
     { name: "twitter:image:alt", content: OG_IMAGE_ALT },
+    { name: "twitter:image:type", content: "image/jpeg" },
+    { name: "twitter:image:width", content: String(OG_IMAGE_WIDTH) },
+    { name: "twitter:image:height", content: String(OG_IMAGE_HEIGHT) },
   ];
 }

scripts/compress-og-image.ts

@@ -1,19 +1,24 @@
 /**
- * Compress apps/web/public/og_image.png for social previews.
+ * Build social preview images for Labas (Open Graph + Twitter).
  * Requires Bun >= 1.3.14 (Bun.Image API).
  *
+ * Outputs truecolor PNG + JPEG — palette PNG breaks some Twitter/Threads crawlers.
+ *
  * Usage: bun scripts/compress-og-image.ts
  */
 
 import { join } from "node:path";
 
 const ROOT = join(import.meta.dir, "..");
-const TARGET = join(ROOT, "apps/web/public/og_image.png");
+const PUBLIC = join(ROOT, "apps/web/public");
+const SOURCE = join(PUBLIC, "og_image.png");
+const OPENGRAPH = join(PUBLIC, "opengraph-image.png");
+const TWITTER = join(PUBLIC, "twitter-image.jpg");
 const WIDTH = 1200;
 const HEIGHT = 630;
 
-function requireBunImage() {
-  const file = Bun.file(TARGET);
+function requireBunImage(path: string) {
+  const file = Bun.file(path);
   if (typeof file.image !== "function") {
     console.error(
       "Bun.Image is not available. Upgrade Bun to >= 1.3.14:\n" +
@@ -29,27 +34,37 @@ function formatKb(bytes: number) {
   return `${(bytes / 1024).toFixed(1)} KB`;
 }
 
+async function writeMeta(label: string, path: string) {
+  const bytes = (await Bun.file(path).arrayBuffer()).byteLength;
+  const meta = await Bun.file(path).image().metadata();
+  console.log(`  ${label}: ${formatKb(bytes)} (${meta.width}×${meta.height}, ${meta.format})`);
+}
+
 async function main() {
-  const before = (await Bun.file(TARGET).arrayBuffer()).byteLength;
-  console.log(`Source: ${TARGET}`);
-  console.log(`Before: ${formatKb(before)} (${WIDTH}×${HEIGHT} target)`);
-
-  const pipeline = requireBunImage()
-    .resize(WIDTH, HEIGHT, { fit: "fill", filter: "lanczos3" })
-    .png({
-      compressionLevel: 9,
-      palette: true,
-      colors: 256,
-      dither: true,
-    });
-
-  await pipeline.write(TARGET);
-
-  const after = (await Bun.file(TARGET).arrayBuffer()).byteLength;
-  const meta = await Bun.file(TARGET).image().metadata();
-
-  console.log(`After:  ${formatKb(after)} (${meta.width}×${meta.height}, ${meta.format})`);
-  console.log(`Saved:  ${formatKb(before - after)} (${(((before - after) / before) * 100).toFixed(1)}%)`);
+  const before = (await Bun.file(SOURCE).arrayBuffer()).byteLength;
+  console.log(`Source: ${SOURCE}`);
+  console.log(`Before: ${formatKb(before)}`);
+
+  const base = requireBunImage(SOURCE).resize(WIDTH, HEIGHT, {
+    fit: "fill",
+    filter: "lanczos3",
+  });
+
+  // Truecolor PNG — compatible with Meta/Twitter crawlers (no 8-bit palette).
+  await base.png({ compressionLevel: 9, palette: false }).write(OPENGRAPH);
+
+  // JPEG for twitter:image — matches rogasper.com pattern, very reliable on X/Threads.
+  await requireBunImage(OPENGRAPH)
+    .jpeg({ quality: 88, mozjpeg: true })
+    .write(TWITTER);
+
+  // Keep legacy filename in sync with the Open Graph asset.
+  await Bun.write(SOURCE, Bun.file(OPENGRAPH));
+
+  console.log("Wrote:");
+  await writeMeta("opengraph-image.png", OPENGRAPH);
+  await writeMeta("twitter-image.jpg", TWITTER);
+  await writeMeta("og_image.png (legacy)", SOURCE);
 }
 
 main().catch((err) => {