# Obrazki OG w Nuxt

useSeoMeta na serwerze, obrazek generowany w useAsyncData.

## Gdzie to wpiąć

Nuxt renderuje meta tagi po stronie serwera, więc wystarczy pobrać adres obrazka razem z treścią wpisu. Klucz trzymasz w runtimeConfig, do którego klient nie ma dostępu.

`pages/blog/[slug].vue`

```ts
<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

// $fetch runs on the server - the key stays inside runtimeConfig.
const { data: og } = await useAsyncData(`og-${route.params.slug}`, () =>
  $fetch('https://shareglint.com/v1/images?wait=true', {
    method: 'POST',
    headers: { Authorization: `Bearer ${useRuntimeConfig().shareglintKey}` },
    body: {
      template: 'blog-og',
      modifications: {
        title: post.value.title,
        author: post.value.author,
        site: 'yourblog.com',
      },
    },
  }),
);

useSeoMeta({
  title: () => post.value.title,
  ogImage: () => og.value?.url,
  twitterCard: 'summary_large_image',
});
</script>
```

## Pułapka

Klucz wpisz do `runtimeConfig` bez prefiksu `public` — wszystko pod `public` ląduje w bundlu wysyłanym do przeglądarki.

## Ile to kosztuje

Sto obrazków miesięcznie za darmo, potem $9 za dwa tysiące. Ten sam wpis wyrenderowany drugi raz zwraca istniejący adres i nie zużywa limitu — więc przebudowanie strony nic nie kosztuje.