diff --git a/docs/1.getting-started/5.seo-meta.md b/docs/1.getting-started/5.seo-meta.md index fcedbe99c523..5f057b65b563 100644 --- a/docs/1.getting-started/5.seo-meta.md +++ b/docs/1.getting-started/5.seo-meta.md @@ -57,19 +57,15 @@ useHead({ We recommend to take a look at the [`useHead`](/docs/api/composables/use-head) and [`useHeadSafe`](/docs/api/composables/use-head-safe) composables. -## `useSeoMeta` +## `useSeoMeta` and `useServerSeoMeta` The `useSeoMeta` and `useServerSeoMeta` composables let you define your site's SEO meta tags as a flat object with full TypeScript support. This helps you avoid typos and common mistakes, such as using `name` instead of `property`. -In most instances, the meta does not need to be reactive as robots will only scan the initial load. So we recommend using `useServerSeoMeta` as a performance-focused utility that will not do anything (or return a `head` object) on the client. - -**Simple example:** - ```vue [app.vue] ``` -**Reactive example:** - -When inserting tags that are reactive, you should use the computed getter syntax (`() => value`): - -```vue [app.vue] - -``` - -Read more on the [`useSeoMeta`](https://unhead.harlanzw.com/guide/composables/use-seo-meta) composable. +Read more on the [`useSeoMeta`](/docs/api/composables/use-seo-meta) and [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composables. ## Components diff --git a/docs/3.api/1.composables/use-seo-meta.md b/docs/3.api/1.composables/use-seo-meta.md new file mode 100644 index 000000000000..e03286f4b1b5 --- /dev/null +++ b/docs/3.api/1.composables/use-seo-meta.md @@ -0,0 +1,46 @@ +--- +description: The useSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support. +--- + +# `useSeoMeta` + +The `useSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support. + +This helps you avoid common mistakes, such as using `name` instead of `property`, as well as typos - with over 100+ meta tags fully typed. + +This is the recommended way to add meta tags to your site as it is XSS safe and has full TypeScript support. +:ReadMore{link="/docs/getting-started/seo-meta"} + +## Example + +```vue [app.vue] + +``` + +When inserting tags that are reactive, you should use the computed getter syntax (`() => value`): + +```vue [app.vue] + +``` + +## Parameters + +There are over 100+ parameters. + +Full list of [`parameters`](https://github.com/harlan-zw/zhead/blob/main/src/metaFlat.ts) diff --git a/docs/3.api/1.composables/use-server-seo-meta.md b/docs/3.api/1.composables/use-server-seo-meta.md new file mode 100644 index 000000000000..146c9a6ea8ac --- /dev/null +++ b/docs/3.api/1.composables/use-server-seo-meta.md @@ -0,0 +1,11 @@ +--- +description: The useServerSeoMeta composable lets you define your site's SEO meta tags as a flat object with full TypeScript support. +--- + +# `useServerSeoMeta` + +Just like [`useSeoMeta`](/docs/api/composables/use-seo-meta), `useServerSeoMeta` composable lets you define your site's SEO meta tags as a flat object with full TypeScript support. +:ReadMore{link="/docs/api/composables/use-seo-meta"} + +In most instances, the meta doesn't need to be reactive as robots will only scan the initial load. So we recommend using `useServerSeoMeta` as a performance-focused utility that will not do anything (or return a `head` object) on the client. +Parameters are exactly the same as with [`useSeoMeta`](/docs/api/composables/use-seo-meta) diff --git a/docs/3.api/3.utils/$fetch.md b/docs/3.api/3.utils/$fetch.md index 180a2a868c83..1d576a276598 100644 --- a/docs/3.api/3.utils/$fetch.md +++ b/docs/3.api/3.utils/$fetch.md @@ -15,8 +15,8 @@ We recommend to use [`useFetch`](https://nuxt.com/docs/api/composables/use-fetch ```vue