Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-11 08:33:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: update seo and meta page (#19697)

Browse Source 
Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>
This commit is contained in:
Nick Medrano 2023-03-15 06:33:22 -05:00 committed by GitHub
parent 886cca19ea
commit 451b55ddbd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/1.getting-started/5.seo-meta.md
View File

@ -82,23 +82,21 @@ useServerSeoMeta({
**Reactive example:**
When inserting tags that are reactive, for example, from an API request, you should use the computed getter syntax, the same as `useHead`.
When inserting tags that are reactive, you should use the computed getter syntax (`() => value`):
```vue [app.vue]
<script setup lang="ts">
const { data } = useFetch('/api/example')
const title = ref('My title')
useServerSeoMeta({
ogTitle: () => `${data.value?.title} - My Site`,
description: () => data.value?.description,
ogDescription: () => data.value?.description,
useSeoMeta({
title,
description: () => `description: ${title.value}`
})
</script>
```
Read more on the [`useSeoMeta`](https://unhead.harlanzw.com/guide/composables/use-seo-meta) composable.
## Components
Nuxt provides `<Title>`, `<Base>`, `<NoScript>`, `<Style>`, `<Meta>`, `<Link>`, `<Body>`, `<Html>` and `<Head>` components so that you can interact directly with your metadata within your component's template.
@ -153,32 +151,42 @@ See [@unhead/schema](https://github.com/unjs/unhead/blob/main/packages/schema/sr
### Reactivity
Reactivity is supported on all properties, as computed, computed getter refs and reactive.
Reactivity is supported on all properties, as computed, getters and reactive.
It's recommended to use computed getters (`() => {}`) over computed (`computed(() => {})`).
It's recommended to use getters (`() => value`) over computed (`computed(() => value)`).
::code-group
```vue [useHead]
<script setup lang="ts">
const desc = ref('My amazing site.')
const description = ref('My amazing site.')
useHead({
meta: [
{ name: 'description', content: desc }
{ name: 'description', content: description }
],
})
</script>
```
```vue [useSeoMeta]
<script setup lang="ts">
const desc = ref('My amazing site.')
useSeoMeta({
description
})
</script>
```
```vue [Components]
<script setup>
const desc = ref('My amazing site.')
const description = ref('My amazing site.')
</script>
<template>
<div>
<Meta name="description" :content="desc" />
<Meta name="description" :content="description" />
</div>
</template>
```
@ -257,8 +265,7 @@ useHead({
</script>
```
::LinkExample{link="/docs/examples/composables/use-head"}
::
:LinkExample{link="/docs/examples/composables/use-head"}
:ReadMore{link="/docs/guide/directory-structure/pages/#page-metadata"}