warning when using SVG open graph image

Author: eric-burel

docs/tutorialkit.dev/src/content/docs/reference/configuration.mdx

@@ -404,6 +404,25 @@ type TemplateType = "html" | "node" | "angular-cli" | "create-react-app" | "java
 
 ```
 
+### `meta`
+
+**type**: `MetaTagsSchema`
+
+Configures `<meta>` tags for Open Graph protocole and Twitter.
+<PropertyTable inherited type="MetaTagsSchema" />
+
+Example value:
+```yaml
+meta:
+  image: /cover.png
+  title: Title shown on social media and search engines
+  description: Description shown on social media and search engines
+```
+
+TutorialKit will use your logo as the default image.
+If your logo uses the SVG format, it may not display on most social platforms.
+Use a raster format instead, such as WEBP or PNG.
+
 ## Configure the Tutorialkit Astro integration
 
 `@tutorialkit/astro` is an integration for Astro. You can configure the integration in your `astro.config.ts` file.

packages/astro/src/default/components/MetaTags.astro

@@ -15,6 +15,10 @@ if (meta.image) {
   }
 }
 imageUrl ??= readLogoFile('logo', true);
+if (imageUrl?.endsWith('.svg')) {
+  console.warn(`Using a SVG open graph image "${imageUrl}". This is not supported by most social platforms. 
+  You should rather set "meta.image" to a raster image (PNG, WEBP).`);
+}
 ---
 
 <meta charset="UTF-8" />