Link

Link adds a <link> element to the document head.

Import

import { Link } from "@solidjs/meta";

Type

const Link: Component<
  JSX.LinkHTMLAttributes<HTMLLinkElement> & { key?: string }
>;

Props

Accepts attributes for <link>. Attribute values can be reactive expressions.

key

• Type: string
• Optional: Yes

Overrides the default identity used for deduplication.

Behavior

• Dedupes by rel + href: the last-registered tag wins and unmounting restores the previous one.
• Icons (rel="icon", rel="apple-touch-icon") dedupe by rel + sizes + type instead — deliberately excluding href. Swapping the href replaces the favicon rather than accumulating, while size and type variants coexist.
• Resource rels (preload, modulepreload, prefetch, preconnect, dns-prefetch) render immediately and are never retracted — a fetch hint cannot be meaningfully undone.
• Stylesheets (rel="stylesheet") are emitted eagerly (SSR streams them as soon as they register) and removed when their owner disposes.

Examples

Canonical link

import { Link } from "@solidjs/meta";

export default function Page() {
  return <Link rel="canonical" href="https://solidjs.com/" />;
}

Per-route favicon

Because icon identity excludes href, this replaces the site favicon while the route is mounted and restores the previous one on leave:

import { Link } from "@solidjs/meta";

export default function Inbox(props: { unread: () => number }) {
  return (
    <Link
      rel="icon"
      href={props.unread() > 0 ? "/favicon-badge.ico" : "/favicon.ico"}
    />
  );
}

Related

• Stylesheet
• Meta