SEO

frontend/app/pages/art/[slug].vue

@@ -1,5 +1,6 @@
-<script setup>
+<script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
 
 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -7,14 +8,37 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`art-${slug}`, () => 
   queryCollection(`art`).path(`/art/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: `Art piece: ${post.value?.title || ''} by Aran Roig`,
+  canonicalUrl: `/art/${locale.value}/${slug}`,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'CreativeWork',
+    name: post.value.title,
+    description: `Art piece by Aran Roig titled "${post.value.title}"`,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    datePublished: post.value.date,
+    image: post.value.thumb ? `${post.value.thumb.startsWith('http') ? '' : 'https://aranroig.com'}${post.value.thumb}` : undefined,
+    creativeWorkTheme: {
+      '@type': 'Thing',
+      name: 'Digital Art'
+    }
+  } : undefined,
+  ogImage: post.value?.thumb
+});
 </script>
 
 <template>
-  <!-- Render the blog post as Prose & Vue components -->
   <div class="no-sprite">
       <TableHeader></TableHeader>
     </div>
   <div class="extended-container">
+    <h1 v-if="post" class="art-title">{{ post.title }}</h1>
     <ContentRenderer v-if="post" :value="post" class="art" />
   </div>
 </template>
@@ -26,6 +50,44 @@ const { data: post } = await useAsyncData(`art-${slug}`, () =>
     margin-top: 32px;
 }
 
+.art {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 77vh;
+        max-width: 100%;
+    }
+}
+
+.art-title {
+  font-family: 'Hurmit', monospace;
+  font-size: 1.8rem;
+  color: var(--color-text);
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+</style>
+
+<style lang="scss">
+.no-sprite .undertable-wrapper {
+  display: none;
+}
+</style>
+
+<style lang="scss">
+.extended-container {
+    width: 100%;
+    margin: auto;
+    margin-top: 32px;
+}
+
 .art {
     h2 {
         a {

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"