Support opengraph meta tags

[Mozart409]

Hello,
I really like rspress and deployed my blog via cf-workers, but I am missing the feature to create open graph tags. Does anyone know how to implement it?

Thank you

[sanyuan0704]

You can implement it by internal Helmet component. Doc: https://rspress.dev/api/client-api/api-components.html#helmet

[Mozart409]

Hi @sanyuan0704,

that's good to hear. I didn't find it, because I searched for "og" or "opengraph" in the search bar. Should I update the docs to include these keywords?

[toteto]

Asking for support into creating a plugin for adding open graph tags based on the front matter definitions (title, description, icon...). Initial idea was that I can hook into Rspress via plugin, get a callback for each of the page being generated and return the appropriate html tags that will get added at the end by Rsbuild (similar to builderConfig.html.tags).

Can anyone give some hint on how to go about creating such plugin?

ping @sanyuan0704 ?

---

For the time being, I am taking the aproach of defining custom theme Layout so I can inject headers via the Helmet component:

const Layout = () => {
    const pageData = usePageData();
    console.log({ pageData });

    return (
        <>
            <Helmet>
                <meta property="og:title" content={`${pageData.page.title}`} />
                <meta property="og:url" content={`https://mysite.com/${pageData.page.pagePath}`} />
            </Helmet>
            <Theme.Layout />
        </>
    );
};

[chenjiahan]

Try this: https://github.com/rspack-contrib/rsbuild-plugin-open-graph

https://rspress.dev/api/config/config-build#builderplugins

[toteto]

I have considered that plugin, but it does not offer the ability for per-page tags. I need each page tags to reflect the page contents like title, description, image.

[chenjiahan]

Get, there is a related issue for per-page tags: #1121