feat: improve seo tags

components/FullPageTabs/FullPageTabs.vue

@@ -1,31 +1,41 @@
 <template>
   <div class="border-b border-gray-default">
     <div class="container">
-      <div class="flex gap-2 overflow-auto">
-        <CdataLink
+      <div
+        class="flex gap-2 overflow-auto -my-px"
+      >
+        <component
+          :is="as"
           v-for="link in links"
           :key="link.label"
-          class="whitespace-nowrap md:whitespace-normal bg-blue-action-low px-4 py-2 !bg-none font-bold aria-current-page:text-new-primary aria-current-page:border-t-2 aria-current-page:border-t-new-primary aria-current-page:bg-white aria-current-page:border-x aria-current-page:border-x-gray-default aria-current-page:shadow-[0_1px_white] hover:aria-current-page:!bg-white active:aria-current-page:!bg-white hover:!bg-blue-action-low-hover active:!bg-blue-action-low-active"
-          :to="link.href"
-          :aria-current="isCurrentUrl(link.href) ? 'page': false"
+          class="flex font-bold text-base whitespace-nowrap lg:whitespace-normal m-0"
         >
-          {{ link.label }}
-          <sup
-            v-if="'count' in link"
-            class="font-normal"
+          <CdataLink
+            class="!bg-none bg-blue-action-low px-4 py-2 aria-current-page:text-new-primary aria-current-page:border-t-2 aria-current-page:border-t-new-primary aria-current-page:bg-white aria-current-page:border-x aria-current-page:border-x-gray-default hover:aria-current-page:!bg-white active:aria-current-page:!bg-white hover:!bg-blue-action-low-hover active:!bg-blue-action-low-active"
+            :to="link.href"
+            :aria-current="isCurrentUrl(link.href) ? 'page': false"
           >
-            <span aria-hidden="true">(</span>{{ link.count }}<span aria-hidden="true">)</span>
-          </sup>
-        </CdataLink>
+            {{ link.label }}
+            <sup
+              v-if="'count' in link"
+              class="font-normal"
+            >
+              <span aria-hidden="true">(</span>{{ link.count }}<span aria-hidden="true">)</span>
+            </sup>
+          </CdataLink>
+        </component>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+withDefaults(defineProps<{
   links: Array<{ href: string, label: string, count?: number }>
-}>()
+  as?: string
+}>(), {
+  as: 'h2',
+})
 
 const isCurrentUrl = useIsCurrentUrl()
 </script>

components/OrganizationOwner.vue

@@ -12,6 +12,7 @@
     >
       <OrganizationNameWithCertificate
         class="w-full"
+        :as
         :organization
       />
     </CdataLink>
