| 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. |
| 42 | |
| 43 | ## CI Environment |
| 44 | |
| 45 | When generating the OG image on CI (e.g. GitHub Actions), the runner may not have the fonts required to render your slides correctly. Non-Latin characters such as Japanese, Chinese, or Korean will appear as boxes (tofu) if the system fonts are missing. |
| 46 | |
| 47 | ### Install system fonts |
| 48 | |
| 49 | On Ubuntu-based runners, install the Noto CJK fonts before building. Make sure to install fonts **before** running `playwright install`: |
| 50 | |
| 51 | ```yaml |
| 52 | - name: Install CJK fonts |
| 53 | run: sudo apt-get install -y fonts-noto-cjk |
| 54 | |
| 55 | - name: Install Playwright browsers |
| 56 | run: pnpm exec playwright install chromium --with-deps |
| 57 | ``` |
| 58 | |
| 59 | ### Use web fonts |
| 60 | |
| 61 | Alternatively, configure your slides to use a web font that supports your language. Slidev will wait for all web fonts to finish loading before capturing the screenshot. |
| 62 | |
| 63 | ```md |
| 64 | --- |
| 65 | fonts: |
| 66 | sans: Noto Sans JP |
| 67 | --- |
| 68 | ``` |
| 69 | |
| 70 | > [!TIP] |
| 71 | > You can commit the generated `og-image.png` to your repository. Slidev will reuse the committed image instead of re-generating it on every build, which avoids the font issue entirely and speeds up your CI. |
| 72 |