mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
docs: add useSeoMeta
and useServerSeoMeta
pages (#20656)
This commit is contained in:
parent
2eee64121d
commit
24c30eb976
@ -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:**
|
||||
|
||||
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.
|
||||
Read more on the [`useSeoMeta`](/docs/api/composables/use-seo-meta) and [`useServerSeoMeta`](/docs/api/composables/use-server-seo-meta) composables.
|
||||
|
||||
## Components
|
||||
|
||||
|
46
docs/3.api/1.composables/use-seo-meta.md
Normal file
46
docs/3.api/1.composables/use-seo-meta.md
Normal file
@ -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)
|
11
docs/3.api/1.composables/use-server-seo-meta.md
Normal file
11
docs/3.api/1.composables/use-server-seo-meta.md
Normal file
@ -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)
|
@ -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.
|
||||
const dataTwice = await $fetch("/api/item")
|
||||
// During SSR data is fetched twice, once on the server and once on the client.
|
||||
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'))
|
||||
|
Loading…
Reference in New Issue
Block a user