@x-wave/blog 1.0.37 → 1.0.38

package/README.md

@@ -56,6 +56,20 @@ src/
         ├── welcome.mdx
         ├── glossary.mdx
         └── faq.mdx
+public/
+└── og/
+    ├── en/                      # Language-specific OG images
+    │   ├── welcome-preview.png
+    │   ├── glossary-preview.png
+    │   └── faq-preview.png
+    ├── es/
+    │   ├── welcome-preview.png
+    │   ├── glossary-preview.png
+    │   └── faq-preview.png
+    └── zh/
+        ├── welcome-preview.png
+        ├── glossary-preview.png
+        └── faq-preview.png
 ```
 
 ### 2. Set up i18n and styles
@@ -254,6 +268,7 @@ Regular content here.
 | `author` | `string` | Author name. Displayed below the page title with a user icon. |
 | `date` | `string` | Publication or update date. Displayed below the page title with "Last edited" label and calendar icon (i18n supported). |
 | `keywords` | `string[] \| string` | Optional array of keywords or comma-separated string for SEO. Inserted into the page `<meta name="keywords">` tag. |
+| `ogImage` | `string` | Optional Open Graph image filename (just the filename, not the full path). Images should be stored in `public/og/<language>/` folder. Used for social media sharing previews. |
 | `hasAdvanced` | `boolean` | Enables Simple/Advanced mode toggle. Requires a `-advanced.mdx` variant. |
 | `tags` | `string[]` | Array of tag strings for categorizing content. Tags are automatically indexed by the framework when you pass `mdxFiles` to BlogProvider. Tags are clickable and show search results. |
 
@@ -450,17 +465,38 @@ keywords: [getting started, tutorial, basics]
 
 ### SEO and metadata
 
-The framework automatically handles SEO metadata using React Helmet. Page `<title>`, `<meta description>`, and `<meta keywords>` tags are set based on:
+The framework automatically handles SEO metadata using React Helmet. Page `<title>`, `<meta description>`, `<meta keywords>`, and Open Graph tags are set based on article frontmatter and site configuration.
 
 **Article pages:**
 - **Title**: `"{article title} | {site title}"` (if title exists in frontmatter)
 - **Description**: Uses article `description` from frontmatter, falls back to site-level `description` from config
 - **Keywords**: Uses article `keywords` from frontmatter (converts array to comma-separated string)
+- **Open Graph Image**: Uses article `ogImage` filename (image path is auto-constructed from language folder)
+
+**Open Graph tags (for social media sharing):**
+When an article includes an `ogImage`, the framework automatically generates:
+- `og:image` - The full image URL for social media preview
+- `og:title` - The article title
+- `twitter:card` - Set to `summary_large_image` for Twitter/X preview
+- `twitter:image` - The image URL for Twitter/X sharing
 
 **Home page:**
 - **Title**: Site title from config
 - **Description**: Uses site-level `description` from config
 
+Image folder structure for serving OG images:
+
+```
+public/og/
+├── en/
+│   ├── getting-started.png      # Served as /og/en/getting-started.png
+│   └── tutorial.png              # Served as /og/en/tutorial.png
+├── es/
+│   └── getting-started.png      # Served as /og/es/getting-started.png
+└── zh/
+    └── getting-started.png      # Served as /og/zh/getting-started.png
+```
+
 Example setup:
 
 ```tsx
@@ -483,12 +519,18 @@ Then in your MDX frontmatter:
 title: Getting Started
 author: Jane Doe
 date: 2026-02-23
-description: Step-by-step guide to getting started in 5 minutes  // Overrides site description
+description: Step-by-step guide to getting started in 5 minutes
 keywords: [getting started, setup, tutorial, beginners]
+ogImage: getting-started.png  // Image at /og/en/getting-started.png (or /og/es/, /og/zh/)
 ---
 ```
 
-This ensures proper SEO for search engines and social media sharing, with support for multi-language content.
+When users share this article on social media:
+- Facebook will show the title, description, and the OG image
+- Twitter/X will show a large image preview with the article title
+- LinkedIn and other platforms will use the OG metadata for rich previews
+
+This ensures proper SEO for search engines and rich sharing previews on social media, with full support for multi-language content.
 
 ### Custom headers