DioxusLabs / DioxusLabs/dioxus
Meta tags accumulate in DOM during client-side navigation
- Dominant language
- Rust
- Stars
- 39.1k
- Forks
- 1.9k
- Avg merge
- 4d 10h
- Merged PRs (30d)
- 4
Description
## Problem
When navigating between pages in a Dioxus fullstack app, meta tags (``, ``, ``) accumulate in the `<head>` instead of being replaced.
## Expected Behavior
Meta tags should be deduplicated by their selector:
- Only one `<link rel="canonical">` should exist at any time
- Only one `<meta property="og:title">` should exist at any time
- Only one `<link rel="alternate" hreflang="en-us">` per locale should exist
- Old tags should be removed when navigating away from the page
## Current Behavior
```html
<!-- After visiting 3 category pages: -->
<head>
<link rel="canonical" href="/products/electronics">
<link rel="canonical" href="/products/tablets">
<link rel="canonical" href="/products/smartphones"> <!-- 3 canonicals! -->
<meta property="og:title" content="Electronics">
<meta property="og:title" content="Tablets">
<meta property="og:title" content="Smartphones"> <!-- 3 og:titles! -->
<link rel="alternate" hreflang="en-us" href="/en-us/products/electronics">
<link rel="alternate" hreflang="en-us" href="/en-us/products/tablets">
<link rel="alternate" hreflang="en-us" href="/en-us/products/smartphones"> <!-- 3 duplicates! -->
<!-- ... 50+ duplicate tags after heavy navigation -->
</head>
```
## Reproduction
```rust
use dioxus::prelude::*;
#[component]
fn PageMeta(title: String, canonical: String) -> Element {
rsx! {
document::Title { "{title}" }
document::Link { rel: "canonical", href: "{canonical}" }
document::Meta { property: "og:title", content: "{title}" }
}
}
#[component]
fn CategoryPage(category: String) -> Element {
rsx! {
PageMeta {
title: category.clone(),
canonical: format!("/products/{}", category)
}
h1 { "{category}" }
// Links to other categories
Link { to: "/products/electronics", "Electronics" }
Link { to: "/products/tablets", "Tablets" }
Link { to: "/products/smartphones", "Smartphones" }
}
}
```
**Steps:**
1. Navigate to `/products/electronics`
2. Click link to `/products/tablets`
3. Click link to `/products/smartphones`
4. Open DevTools and inspect `<head>`
5. See 3× duplicate canonical links, og:title tags, etc.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.