First off, I have already checked this question, but it does not really answer my own question.
Here is my situation:
- I have a main page (+page.svelte, in the same folder as +layout.svelte) and a few extra pages (+page.svelte, located in subfolders);
- +layout.svelte uses SvelteSEO which contains a number of tags, including a "title" tag which is currently a simple string;
- I have already tweaked SvelteSEO by using {$page.url.pathname} to make the "canonical" tag dynamic (it's set to: "https://example.com{$page.url.pathname}") and it works well when I deploy.
What I want to do now is tweak the "title" tag to make it dynamic, so that each page would be something like "Example | Page title".
What I have tried:
- Adding "export let title = "Example | Page title X" to the script of page X;
- Adding "import { title } from 'path to Page X'" in +layout.svelte;
- Using the "title" tag in the SvelteSEO part of +layout.svelte.
However, that's not working and I am not sure what I can do.Spoiler: I am still a bit of a noob and I am mostly tweaking a website that was designed by a developer, so I still have a lot to learn!
Thanks!