SEO

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 } })">