Comments (8)
Yes! PR please.
from svelte-meta-tags.
If you are using SvelteKit, we recommend writing as follows
+layout.svelte
<script>
import { MetaTags } from 'svelte-meta-tags';
import { page } from '$app/stores';
export let data;
$: metaTags = {
titleTemplate: '%s | Svelte Meta Tags',
...$page.data.metaTagsChild,
};
</script>
{#if metaTagsChild}
<MetaTags {...metaTags} />
{/if}
+page.ts
import type { MetaTagsProps } from 'svelte-meta-tags';
export const load = async ({ url }) => {
const metaTags: MetaTagsProps = Object.freeze({
title: 'page title',
description: 'Description',
openGraph: {
type: 'website',
url: new URL(url.pathname, url.origin).href,
locale: 'en_IE',
title: 'Open Graph Title',
description: 'Open Graph Description',
},
});
return {
metaTagsChild,
};
};
from svelte-meta-tags.
Thank you. Would you accept a PR with this added to the documentation?
from svelte-meta-tags.
PR added - closing this for hygiene, thank you!
from svelte-meta-tags.
@oekazuma, hi! First of all, thanks for the project! It's quite handy and I use it in my SvelteKit project.
I have a minor question regarding this exact use case:
Do I need to do Object.freeze
in load function? Or it's just a personal preference?
It seems like this works fine too:
import type { MetaTagsProps } from 'svelte-meta-tags';
export const load = async ({ url }) => {
const metaTags: MetaTagsProps = {
title: 'page title',
description: 'Description',
openGraph: {
type: 'website',
url: new URL(url.pathname, url.origin).href,
locale: 'en_IE',
title: 'Open Graph Title',
description: 'Open Graph Description',
},
};
return {
metaTagsChild: metaTags,
};
};
Maybe I'm missing something.
from svelte-meta-tags.
@fromaline
It is safe to use Object.freeze
to prevent changes from being made to the object. It is up to the user whether to use it or not, but I personally recommend it.
I have prepared an example of its use, so please take a look at it here.
https://github.com/oekazuma/svelte-meta-tags/tree/main/example/src/routes
from svelte-meta-tags.
@oekazuma got it. Thanks for answering!
Your example looks good to me. Maybe we should replace the current "Overwriting default values with a child page" section with code from your example?
from svelte-meta-tags.
@fromaline
We have already updated the documentation!
https://github.com/oekazuma/svelte-meta-tags?tab=readme-ov-file#-usage
from svelte-meta-tags.
Related Issues (20)
- Title is no longer reactive after 3.1.1 HOT 4
- v4 HOT 1
- How to update the title after streamed data resolves from `+page.server.ts`? HOT 1
- are extra label/data tags supported for Twitter? HOT 4
- Using $page in +layout.svelte ?? HOT 2
- Support custom `robots` and `googlebot` content HOT 1
- [FEAT] - support/extend `robots` via `robotsProps.robots` HOT 2
- titleTemplate not used for <title> tag HOT 1
- Allow to set only name="robots" meta tag, or only name="googlebot" meta tag, or both
- v3 HOT 7
- Migration to monorepo
- Improved type definitions
- What's on the roadmap? HOT 1
- og:type is not working HOT 3
- Docs: More practical examples
- Action Required: Fix Renovate Configuration
- onHide log was removed but a new version wasn't published HOT 1
- Not providing title property creates empty title tag HOT 1
- [Question/Bug]: How to use `smt` for nested layouts? HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-meta-tags.