Add Open Graph meta tags and screenshot for better social sharing

stared · claude · stared · commit d92e6dbdc3d8 · 2025-08-13T14:33:41.000+02:00
Added comprehensive Open Graph and Twitter Card meta tags to improve social media preview appearance. Includes dynamic URL and image placeholders for Vite environment variables. Also added screenshot to README and incremented version to 0.2.6. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 Interactive R data visualization in the browser using [WebR](https://webr.r-wasm.org/) (R in WebAssembly) and [ggplot2](https://ggplot2.tidyverse.org/) (the best charting library ever).
 
+![WebR ggplot2 Demo Screenshot](./public/webr-ggplot2-screenshot.png)
+
 ## What is it?
 
 A web application that runs R code directly in your browser - no server required. Features live code editing, CSV upload, and interactive plots. Try it online at [quesmaorg.github.io/demo-webr-ggplot](https://quesmaorg.github.io/demo-webr-ggplot/).
diff --git a/index.html b/index.html
@@ -5,6 +5,24 @@
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WebR ggplot2 & dplyr Demo</title>
+    
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="WebR ggplot2 & dplyr Demo">
+    <meta name="description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="%VITE_SITE_URL%">
+    <meta property="og:title" content="WebR ggplot2 & dplyr Demo">
+    <meta property="og:description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    <meta property="og:image" content="%VITE_OG_IMAGE%">
+    
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="%VITE_SITE_URL%">
+    <meta property="twitter:title" content="WebR ggplot2 & dplyr Demo">
+    <meta property="twitter:description" content="Interactive R data visualization in your browser with ggplot2 and dplyr. No server required - powered by WebAssembly.">
+    <meta property="twitter:image" content="%VITE_OG_IMAGE%">
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webr-ggplot2-demo",
   "private": true,
-  "version": "0.2.4",
+  "version": "0.2.6",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/public/webr-ggplot2-screenshot.png b/public/webr-ggplot2-screenshot.png

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "webr-ggplot2-demo",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.2.4",`
	`4`	`+ "version": "0.2.6",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`