@@ -25,6 +26,7 @@ withDefaults(defineProps<{
   organization: Organization | OrganizationReference
   logoSizeClass?: string
   logoNoBorder?: boolean
+  as?: string
 }>(), {
   logoSizeClass: 'size-8',
   logoNoBorder: false,

datagouv-components/src/components/OrganizationNameWithCertificate.vue

@@ -4,9 +4,10 @@
       v-if="showType"
       :type="getOrganizationType(organization)"
     />
-    <div
-      class="mb-0 truncate flex-initial"
-      :class="{ 'text-sm': size === 'sm' }"
+    <component
+      :is="as"
+      class="mb-0 truncate flex-initial font-normal text-new-primary"
+      :class="{ 'text-sm': size === 'sm', 'text-base': size === 'base' }"
     >
       {{ organization.name }}
       <small
@@ -15,7 +16,7 @@
       >
         {{ organization.acronym }}
       </small>
-    </div>
+    </component>
     <Tooltip v-if="isOrganizationCertified(organization)">
       <RiCheckboxCircleLine
         class="flex-none"
@@ -52,9 +53,11 @@ withDefaults(defineProps<{
   showAcronym?: boolean
   showType?: boolean
   size?: 'base' | 'sm'
+  as?: string
 }>(), {
   showAcronym: false,
   showType: true,
   size: 'base',
+  as: 'div',
 })
 </script>

pages/dataservices/[did].vue

@@ -96,6 +96,7 @@
                   <OrganizationOwner
                     v-if="dataservice.organization"
                     :organization="dataservice.organization"
+                    as="h2"
                   />
                   <AvatarWithName
                     v-if="dataservice.owner"
@@ -182,9 +183,9 @@
             type="primary-frame"
             class="flex items-center justify-between"
           >
-            <div class="text-datagouv-dark font-bold text-xl">
+            <h2 class="text-datagouv-dark font-bold text-xl mb-0">
               {{ $t(`Accéder à l'API`) }}
-            </div>
+            </h2>
             <BrandedButton
               color="primary"
               :href="dataservice.business_documentation_url"
@@ -273,12 +274,14 @@ const { height: headerHeight } = useElementSize(header)
 const url = computed(() => `/api/1/dataservices/${route.params.did}/`)
 const { data: dataservice, status } = await useAPI<Dataservice>(url, { redirectOn404: true, redirectOnSlug: 'did' })
 
-const title = computed(() => dataservice.value?.title)
+const title = computed(() => `${dataservice.value?.title} | ${config.public.title}`)
+const description = computed(() => dataservice.value?.description)
 const robots = computed(() => dataservice.value && dataservice.value.archived_at ? 'noindex' : 'all')
 
 useSeoMeta({
   title,
   robots,
+  description,
 })
 await useJsonLd('dataservice', route.params.did as string)
 

pages/dataservices/[did]/index.vue

@@ -5,7 +5,7 @@
       class="mb-5"
     >
       <h2 class="text-sm font-bold uppercase m-0 text-gray-title">
-        {{ $t('{n} jeu de données | {n} jeux de données', pageData.total) }}
+        {{ $t('{n} jeu de données associé | {n} jeux de données associés', pageData.total) }}
       </h2>
       <div
         class="grid gap-5 mt-2"

pages/datasets/[did].vue

@@ -122,6 +122,7 @@
                   <OrganizationOwner
                     v-if="dataset.organization"
                     :organization="dataset.organization"
+                    as="h2"
                   />
                   <AvatarWithName
                     v-if="dataset.owner"
@@ -486,6 +487,7 @@ import { useElementSize } from '@vueuse/core'
 const config = useRuntimeConfig()
 const route = useRoute()
 const { formatDate } = useFormatDate()
+const { t } = useTranslation()
 
 definePageMeta({
   keepScroll: true,
@@ -506,12 +508,14 @@ const { data: dataset, status } = await useAPI<DatasetV2WithFullObject>(url, {
   redirectOnSlug: 'did',
 })
 
-const title = computed(() => dataset.value?.title)
+const title = computed(() => t('Jeu de données {title} | {site}', { title: dataset.value?.title ?? '', site: config.public.title }))
 const robots = computed(() => dataset.value && dataset.value.archived ? 'noindex' : 'all')
+const description = computed(() => dataset.value?.description_short)
 
 useSeoMeta({
   title,
   robots,
+  description,
 })
 
 const hideWarnings = computed(() => {

pages/reuses/[rid].vue

@@ -100,6 +100,7 @@
               >
                 <OrganizationNameWithCertificate
                   :organization="reuse.organization"
+                  as="h2"
                 />
               </CdataLink>
             </div>
@@ -181,15 +182,18 @@ definePageMeta({
 })
 
 const route = useRoute()
+const config = useRuntimeConfig()
 
 const url = computed(() => `/api/1/reuses/${route.params.rid}/`)
 const { data: reuse, status } = await useAPI<Reuse>(url, { redirectOn404: true, redirectOnSlug: 'rid' })
 
-const title = computed(() => reuse.value?.title)
+const title = computed(() => `${reuse.value?.title} | ${config.public.title}`)
+const description = computed(() => reuse.value?.description ?? '')
 const robots = computed(() => reuse.value && !reuse.value.metrics.datasets && !reuse.value.metrics.datasets ? 'noindex, nofollow' : 'all')
 
 useSeoMeta({
   title,
+  description,
   robots,
 })
 

pages/reuses/[rid]/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="divide-y divide-gray-default *:py-5">
     <section>
-      <h2 class="uppercase text-sm mb-2.5">
+      <div class="uppercase text-sm mb-2.5">
         {{ $t('Description') }}
-      </h2>
+      </div>
       <div class="grid md:grid-cols-12 gap-4">
         <MarkdownViewer
           class="order-2 md:order-1 w-full min-w-0 md:col-span-9"

tests/datasets/[did].spec.ts

@@ -7,7 +7,7 @@ test('show details page', async ({ page }) => {
 
   // Expect a title "to contain" a substring.
   await expect(page).toHaveTitle(
-    'Base Sirene des entreprises et de leurs établissements (SIREN, SIRET)',
+    'Jeu de données Base Sirene des entreprises et de leurs établissements (SIREN, SIRET) | data.gouv.fr',
   )
 })
 
@@ -17,7 +17,7 @@ test('dataset with labels shows label section', async ({ page }) => {
   )
 
   await expect(page).toHaveTitle(
-    'Base Sirene des entreprises et de leurs établissements (SIREN, SIRET)',
+    'Jeu de données Base Sirene des entreprises et de leurs établissements (SIREN, SIRET) | data.gouv.fr',
   )
 
   // Check that there's a corresponding dd element with labels