close
Rspress
  • English

      • Customizing head tags

      Adding head tags (such as meta tags) to web pages is crucial for SEO optimization and social media sharing. For example, Open Graph is a web metadata protocol that controls how pages appear when shared on social media platforms.

      Currently, Rspress automatically injects the following head tags:

      TagDescription
      <meta name="generator" content="Rspress v${version}">Identifies the site generator and version
      <meta property="og:type" content="website">Open Graph type, fixed as website
      <meta property="og:title" content="${title}">Open Graph title, uses current page title (if available)
      <meta name="description" content="${description}">Page description, uses description from frontmatter or global config (if available)

      If you want to add head tags, you can use the following methods:

      Global head configuration

      In rspress.config.ts, you can set HTML metadata (head tags) for all pages. See Basic Config - head for details.

      Frontmatter configuration

      You can modify the title and description fields in frontmatter to change the title and description of individual pages.

      You can also use frontmatter - head to customize page metadata tags for SEO optimization.

      For example, if you want to add <meta name="og:description" content="This is description"> to the <head> tag, you can use frontmatter like this:

      example.mdx
      ---
head:
  - - meta
    - name: og:title
      content: This is title
  - - meta
    - name: og:description
      content: This is description
---

      Head component

      If you need more complex head customization, you can use the Head component provided by Rspress to dynamically set head tags in pages or layout components.