#Duplicate `<link rel="canonical">` in SolidStart

1 messages · Page 1 of 1 (latest)

digital owl
#

In my SolidStart project, I have the following code:

<Title>Home | Example</Title>
<Link rel="canonical" href="https://www.example.com/" />
<Meta
  name="description"
  content="something"
/>

However, in the rendered output, there are two <link rel="canonical"> tags:

<link data-sm="00000000100000100000000800030" rel="canonical" href="https://www.example.com/">
<link rel="canonical" href="https://www.example.com/">

I tried removing the <Link> tag from the code, and after rendering, there was no canonical link at all. This confirms that the <Link> tag I added is the sole reason for the canonical link appearing.

So, what is causing the duplication of the <link rel="canonical"> tag in the rendered output, and how can I fix it? Or it dose not matter

thanks a lot

iron warren
#

MetaProvider example:

import { Meta, Link, MetaProvider } from "@solidjs/meta";

export default function MyComponent() {
 // your code..
 return <MetaProvider>
  <Title>Home | Example</Title>
  <Link rel="canonical" href="https://www.example.com/" />
  <Meta
    name="description"
    content="something"
  />
</MetaProvider>
}
fallen python
#

i believe OP is using solid meta. i think a reproduction is likely necessary for further debugging.

iron warren
#

😄

fallen python
#

yeah, I'm only guessing but solid start basic template includes it by default + data-sm (what solid meta use to mark nodes it handles) made it clear, and solid meta already handles de-duplication so we definitely need a repro

iron warren
#

It haven't ever happened for me before tbh

digital owl
#

yes, I am using solid-meta. Only Link has data-sm property in the page after rendered. If I removed <Link rel="canonical" href="https://www.example.com/" />, everything goes well.

thin creek
# digital owl yes, I am using solid-meta. Only Link has data-sm property in the page after re...
  • Created a fresh SolidStart project: TS/basic
  • Replaced the src/app.tsx with this:
// file: src/app.tsx
import { Link, Meta, MetaProvider, Title } from '@solidjs/meta';
import { Router } from '@solidjs/router';
import { FileRoutes } from '@solidjs/start/router';
import { Suspense } from 'solid-js';
import './app.css';

import type { ParentProps } from 'solid-js';

function Layout(props: ParentProps) {
  return (
    <MetaProvider>
      <Title>Home | Example</Title>
      <Link rel="canonical" href="https://www.example.com/" />
      <Meta name="description" content="something" />
      <a href="/">Index</a>
      <a href="/about">About</a>
      <Suspense>{props.children}</Suspense>
    </MetaProvider>
  );
}

export default function App() {
  return (
    <Router root={Layout}>
      <FileRoutes />
    </Router>
  );
}

… which results in exactly this (from "view source"):

<link
  data-sm="0000000010000010"
  rel="canonical"
  href="https://www.example.com/"
/>
<meta data-sm="0000000010000020" name="description" content="something" />
<title data-sm="00000000100000500000110">Hello World</title>

So unfortunately you haven't provided enough information for a reproduction.

fallen python
#

but the initial problem seems to be duplicates caused by one element, where both ssr-ed and csr-ed tags existing at the same time

grave tiger
# thin creek - Created a fresh SolidStart project: TS/basic - Replaced the `src/app.tsx` with...

thanks for helping showing how to use meta in solidstart app
but what about this?

// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler(() => (
  <StartServer
    document={({ assets, children, scripts }) => (
      <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <link rel="icon" href="/favicon.ico" />
          {assets}
        </head>
        <body>
          <div id="app">{children}</div>
          {scripts}
        </body>
      </html>
    )}
  />
));
#

like we have duplicate head?

thin creek
# grave tiger like we have duplicate head?

Meta places its elements inside the existing head but it doesn't handle elements that already exist within it. It only modifies, removes elements that it placed there to begin with.

grave tiger
grave tiger
#

And remove the head from that file I showed above

thin creek
#

The head stays in src/entry-server.tsx. You just use <Title/>, <Meta />, etc. in your components when they become relevant. The fallbacks (if any) would be specified right under the MetaProvider typically in the src/app.tsx.

grave tiger
#

Like now we have <head> and <Head>

#

In two different places

thin creek
#

I'm not aware of any <Head /> component.