SEO

frontend/app/pages/art/index.vue

@@ -2,10 +2,36 @@
 import { ref, computed } from 'vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
 
 const { locale, t } = useI18n();
 const localePath = useLocalePath();
 
+useSeo({
+  title: 'Art Gallery',
+  description: 'Browse the digital art gallery of Aran Roig. Explore original artwork, generative art, pixel art, and creative visual experiments.',
+  canonicalUrl: '/art'
+});
+
+// WebPage structured data for art gallery listing
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'CollectionPage',
+      headline: 'Art Gallery by Aran Roig',
+      description: 'Browse the digital art gallery of Aran Roig. Explore original artwork, generative art, pixel art, and creative visual experiments.',
+      url: 'https://aranroig.com/art',
+      author: {
+        '@type': 'Person',
+        name: 'Aran Roig'
+      },
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+
 const { data: posts } = useAsyncData('art-posts', async () => {
   const currentLocale = locale.value;
 
@@ -58,7 +84,7 @@ const displayedArt = computed(() => {
     </div>
     <FixedLayout>
         <Container>
-            <h2 class="section-title">ART GALLERY</h2>
+            <h1 class="section-title">{{ t('pages.art_heading') }}</h1>
             <div class="grid">
                 <NuxtLink v-for="art in displayedArt"
                 :key="art.slug"