feat: support open graph protocol

[leochiu-a]

Description

Support Open Graph Protocol in the headmatter. Only adding support for the following attributes:

seoMeta:
  ogTitle: Slidev Starter Template
  ogDescription: Presentation slides for developers
  ogImage: https://cover.sli.dev
  ogUrl: https://example.com
  twitterCard: summary_large_image
  twitterTitle: Slidev Starter Template
  twitterDescription: Presentation slides for developers
  twitterImage: https://cover.sli.dev
  twitterSite: username
  twitterUrl: https://example.com

Test Plans

• The SEO meta tag should be visible in the view source page.

Related issue

• Support Open Graph protocol #1932

[netlify]

❌ Deploy Preview for slidev failed.

Name	Link
🔨 Latest commit	149975c
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/67ea14cd6d673700087a9701

[antfu]

I wonder if we should use something more comprehensive like https://unhead.unjs.io to support more tags other than only og

[leochiu-a]

I wonder if we should use something more comprehensive like https://unhead.unjs.io to support more tags other than only og

It sounds like a good idea. I can implement it.

[leochiu-a]

@antfu Do you think we need to implement all Open Graph attributes using useSeoMeta, or should we provide only the essential tags, such as the following?

• og:title
• og:desription
• og:image
• og:url
• twitter:card
• twitter:site
• twitter:title
• twitter:description
• twitter:image
• twitter:url

Then, we can provide a seoMeta attribute on headmatter which extends the MetaFlat type from unhead.

It would be like the following.

seoMeta:
  ogTitle: Slidev Starter Template
  ogDescription: Presentation slides for developers
  ogImage: https://cover.sli.dev
  ogUrl: https://example.com
  twitterCard: summary_large_image
  twitterSite: @username

[antfu]

Yeah that looks great, thanks!

[leochiu-a]

@antfu Because transformHtmlTemplate is supported by [email protected]., I installed it in packages/slidev. What do you think? Or, should we use stable version unhead?

[ogadra]

Thanks for developing this! I would love to have this feature as soon as possible!

It seems difficult to implement without using transformHtmlTemplate, so I’m okay with using an unstable version of unhead if necessary.

[leochiu-a]

Hi, @antfu. Could you take a look when you have time?

[pkg-pr-new]

Open in Stackblitz

@slidev/client

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/client@2096

create-slidev

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev@2096

create-slidev-theme

npm i https://pkg.pr.new/slidevjs/slidev/create-slidev-theme@2096

@slidev/parser

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/parser@2096

@slidev/cli

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/cli@2096

@slidev/types

npm i https://pkg.pr.new/slidevjs/slidev/@slidev/types@2096

commit: 149975c