Move Meta tag into root layout
2 minutes read
Currently Meta.svelte is imported and rendered manually in
individual pages, listing pages, and inside PublicationHead.svelte. Since Meta already self-resolves
title/description/tags from PageMeta via the current URL pathname, it can
live in the root layout and work for every page automatically.
Current usage
Meta is imported and used in these places:
+page.svelte-- homepage+error.svelte-- error pagetodos/+page.svelte-- todos listingfeatures/+page.svelte-- features listingPublicationHead.svelte-- all publications- Several standalone todo pages
Goal
Add <Meta /> to src/routes/+layout.svelte with no props. It will auto-resolve from PageMeta for every page. Then
remove all the individual <Meta> usages.
Steps
- Add Meta to
+layout.svelte - Remove Meta from
PublicationHead - Remove Meta from homepage, todos, features
- Remove Meta from standalone todo pages
- Handle the error page -- it uses explicit props since error pages don't have PageMeta. Keep Meta there as a fallback, or add error-specific logic to layout Meta.
- Verify all pages still have correct meta tags
Edge cases
- Error page: passes explicit title/description props. Meta falls back to props when PageMeta is not found, so it could stay in both error page and layout. Check for duplicate title tags.
- Homepage: passes explicit props. Verify PageMeta has the correct title/description.
- Duplicate canonical: root layout already renders canonical link. Meta also renders one when pageMeta.canonical is set. Avoid conflicts.
Read next