Page /image/[id].vue avec NuxtPicture + useSeoMeta #14

Open
opened 2026-04-13 23:40:58 +02:00 by Balam · 0 comments
Owner

Objectif

Page dédiée par image : affichage full-size, SEO OG dynamique.

Fichier

app/pages/image/[id].vue

Éléments

  • NuxtPicture pour l'affichage (AVIF + WebP + fallback)
  • useSeoMeta() avec OG image dynamique
  • Titre, description, nombre de vues, album
  • Lien vers l'album si présent

useSeoMeta

useSeoMeta({
  ogImage: () => `${config.public.siteUrl}/uploads/processed/${image.value?.filename}`,
  ogImageWidth: () => image.value?.width,
  ogImageHeight: () => image.value?.height,
})

Validation

  • OG preview correcte sur opengraph.xyz
  • NuxtPicture affiche AVIF si supporté
  • Compteur de vues s'incrémente
## Objectif Page dédiée par image : affichage full-size, SEO OG dynamique. ## Fichier `app/pages/image/[id].vue` ## Éléments - `NuxtPicture` pour l'affichage (AVIF + WebP + fallback) - `useSeoMeta()` avec OG image dynamique - Titre, description, nombre de vues, album - Lien vers l'album si présent ## useSeoMeta ```ts useSeoMeta({ ogImage: () => `${config.public.siteUrl}/uploads/processed/${image.value?.filename}`, ogImageWidth: () => image.value?.width, ogImageHeight: () => image.value?.height, }) ``` ## Validation - OG preview correcte sur opengraph.xyz - NuxtPicture affiche AVIF si supporté - Compteur de vues s'incrémente
Balam added this to the Galerie V1 project 2026-04-13 23:44:10 +02:00
Sign in to join this conversation.
No description provided.