Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 31 additions & 1 deletion website/docs/en/config/html/meta.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@ When the `value` of a `meta` object is an object, the `key: value` of the object

In this case, the `name` and `content` properties will not be set by default.

To set `charset`, for example:
### Charset tag

To generate `charset` tag, for example:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -89,6 +91,34 @@ The `meta` tag in HTML is:
<meta charset="UTF-8" />
```

### Open Graph tags

Generate [Open Graph tags](https://ogp.me/):

```ts title="rsbuild.config.ts"
export default {
html: {
meta: {
'og:title': {
property: 'og:title',
content: 'Example Title',
},
'og:image': {
property: 'og:image',
content: 'https://example.com/og.png',
},
},
},
};
```

The generated `meta` tags in the final HTML will look like:

```html
<meta property="og:title" content="Example Title" />
<meta property="og:image" content="https://example.com/og.png" />
```

## Function usage

- **Type:**
Expand Down
36 changes: 33 additions & 3 deletions website/docs/zh/config/html/meta.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default {
};
```

最终在 HTML 中生成的 `meta` 标签为:
HTML 中生成的 `meta` 标签为:

```html
<meta name="description" content="a description of the page" />
Expand All @@ -67,7 +67,9 @@ type MetaOptions = {

当 `meta` 对象的 `value` 为对象时,会将该对象的 `key: value` 映射为 `meta` 标签的属性。

比如设置 `charset`:
### charset 标签

比如生成 `charset` 标签:

```ts title="rsbuild.config.ts"
export default {
Expand All @@ -81,12 +83,40 @@ export default {
};
```

最终在 HTML 中生成的 `meta` 标签为:
HTML 中生成的 `meta` 标签为:

```html
<meta charset="UTF-8" />
```

### Open Graph 标签

生成 [Open Graph 标签](https://ogp.me/):

```ts title="rsbuild.config.ts"
export default {
html: {
meta: {
'og:title': {
property: 'og:title',
content: 'Example Title',
},
'og:image': {
property: 'og:image',
content: 'https://example.com/og.png',
},
},
},
};
```

在 HTML 中生成的 `meta` 标签为:

```html
<meta property="og:title" content="Example Title" />
<meta property="og:image" content="https://example.com/og.png" />
```

## 函数用法

- **类型:**
Expand Down
Loading