De-duplication of meta tags in head

[antony]

Is your feature request related to a problem? Please describe.
If you declare tags in the _layout.svelte, and then declare the same tag in a page's <svelte:head>, the tags are appended.

This is fine for some cases, but if I want a global meta tag across the whole site, and then specific meta tags for specific pages, I can't do it, because in those pages I get both tags.

Describe the solution you'd like
If I was able to declare a unique attribute on a tag, which indicated to the child component that this tag should be replaced, and was not in addition to the tag from _layout, this would be ideal.

Describe alternatives you've considered
Another alternative is that we can define an ID on meta tags, which would have the same purpose. The newest tag would be used for the head, and the old one replaced.

How important is this feature to you?
Very High - it makes SEO really very difficult to get right with Sapper / Svelte.

[benmccann]

Are there any meta tags where you want two of the same one? I'm not aware of any, so I think we might just want to do it automatically

I'm curious how other frameworks handle this

[Conduitry]

I don't know that I'd say this is a 'good first issue' because it's not at all clear to me where this should be handled. There's no real mechanism in SSR currently for later components to override what previous components put in the head. It's all appended - apart from the <title> element which does have special handling. We'd also have to consider whether treating unique specially would be a breaking change. (I mean, it would be, but I don't know whether that's a big concern.)

Is there a broader feature that this is actually requesting or that this could be a part of? I don't want to end up implementing this in a <meta>-specific way and then later on regret being stuck with this API.

[antony]

@Conduitry good points as always. I've removed the label as I hadn't really considered the wider ramifications.

@benmccann I believe that the spec allows it, and therefore we should allow it. I know that under certain circumstances, google will collapse robots tags, for example. I don't know an exact definition, but if we make something which prevents it, i'd bet it will crop up in the future.

I don't think SSR tags duplicating is a problem, as that was fixed in a prior PR, this seems to be specifically for tags rendered by a layout, and then rendered in a page later, with different values. I had no intention for this to be meta specific, that's me failing to write issues correctly :) I haven't checked if the duplicate tag is caused by SSR. I will look and see if that is the case.

I think if the default was to override then it would be breaking, but if the default is additive with a mechanism to prevent duplication, it won't be.

If you're concerned about the unique attribute clashing with some mystery future tag attribute, how about a namespace, maybe:

<meta name="description" content="blah" svelte:unique />

considering also:

svelte:unique
svelte:override={true}
svelte:replace={true}

whatever makes sense...

[benmccann]

It looks like React Helmet just automatically overrides previously declared tags. They do it with built-in language features though and don't need any special support from React itself. I wonder if it'd be possible to take a similar approach here and build something along the lines of a Svelte Helmet to handle this

[GrygrFlzr]

Regarding reusing meta tags with the same name, there's actually a real-world example on github's page source!

<meta name="google-site-verification" content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY">
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
<meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.

[s-kris]

This needs to be fixed. React-Helmet overrides as per the deepest tag in the hierarchy.

[ghost]

Is this fixed? I'm having the same problem, duplicated meta tags confuse crawlers and posts appear with the base url title, description and image.

Next.js solves this with the key prop, allowing deduplication when the new page metas conflicts with the ones present before.

[janosh]

Could someone reopen this?

[ghost]

Hey @janosh it actually never happened to me, the problem was that I had some meta tags in __layout. Maybe your case?

[homerjam]

I'm also facing this issue. It's my understanding that the default behaviour should be that meta tags with matching names should replace the ones further up the true.

The Nuxt head module uses a hid attribute to govern uniqueness in case that helps.

[benmccann]

You can use SvelteKit's stuff to handle meta tag creation and avoid creating duplicates in the first place: https://kit.svelte.dev/docs/seo#manual-setup-title-and-meta

[tx0c]

this needs to be fixed: Svelte needs a way to be able de-duplicate meta headers

fyi: https://nextjs.org/docs/api-reference/next/head

      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" key="title" />
      </Head>

In this case only the second is rendered. meta tags with duplicate key attributes are automatically handled.

[homerjam]

You can use SvelteKit's stuff to handle meta tag creation and avoid creating duplicates in the first place: kit.svelte.dev/docs/seo#manual-setup-title-and-meta

Just wondering if anyone has a suggested workaround now that we've lost stuff? 🤔

[orenwang]

Currently, what I do is to put a <svelte:head> in every route, i.e. +page.svelte files. A global-overridable solution is better of course, but putting a few boilerplate code lines in every route is acceptable. I mean, how many route files can you have, given that a route can be dynamic?

[tausifcreates]

+1 having this problem

[diopitis]

+1

[fromaline]

I'm facing the same issue. Any updates on this?

[belte42]

Same issue with og:title meta tags :(

[fromaline]

@belte42, I ended up using svelte-meta-tags library to solve my issue.

In the highest +layout.svelte I've done this:

<!-- +layout.svelte -->

<script lang="ts">
  import { MetaTags } from 'svelte-meta-tags';
  import { page } from '$app/stores';

  export let data;
</script>

<MetaTags
  title={$page.data.seoTags?.title ?? 'Default Title'}
  description={$page.data.seoTags?.description ?? 'Default Description'}
/>

And in +page.ts or +page.server.ts I return all page-specific meta info from the load function:

// +page.ts or +page.server.ts

import type { MetaTagsProps } from 'svelte-meta-tags';

export const load = async () => {
  const seoTags = Object.freeze<MetaTagsProps>({
    title: 'Page Specific Title',
    description: 'Page Specific Description',
  });

  return {
    seoTags,
  }
}

I hope this soluton helps you.