SEO

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

@@ -1,6 +1,8 @@
-<script setup>
+<script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+import { useSeo } from '~/composables/seo';
+import { computed, onBeforeMount } from 'vue';
 
 const slug = useRoute().params.slug;
 const { locale } = useI18n();
@@ -8,21 +10,81 @@ const { locale } = useI18n();
 const { data: post } = await useAsyncData(`blog-${slug}`, () => 
   queryCollection(`blog`).path(`/blog/${locale.value}/${slug}`).first()
 , {watch: [locale]})
+
+useSeo({
+  title: post.value?.title || '',
+  description: post.value?.description || '',
+  canonicalUrl: `/blog/${locale.value}/${slug}`,
+  articleDate: post.value?.date,
+  structuredData: post.value ? {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.value.title,
+    description: post.value.description,
+    datePublished: post.value.date,
+    dateModified: post.value.date,
+    author: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'Aran Roig',
+      url: 'https://aranroig.com'
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://aranroig.com/blog/${locale.value}/${slug}`
+    }
+  } : undefined,
+  ogImage: post.value ? `https://aranroig.com/blog/${locale.value}/${slug}/cover.png` : undefined
+});
 </script>
 
 <template>
-  <!-- Render the blog post as Prose & Vue components -->
   <div class="no-sprite">
       <TableHeader></TableHeader>
     </div>
   <FixedLayout>
     <Container>
+      <h1 v-if="post" class="blog-post-title">{{ post.title }}</h1>
       <ContentRenderer v-if="post" :value="post" class="blog" />
     </Container>
   </FixedLayout>
   <Footer></Footer>
 </template>
 
+<style lang="scss">
+.blog {
+    h2 {
+        a {
+            text-decoration: none;
+            color: var(--color-text);
+        }   
+    }
+
+    img {
+        margin: auto;
+        display: flex;
+        max-height: 400px;
+    }
+}
+
+.blog-post-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">
 .blog {
     h2 {

frontend/app/pages/blog/index.vue

@@ -2,10 +2,36 @@
 import TableHeader from '~/components/parts/TableHeader.vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import { ref, computed } from 'vue';
+import { useSeo } from '~/composables/seo'
 const { locale } = useI18n();
 const { t } = useI18n();
 const localePath = useLocalePath()
 
+useSeo({
+  title: 'Blog',
+  description: 'Read blog posts by Aran Roig on software engineering, web development, digital art, and creative coding.',
+  canonicalUrl: '/blog'
+});
+
+// WebPage structured data for blog listing
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'CollectionPage',
+      headline: 'Blog Posts by Aran Roig',
+      description: 'Read blog posts by Aran Roig on software engineering, web development, digital art, and creative coding.',
+      url: 'https://aranroig.com/blog',
+      author: {
+        '@type': 'Person',
+        name: 'Aran Roig'
+      },
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+
 const {data: posts, refresh} = useAsyncData('blog-posts', async () => 
 await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
 , {watch: [locale, () => useRoute().path]});
@@ -30,8 +56,9 @@ const displayedPosts = computed(() => {
     </div>
     <FixedLayout>
       <Container>
+        <h1 style="position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;">Blog — Aran Roig</h1>
         <section class="blog-section">
-          <h2 class="section-title">BLOG ENTRIES</h2>
+          <h2 class="section-title">{{ t('pages.blog_heading') }}</h2>
           <ul class="tui-list">
             <li v-for="post in displayedPosts" :key="post.slug" class="blog-entry">
               <NuxtLink class="entry-link" :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">