@slidev/docs 52.0.1 → 52.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/features/og-image.md +41 -0
- package/features/seo-meta.md +36 -0
- package/package.json +16 -16
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
---
|
|
2
|
+
relates:
|
|
3
|
+
- features/seo-meta
|
|
4
|
+
tags: ['SEO', head]
|
|
5
|
+
description: |
|
|
6
|
+
Set the Open Graph image for your slides.
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Open Graph Image
|
|
10
|
+
|
|
11
|
+
Slidev allows you to set the Open Graph image via the `seoMeta.ogImage` option in the headmatter:
|
|
12
|
+
|
|
13
|
+
```md
|
|
14
|
+
---
|
|
15
|
+
seoMeta:
|
|
16
|
+
ogImage: https://url.to.your.image.png
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
# Your slides here
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Learn more about [SEO Meta Tags](./seo-meta).
|
|
23
|
+
|
|
24
|
+
## Local Image
|
|
25
|
+
|
|
26
|
+
If you have `./og-image.png` in your project root, Slidev will grab it as the Open Graph image automatically without any configuration.
|
|
27
|
+
|
|
28
|
+
## Auto-generate
|
|
29
|
+
|
|
30
|
+
Since v52.1.0, Slidev supports auto-generating the Open Graph image from the first slide.
|
|
31
|
+
|
|
32
|
+
You can set `seoMeta.ogImage` to `auto` to enable this feature.
|
|
33
|
+
|
|
34
|
+
```md
|
|
35
|
+
---
|
|
36
|
+
seoMeta:
|
|
37
|
+
ogImage: auto
|
|
38
|
+
---
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
It will use [playwright](https://playwright.dev/) to capture the first slide and save it as `./og-image.png` (same as `slidev export`). You may also commit the generated image to your repository to avoid the auto-generation. Or if you generate it on CI, you might also want to setup the playwright environment.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
---
|
|
2
|
+
depends:
|
|
3
|
+
- custom/index#headmatter
|
|
4
|
+
relates:
|
|
5
|
+
- features/og-image
|
|
6
|
+
tags: [SEO, head]
|
|
7
|
+
description: |
|
|
8
|
+
Configure SEO meta tags for better social media sharing and search engine optimization.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# SEO Meta Tags
|
|
12
|
+
|
|
13
|
+
Slidev allows you to configure SEO meta tags in the headmatter to improve social media sharing and search engine optimization. You can set up Open Graph and Twitter Card meta tags to control how your slides appear when shared on social platforms.
|
|
14
|
+
|
|
15
|
+
## Configuration
|
|
16
|
+
|
|
17
|
+
Add the `seoMeta` configuration to your slides deck frontmatter:
|
|
18
|
+
|
|
19
|
+
```yaml
|
|
20
|
+
---
|
|
21
|
+
# SEO meta tags
|
|
22
|
+
seoMeta:
|
|
23
|
+
ogTitle: Slidev Starter Template
|
|
24
|
+
ogDescription: Presentation slides for developers
|
|
25
|
+
ogImage: https://cover.sli.dev
|
|
26
|
+
ogUrl: https://example.com
|
|
27
|
+
twitterCard: summary_large_image
|
|
28
|
+
twitterTitle: Slidev Starter Template
|
|
29
|
+
twitterDescription: Presentation slides for developers
|
|
30
|
+
twitterImage: https://cover.sli.dev
|
|
31
|
+
twitterSite: username
|
|
32
|
+
twitterUrl: https://example.com
|
|
33
|
+
---
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
This feature is powered by [unhead](https://unhead.unjs.io/)'s `useHead` hook, please refer to the [documentation](https://unhead.unjs.io/docs/head/api/composables/use-seo-meta) for more details.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@slidev/docs",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "52.0
|
|
4
|
+
"version": "52.1.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"funding": "https://github.com/sponsors/antfu",
|
|
7
7
|
"homepage": "https://sli.dev",
|
|
@@ -17,28 +17,28 @@
|
|
|
17
17
|
],
|
|
18
18
|
"devDependencies": {
|
|
19
19
|
"@antfu/utils": "^9.2.0",
|
|
20
|
-
"@iconify/json": "^2.2.
|
|
21
|
-
"@shikijs/vitepress-twoslash": "^3.
|
|
22
|
-
"@types/node": "^24.0
|
|
23
|
-
"@unocss/reset": "^66.3.
|
|
24
|
-
"@vueuse/core": "^13.
|
|
20
|
+
"@iconify/json": "^2.2.363",
|
|
21
|
+
"@shikijs/vitepress-twoslash": "^3.8.1",
|
|
22
|
+
"@types/node": "^24.1.0",
|
|
23
|
+
"@unocss/reset": "^66.3.3",
|
|
24
|
+
"@vueuse/core": "^13.5.0",
|
|
25
25
|
"fast-glob": "^3.3.3",
|
|
26
26
|
"gray-matter": "^4.0.3",
|
|
27
27
|
"markdown-it": "^14.1.0",
|
|
28
|
-
"shiki": "^3.
|
|
28
|
+
"shiki": "^3.8.1",
|
|
29
29
|
"typeit": "8.1.0",
|
|
30
30
|
"typescript": "^5.8.3",
|
|
31
|
-
"unocss": "^66.3.
|
|
31
|
+
"unocss": "^66.3.3",
|
|
32
32
|
"unplugin-icons": "^22.1.0",
|
|
33
33
|
"unplugin-vue-components": "^28.8.0",
|
|
34
|
-
"vite-plugin-inspect": "^11.3.
|
|
35
|
-
"vitepress": "^2.0.0-alpha.
|
|
36
|
-
"vitepress-plugin-group-icons": "^1.6.
|
|
37
|
-
"vitepress-plugin-llms": "^1.
|
|
38
|
-
"vue": "^3.5.
|
|
39
|
-
"@slidev/
|
|
40
|
-
"@slidev/types": "52.0
|
|
41
|
-
"@slidev/
|
|
34
|
+
"vite-plugin-inspect": "^11.3.2",
|
|
35
|
+
"vitepress": "^2.0.0-alpha.9",
|
|
36
|
+
"vitepress-plugin-group-icons": "^1.6.1",
|
|
37
|
+
"vitepress-plugin-llms": "^1.7.1",
|
|
38
|
+
"vue": "^3.5.18",
|
|
39
|
+
"@slidev/client": "52.1.0",
|
|
40
|
+
"@slidev/types": "52.1.0",
|
|
41
|
+
"@slidev/parser": "52.1.0"
|
|
42
42
|
},
|
|
43
43
|
"scripts": {
|
|
44
44
|
"dev": "vitepress",
|