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

New issue

Open

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

Balam commented

2026-04-13 23:40:58 +02:00

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 Phase 5 — Page image + Embed milestone

2026-04-13 23:40:58 +02:00

Balam added the

phase-5

nuxt

labels

2026-04-13 23:40:58 +02:00

Balam added this to the Galerie V1 project

2026-04-13 23:44:10 +02:00

Balam referenced this issue

2026-04-13 23:57:55 +02:00

Composable useEmbedCodes.ts + composant EmbedCodes.vue #21