Adapter-static: How to setup the head content of the fallback page
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Discussed in https://github.com/sveltejs/kit/discussions/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 🙌
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading app.html and the adapter-static fallback configuration described in the issue, then compare it with the +page.ts prerender and SSR settings. Trace how %sveltekit.head% is used for prerendered pages and the fallback index.html. Done means identifying and documenting the supported way to provide fallback head content without duplicate titles, or confirming that app.html is the required template.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Documentation
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100