docs: add useSeoMeta and useServerSeoMeta pages (#20656)

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]
 <script setup lang="ts">
-useServerSeoMeta({
+useSeoMeta({
   title: 'My Amazing Site',
   ogTitle: 'My Amazing Site',
   description: 'This is my amazing site, let me tell you all about it.',
@@ -80,22 +76,7 @@ useServerSeoMeta({
 </script>
 ```
 
-**Reactive example:**
+Read more on the [`useSeoMeta`](/docs/api/composables/use-seo-meta) and [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composables.
-
-When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):
-
-```vue [app.vue]
-<script setup lang="ts">
-const title = ref('My title')
-
-useSeoMeta({
-  title,
-  description: () => `description: ${title.value}`
-})
-</script>
-```
-
-Read more on the [`useSeoMeta`](https://unhead.harlanzw.com/guide/composables/use-seo-meta) composable.
 
 ## Components
 

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]
+<script setup lang="ts">
+useSeoMeta({
+  title: 'My Amazing Site',
+  ogTitle: 'My Amazing Site',
+  description: 'This is my amazing site, let me tell you all about it.',
+  ogDescription: 'This is my amazing site, let me tell you all about it.',
+  ogImage: 'https://example.com/image.png',
+  twitterCard: 'summary_large_image',
+})
+</script>
+```
+
+When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):
+
+```vue [app.vue]
+<script setup lang="ts">
+const title = ref('My title')
+
+useSeoMeta({
+  title,
+  description: () => `description: ${title.value}`
+})
+</script>
+```
+
+## Parameters
+
+There are over 100+ parameters.
+
+Full list of [`parameters`](https://github.com/harlan-zw/zhead/blob/main/src/metaFlat.ts)

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)

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
 <script setup>
-// During SSR data is fetched twice, one on the server and one on the client.
+// During SSR data is fetched twice, once on the server and once on the client.
-const dataTwice = await $fetch("/api/item")
+const dataTwice = await $fetch('/api/item')
 
 // During SSR data is fetched only on the server side and transferred to the client.
 const { data } = await useAsyncData('item', () => $fetch('/api/item'))