New SvelteKit course: fullstacksveltekit.com

How to fix the duplicate meta tags issue in SvelteKit

Justin's profile pic

Justin Ahinon

Last updated on

Enter your email to get this article emailed to you

This is a quick guide on how to fix the duplicate meta tags issue in SvelteKit . I first came across this issue after running an SEO site audit on one of my client's websites. All the pages of the site were being flagged for having duplicate meta tags.

I spent quite some time debugging this issue, and finally, after hours (literally) of research, I found the solution. I hope this guide will help you fix this issue in your SvelteKit project.

tl;dr: Disable HTML minification for the domain from Cloudflare dashboard (Speed > Optimization > Auto Minify).

What is the duplicate meta tags issue, and how can it affect your SEO?

Duplicate meta tags issue happens when on a single page of your website, you have the same meta tags that are repeated multiple times.

Another variant of this issue is when you have the same meta tags on multiple pages of your website. This is also a duplicate meta tags issue, but it's not the one we're going to fix in this guide.

This issue can affect your SEO, by confusing search engines about which meta tags to consider for your pages for instance.

What is the cause of the duplicate meta tags issue in SvelteKit?

From my research, the error is caused by some hydration issues during SSR. The meta tags are rendered twice, once during SSR, and once during hydration. A fix was merged in the Svelte repo a few months ago (many fixes actually over the months), but I was still having the issue.

It was only after finding this GitHub issue that I started having a hint on what was causing the issue.

My projects were deployed on Vercel, behind a Cloudflare DNS. And I was not able to reproduce the issue with the URLs generated by Vercel, only the main domains that were behind Cloudflare.

How to fix the duplicate meta tags issue in SvelteKit?

So, the Svelte fix apparently uses HTML comments to identify the start and the end of meta tags on the page; and then remove the duplicates. But when you use Cloudflare for optimizing your site (and precisely the HTML minification optimization), the HTML comments are removed, and the fix doesn't work.

The solution was just then to disable HTML minification for the domain from Cloudflare dashboard (Speed > Optimization > Auto Minify).

Minification settings in Cloudflare

You might also like these blog posts

A lovely bath

How to implement file upload with SvelteKit

Looking to implement file uploading in your Svelte project? Check out this tutorial for an easy-to-follow guide and start uploading files like a pro.

A lovely bath

Headless WordPress with GraphQL and SvelteKit

Want to take your WordPress site to the next level? Learn how to go headless with SvelteKit and GraphQL.