search

shuding / nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.
https://nextra.site
MIT License
11.28k stars 1.24k forks source link

Generate OpenGraph Tags from Frontmatter #113

Closed LucaNerlich closed 1 year ago

LucaNerlich commented 3 years ago

It would be greate, if (for each page) the opengraph tags could be generated based on the frontmatter from the corresponding markdown file. This would then generate the "share" preview card, when the blog url gets posted on social media, discord, slack etc.

Example: 

---
title: my blog test
date: 2021/3/27
tag: code, tech
author: Luca Nerlich
description: test description
image: /images/blog/test.jpg
---

Example OG Tags

https://ogp.me/

<html prefix="og: https://ogp.me/ns#">
<head>
<title>my blog test</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<get this from next router>" />
<meta property="og:image" content="<get this from next router>/images/blog/test.jpg" />
...
</head>
...
</html>
rayhanadev commented 3 years ago

I agree, that is a good idea!

shuding commented 3 years ago

Great feature to have, thanks!

buccalon commented 1 year ago

It would be nice to have an option to define custom meta tags too. In my case, I'd like to have each page accessible to citation managers like Zotero. See: https://www.zotero.org/support/dev/exposing_metadata

dimaMachina commented 1 year ago

Integration of next-seo will be available in the future beta release.

you can take a look at an example of the configuration of getNextSeoProps() theme option here https://github.com/shuding/nextra/blob/core/examples/docs/src/theme.config.js#L20-L73

Also you can access to parsed frontMatter data in getNextSeoProps function via useConfig hook.