Adapter-static: How to setup the head content of the fallback page #11910
Description
Discussed in #11889
Originally posted by benoit-z February 24, 2024
Hello folks 👋
I'm building a SPA with sveltekit and static-adapter, works great, but I have some issues with the SEO tags in the <head> of my pages.
Here's what I'm doing:
- I'm making a website with several pages.
- I'm building it as an SPA, with some pages prerendered.
I can do that by using the option
fallback: "index.html"
of adapter-static, and on the +page.ts of the pages I want prerendered:
export const prerender = true;
export const ssr = true;
Which works fine.
Now, let's say that I want a specific <title> in the <head> of my fallback page (which I believe makes sense since this is what the crawlers will see when they try to access any non-prerenderd page). I would need to put the <title> tag into the app.html file, as it is the file used as a template for the fallback page.
On my prerendered pages, I want a different, more specific <title> though. So I'm using <svelte:head> component in their +page.ts file.
But since the app.html file is also used as a template for my prerendered pages, I end up with duplicates <title> tags in them (the one from app.html and the one from the page's <svelte:head> component.
In summary (app.html) ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My fallback title</title> <!--if I remove this my fallback page has no title-->
%sveltekit.head% <!--but it conflicts with the title injected from here on the prerendered pages-->
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>
Is there any way to set the <head> content of the fallback page other than writing it in app.html?
Or is there any way to use another file than app.html as the template for the fallback page ?
Am I doing this wrong ?
Thanks for your support 🙌