how to use rehype-meta with next.js's mdx integration #1921

godmar · 2022-01-27T03:24:04Z

godmar
Jan 27, 2022

I have a next.js site that uses next.js's mdx v2 integration (for instance, I can place a /pages/about.mdx file in the directory which is accessible at /about). I would like support for OpenGraph (og) meta data so that my site can be referenced in, for instance, Discourse.

I have found the rehype-meta plugin that promises to do that.
I have configured it in my next.config.mjs file as:

  ...
   rehypePlugins: [
      [rehypeMeta, {
                    og: true
                }],
    ... ], ...

The result is that the <head> tag is placed inside the document right after the rendered MDX:

...
   HTML from mdx ends here...
   <head>
    <meta property="og:type" content="website"/>
  </head>
  </div>
</main>

which perhaps unsurprisingly results in a Warning: validateDOMNesting(...): <head> cannot appear as a child of <div> error.

How do I get the <meta> tags into the head of the document? Ordinarily, I would use next/head.

Ultimately, I would love to use the inferring plugins as well to automatically produce page titles (and og metadata) from headings in the mdx content.

Thank you.

Answered by ChristianMurphy

Jan 27, 2022

It looks like next uses a specialized component to add metadata to the head of the page https://nextjs.org/learn/seo/crawling-and-indexing/metatags
It may take some component mapping to have the contents of the <head> tag mdx generates, to instead pass it to Next's <Head> component instead.

View full answer

ChristianMurphy · 2022-01-27T04:00:15Z

ChristianMurphy
Jan 27, 2022
Maintainer

It looks like next uses a specialized component to add metadata to the head of the page https://nextjs.org/learn/seo/crawling-and-indexing/metatags
It may take some component mapping to have the contents of the <head> tag mdx generates, to instead pass it to Next's <Head> component instead.

4 replies

godmar Jan 27, 2022
Author

I know how to use next.js <Head> (via next/head) but I do not know what you mean by component mapping. BTW, I know how to, for instance, define a wrapper component in my MDXProvider where I could add a <Head> component - what I don't know is how this integrates with the rehype-meta plugin. I need something that looks inside the mdx content.

Specifically, I was successful with something like:

const components = {
  ...
  wrapper: (props) => {
     return <MainTemplate><Head><meta ....>...</Head>{props.children}</MainTemplate>;
  }
}

-- this makes <meta ...> appears where it needs to be -- but it's completely unclear how to do this with the plugin.

godmar Jan 27, 2022
Author

are you saying that adding:

{
   head: Head
}

to the MDX components would work?

ChristianMurphy Jan 27, 2022
Maintainer

I mean it would be worth trying something like

const components = {
  head: ({children}) => (<Head>{children}</Head>)
}

godmar Jan 27, 2022
Author

It does, indeed! (just aliasing head: Head, I mean)

godmar · 2022-01-27T04:23:30Z

godmar
Jan 27, 2022
Author

Ok, so this works now partially. By mapping head to next.js's Head, I obtain a

<meta property="og:type" content="website">

in the header.

How do I use rehype-infer-title-meta and/or rehype-infer-description-meta to get og:title and og:description? I tried installing and importing those plugins (w/o options) like this others, no effect.

(Naive question: what's a title in an mdx document? Something after #?)

7 replies

godmar Jan 27, 2022
Author

Debugging this... meta.title as here is correctly extracted and set.... but it's not producing an og:title meta.

ChristianMurphy Feb 7, 2022
Maintainer

🤔 I'm not sure, ideas @wooorm?

wooorm Feb 7, 2022
Maintainer

Order? rehype-infer-* have to be used first.

godmar Feb 8, 2022
Author

Bingo. Yes, indeed, placing them in this order

            rehypePlugins: [
                rehypeInferTitleMeta,
                rehypeInferDescriptionMeta,
                [rehypeMeta, {
                    og: true
                }],
            ],

produces useful meta.titles.

This opens the next wish, though. Is it possible to infer the title and/or description from the AST after MDX components have run?
My index.mdx file reads:

## Welcome to <Config shortname /> <Config semester /> 

Please read [this first](/auth/welcome).

where <Config shortname /> is replaced with string content upon rendering.

But the inferred meta description does not include the rendered output, instead reading Welcome to Please read this first.:

<meta property="[og:description]()" content="[Welcome to Please read this first.]()"/>

ChristianMurphy Feb 8, 2022
Maintainer

Is it possible to infer the title and/or description from the AST after MDX components have run?

No, components are resolved after all of the ASTs.
The flow through mdx is:

                                                        +------------+
                                                        |            |
                                                        |   React    |
                                                        |            |
                                                        +------------+
                                                              v
+----------+ +-------+ +------+ +-------+ +-----------+ +------------+ +-----+
|          | |       | |      | |       | |           | |            | |     |
| MDX text |>| MDAST |>| HAST |>| ESAST |>| JS source |>| JS Runtime |>| DOM |
|          | |       | |      | |       | |           | |            | |     |
+----------+ +-------+ +------+ +-------+ +-----------+ +------------+ +-----+
                                                              ^
                                                        +------------+
                                                        |            |
                                                        | Components |
                                                        |            |
                                                        +------------+

              |                         |              |              |
              +-------------------------+              +--------------+
                     AST Transforms                     Components are
                      happen here                       resolved here

links to ASTs: mdast (remark plugins), hast (rehype plugins), esast (recma plugins)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdx-js

how to use rehype-meta with next.js's mdx integration #1921

{{title}}

Replies: 2 comments 11 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

mdx-js

how to use rehype-meta with next.js's mdx integration #1921

godmar Jan 27, 2022

Replies: 2 comments · 11 replies

ChristianMurphy Jan 27, 2022 Maintainer

godmar Jan 27, 2022 Author

godmar Jan 27, 2022 Author

ChristianMurphy Jan 27, 2022 Maintainer

godmar Jan 27, 2022 Author

godmar Jan 27, 2022 Author

godmar Jan 27, 2022 Author

ChristianMurphy Feb 7, 2022 Maintainer

wooorm Feb 7, 2022 Maintainer

godmar Feb 8, 2022 Author

ChristianMurphy Feb 8, 2022 Maintainer

godmar
Jan 27, 2022

Replies: 2 comments 11 replies

ChristianMurphy
Jan 27, 2022
Maintainer

godmar Jan 27, 2022
Author

godmar Jan 27, 2022
Author

ChristianMurphy Jan 27, 2022
Maintainer

godmar Jan 27, 2022
Author

godmar
Jan 27, 2022
Author

godmar Jan 27, 2022
Author

ChristianMurphy Feb 7, 2022
Maintainer

wooorm Feb 7, 2022
Maintainer

godmar Feb 8, 2022
Author

ChristianMurphy Feb 8, 2022
Maintainer