feat: Vite 8 support and OG meta tag enhancements (#154)

* chore: update deps

* chore(deps): update font source and Vite version in configuration

* refactor: streamline image generation logic and improve module loading

* fix: update schema path in biome configuration

* feat: enhance Open Graph meta tags with width, height, type, and alt attributes

* fix: sync lockfile with package.json and correct font name in example

- Regenerate pnpm-lock.yaml to resolve vite version mismatch (^7.1.2 vs ^8.0.3) causing CI --frozen-lockfile failure
- Fix font name in og-image.tsx from "Noto Serif JP" to "Noto Sans" to match vite.config.ts registration

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: correct font name to "Noto Sans JP" to match @fontsource/noto-sans-jp

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: sunya9

README.md

@@ -74,7 +74,15 @@ export default function OgImage() {
 
 ### 3. Complete!
 
-The plugin automatically inserts the necessary `og:image` meta tag in your HTML. You can add other Open Graph meta tags as needed:
+The plugin automatically inserts the following meta tags in your HTML:
+
+- `og:image` — Image URL
+- `og:image:type` — Always `image/png`
+- `og:image:width` — Image width (default: 1200)
+- `og:image:height` — Image height (default: 630)
+- `og:image:alt` — Alt text (when `alt` option is set)
+
+You can add other Open Graph meta tags as needed:
 
 ```html
 <!-- index.html - Add these manually if needed -->
@@ -119,6 +127,12 @@ interface OgImagePluginOptions {
    */
   componentPath?: string;
 
+  /**
+   * Alt text for the OG image
+   * When set, generates an og:image:alt meta tag
+   */
+  alt?: string;
+
   /**
    * Image response options (from @vercel/og)
    * See: https://vercel.com/docs/functions/og-image-generation
@@ -147,7 +161,7 @@ interface OgImagePluginOptions {
 Use [@fontsource](https://fontsource.org/) packages for easy font integration:
 
 ```bash
-pnpm add @fontsource/geist @fontsource/noto-serif-jp
+pnpm add @fontsource/geist @fontsource/noto-sans-jp
 ```
 
 ```typescript
@@ -158,6 +172,7 @@ export default defineConfig({
     react(),
     reactOgImage({
       host: "https://example.com",
+      alt: "Your Amazing App",
       imageResponseOptions: {
         fonts: [
           {
@@ -168,9 +183,9 @@ export default defineConfig({
             weight: 700,
           },
           {
-            name: "Noto Serif JP",
+            name: "Noto Sans JP",
             data: await readFile(
-              "./node_modules/@fontsource/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff"
+              "./node_modules/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff"
             ),
             weight: 400,
           },

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.1.4/schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "vcs": {
     "enabled": false,
     "clientKind": "git",

example/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@fontsource/geist": "^5.2.6",
-    "@fontsource/noto-serif-jp": "^5.2.6",
+    "@fontsource/noto-sans-jp": "^5.2.9",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",
@@ -28,7 +28,7 @@
     "globals": "^17.3.0",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.2",
+    "vite": "^8.0.3",
     "vite-plugin-react-og-image": "link:..",
     "vitest": "^4.0.3"
   }

example/src/og-image.tsx

@@ -27,7 +27,7 @@ export default function OgImage() {
           fontSize: 36,
           opacity: 0.8,
           fontWeight: 400,
-          fontFamily: "Noto Serif JP",
+          fontFamily: "Noto Sans JP",
         }}
       >
         日本語のサンプルテキストです

example/test/build.test.ts

@@ -54,4 +54,17 @@ test("should update index.html with correct asset path", async () => {
   expect(ogImageMeta.attr("content")).toMatch(
     /^https:\/\/example\.com\/assets\/og-image-\w+\.png$/
   );
+
+  // Check og:image:width and og:image:height meta tags
+  const ogImageWidth = $('meta[property="og:image:width"]');
+  const ogImageHeight = $('meta[property="og:image:height"]');
+  expect(ogImageWidth.attr("content")).toBe("1200");
+  expect(ogImageHeight.attr("content")).toBe("630");
+
+  // Check og:image:type and og:image:alt meta tags
+  const ogImageType = $('meta[property="og:image:type"]');
+  expect(ogImageType.attr("content")).toBe("image/png");
+
+  const ogImageAlt = $('meta[property="og:image:alt"]');
+  expect(ogImageAlt.attr("content")).toBe("Vite React OG Image Example");
 });

example/test/dev-server.test.ts

@@ -47,4 +47,17 @@ test("should serve HTML with og:image meta tag pointing to preview", async () =>
   // Check og:image meta tag
   const ogImageMeta = $('meta[property="og:image"]');
   expect(ogImageMeta.attr("content")).toBe(`${ogImageHost}/src/og-image.tsx`);
+
+  // Check og:image:width and og:image:height meta tags
+  const ogImageWidth = $('meta[property="og:image:width"]');
+  const ogImageHeight = $('meta[property="og:image:height"]');
+  expect(ogImageWidth.attr("content")).toBe("1200");
+  expect(ogImageHeight.attr("content")).toBe("630");
+
+  // Check og:image:type and og:image:alt meta tags
+  const ogImageType = $('meta[property="og:image:type"]');
+  expect(ogImageType.attr("content")).toBe("image/png");
+
+  const ogImageAlt = $('meta[property="og:image:alt"]');
+  expect(ogImageAlt.attr("content")).toBe("Vite React OG Image Example");
 });

example/vite.config.ts

@@ -11,19 +11,22 @@ export default defineConfig(async () => {
       react(),
       reactOgImage({
         host: "https://example.com",
+        alt: "Vite React OG Image Example",
         imageResponseOptions: {
           fonts: [
             {
               name: "Geist",
               data: await readFile(
-                "./node_modules/@fontsource/geist/files/geist-latin-700-normal.woff"
+                "./node_modules/@fontsource/geist/files/geist-latin-700-normal.woff",
               ),
+              weight: 700,
             },
             {
-              name: "Noto Sans",
+              name: "Noto Sans JP",
               data: await readFile(
-                "./node_modules/@fontsource/noto-serif-jp/files/noto-serif-jp-japanese-400-normal.woff"
+                "./node_modules/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-400-normal.woff",
               ),
+              weight: 400,
             },
           ],
         },

package.json

@@ -49,7 +49,7 @@
     "@types/react": "^19.1.8",
     "tsup": "^8.5.0",
     "typescript": "^5.9.2",
-    "vite": "^7.1.2"
+    "vite": "^8.0.3"
   },
   "peerDependencies": {
     "react": ">=18.0.0",