SEO

2026-06-09 18:36:09 +02:00
parent 3da7424418
commit 09b44952df
23 changed files with 3652 additions and 8 deletions
--- a/frontend/app/pages/art/[slug].vue
+++ b/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 {
--- a/frontend/app/pages/art/index.vue
+++ b/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"
--- a/frontend/app/pages/blog/[slug].vue
+++ b/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 {
--- a/frontend/app/pages/blog/index.vue
+++ b/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 } })">
--- a/frontend/app/pages/contact/index.vue
+++ b/frontend/app/pages/contact/index.vue
@@ -1,15 +1,37 @@
 <script setup lang="ts">
 import TableHeader from '~/components/parts/TableHeader.vue';
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
+import { useSeo } from '~/composables/seo';

 const { get, post } = api();
 const { locale } = useI18n();

+useSeo({
+  title: 'Contact',
+  description: 'Get in touch with Aran Roig. Reach out for collaborations, freelance projects, or just to say hello.',
+  canonicalUrl: '/contact'
+});
+
+// WebPage structured data for contact page
+useHead({
+  script: [{
+    type: 'application/ld+json',
+    innerHTML: JSON.stringify({
+      '@context': 'https://schema.org',
+      '@type': 'WebPage',
+      name: 'Contact Aran Roig',
+      description: 'Get in touch with Aran Roig for collaborations, freelance projects, or inquiries.',
+      url: 'https://aranroig.com/contact',
+      inLanguage: ['en', 'es', 'ca']
+    })
+  }]
+});
+

 // Move useAsyncData to top level — NOT inside onMounted
 const { data: markdown } = await useAsyncData(`fixed`, async () =>
 await queryCollection(`fixed`).path(`/fixed/${locale.value}/contact`).first()
-, {watch: [locale]})
+ ,{watch: [locale]})
 </script>

 <template>
@@ -19,6 +41,7 @@ const { data: markdown } = await useAsyncData(`fixed`, async () =>

    <FixedLayout>
        <Container>
+            <h1>Contact Aran Roig</h1>
            <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
        </Container>
    </FixedLayout>
--- a/frontend/app/pages/index.vue
+++ b/frontend/app/pages/index.vue
@@ -2,11 +2,47 @@
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
 import api from '~/composables/api'
+import { useSeo } from '~/composables/seo'

 const { get, post } = api();
 const { locale } = useI18n();
 const { t } = useI18n();

+useSeo({
+  title: 'Home',
+  description: 'Aran Roig — Developer, Artist & Designer. Exploring projects in software engineering, digital art, and interactive design.',
+  canonicalUrl: '/',
+  structuredData: {
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    '@id': 'https://aranroig.com/#webpage',
+    url: 'https://aranroig.com',
+    name: 'Aran Roig — Developer, Artist & Designer',
+    description: 'Personal website of Aran Roig — developer, artist, and designer.',
+    inLanguage: ['en', 'es', 'ca'],
+    publisher: {
+      '@type': 'Person',
+      name: 'Aran Roig'
+    }
+  }
+});
+
+useHead({
+  script: [
+    {
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify({
+        '@context': 'https://schema.org',
+        '@type': 'Person',
+        name: 'Aran Roig',
+        url: 'https://aranroig.com',
+        sameAs: [],
+        jobTitle: 'Developer, Artist & Designer'
+      })
+    }
+  ]
+});
+
 const currentPath = computed(() => route.path);
 const route = useRoute();

@@ -126,6 +162,7 @@ const sectionTargets = {
 <template>
  <TableHeader></TableHeader>
  
+   <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;">Aran Roig — Developer, Artist & Designer</h1>
   <div id="top" style="scroll-margin-top: 60px;">&nbsp;</div>

  <FixedLayout>