fix: titles (#856)

New changes to fix titles added for
datagouv/data.gouv.fr#1886

The issue contained improper SEO recommendations

Author: nicolaskempf57

pages/dataservices/[did].vue

@@ -274,7 +274,7 @@ 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} | ${config.public.title}`)
+const title = computed(() => `API - ${dataservice.value?.title} | ${config.public.title}`)
 const description = computed(() => dataservice.value?.description)
 const robots = computed(() => dataservice.value && dataservice.value.archived_at ? 'noindex' : 'all')
 

pages/datasets/[did].vue

@@ -508,7 +508,7 @@ const { data: dataset, status } = await useAPI<DatasetV2WithFullObject>(url, {
   redirectOnSlug: 'did',
 })
 
-const title = computed(() => t('Jeu de données {title} | {site}', { title: dataset.value?.title ?? '', site: config.public.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)
 

pages/organizations/[oid].vue

@@ -101,7 +101,7 @@ const me = useMaybeMe()
 const url = computed(() => `/api/1/organizations/${route.params.oid}/`)
 const { data: organization, status } = await useAPI<Organization>(url, { redirectOn404: true, redirectOnSlug: 'oid' })
 
-const title = computed(() => organization.value?.name)
+const title = computed(() => `Organisation - ${organization.value?.name} | ${config.public.title}`)
 const robots = computed(() => organization.value && !organization.value.metrics.dataservices && !organization.value.metrics.datasets && !organization.value.metrics.reuses ? 'noindex, nofollow' : 'all')
 
 useSeoMeta({

pages/reuses/[rid].vue

@@ -187,7 +187,7 @@ 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} | ${config.public.title}`)
+const title = computed(() => `Réutilisation - ${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')
 

tests/dataservices/[did].spec.ts

@@ -5,7 +5,7 @@ const DATASERVICE_SLUG = 'explore-api-v2-30'
 test('page loads with correct title', async ({ page }) => {
   await page.goto(`/dataservices/${DATASERVICE_SLUG}`)
 
-  await expect(page).toHaveTitle(/explore/i)
+  await expect(page).toHaveTitle('API - Explore API v2 | data.gouv.fr')
 
   await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
 })

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(
-    'Jeu de données Base Sirene des entreprises et de leurs établissements (SIREN, SIRET) | data.gouv.fr',
+    '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(
-    'Jeu de données Base Sirene des entreprises et de leurs établissements (SIREN, SIRET) | data.gouv.fr',
+    '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

tests/organizations/[oid].spec.ts

@@ -5,7 +5,7 @@ const ORG_SLUG = 'sobrana'
 test('page loads with correct organization name', async ({ page }) => {
   await page.goto(`/organizations/${ORG_SLUG}`)
 
-  await expect(page).toHaveTitle(/sobrana/i)
+  await expect(page).toHaveTitle('Organisation - SOBRANA | data.gouv.fr')
 
   // Verify organization name in heading
   await expect(page.getByRole('heading', { level: 1, name: /SOBRANA/i })).toBeVisible()

tests/reuses/[rid].spec.ts

@@ -5,7 +5,7 @@ const REUSE_SLUG = 'itineriz-deplacements-professionnels-jop-paris-2024'
 test('page loads with correct title', async ({ page }) => {
   await page.goto(`/reuses/${REUSE_SLUG}`)
 
-  await expect(page).toHaveTitle(/itineriz/i)
+  await expect(page).toHaveTitle('Réutilisation - Itineriz - Déplacements professionnels JOP Paris 2024 | data.gouv.fr')
 
   await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
 })