Add SEO properties to collection pages (#3999)

* Add SEO properties to collection pages

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Update frontend/src/locales/scripts/en.json5

Co-authored-by: Madison Swain-Bowden <bowdenm@spu.edu>

* Add suggestions from code review

use-collection-meta.ts is refactored to add a static " | Openverse" string to the title to prevent confusion with pluralized i18n strings

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Add suggestions from code review

Add suggestions from code review

Update the strings: add comment that the phrases will be used for page titles
Signed-off-by: Olga Bulat <obulat@gmail.com>

* Fix types

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Simplify

Signed-off-by: Olga Bulat <obulat@gmail.com>

* Replace docker-compose with docker compose for playwright

Signed-off-by: Olga Bulat <obulat@gmail.com>

---------

Signed-off-by: Olga Bulat <obulat@gmail.com>
Co-authored-by: Madison Swain-Bowden <bowdenm@spu.edu>

frontend/bin/playwright.sh

@@ -21,6 +21,6 @@ pnpm i18n:get-translations --en-only
 
 echo Running Playwright v"$PLAYWRIGHT_VERSION" as "$USER_ID" with Playwright arguments "$PLAYWRIGHT_ARGS" under package manager "$PACKAGE_MANAGER"
 
-docker-compose -f docker-compose.playwright.yml up --build --force-recreate --exit-code-from playwright --remove-orphans
+docker compose -f docker-compose.playwright.yml up --build --force-recreate --exit-code-from playwright --remove-orphans
 
-docker-compose -f docker-compose.playwright.yml down
+docker compose -f docker-compose.playwright.yml down

frontend/src/composables/use-collection-meta.ts

@@ -0,0 +1,46 @@
+import { computed } from "vue"
+
+import { useI18n } from "~/composables/use-i18n"
+import { useProviderStore } from "~/stores/provider"
+import type { SupportedMediaType } from "~/constants/media"
+import type { CollectionParams } from "~/types/search"
+
+import type { ComputedRef } from "vue"
+
+export const useCollectionMeta = ({
+  collectionParams,
+  mediaType,
+  i18n,
+}: {
+  collectionParams: ComputedRef<CollectionParams | null>
+  mediaType: SupportedMediaType
+  i18n: ReturnType<typeof useI18n>
+}) => {
+  const pageTitle = computed(() => {
+    const params = collectionParams.value
+
+    if (params) {
+      if (params.collection === "creator") {
+        return `${params.creator} | Openverse`
+      }
+
+      if (params.collection === "source") {
+        const sourceName = useProviderStore().getProviderName(
+          params.source,
+          mediaType
+        )
+        return `${i18n.t(`collection.pageTitle.source.${mediaType}`, { source: sourceName })} | Openverse`
+      }
+
+      if (params.collection === "tag") {
+        return `${i18n.t(`collection.pageTitle.tag.${mediaType}`, { tag: params.tag })} | Openverse`
+      }
+    }
+
+    return "Openly Licensed Images, Audio and More | Openverse"
+  })
+
+  return {
+    pageTitle,
+  }
+}

frontend/src/locales/scripts/en.json5

@@ -1085,6 +1085,41 @@
       creator: "Creator",
       source: "Source",
     },
+    pageTitle: {
+      tag: {
+        /**
+         * This will be the page title and must be SEO friendly.
+         * {tag} will be a dynamic value such as "cat". We cannot change its case or form.
+         * You can change the sentence to add more context and make the sentence
+         * grammatically correct, for instance, to "Audio tracks with the tag {tag}".
+         */
+        audio: "{tag} audio tracks",
+
+        /**
+         * This will be the page title and must be SEO friendly.
+         * {tag} will be a dynamic value such as "cat". We cannot change its case or form.
+         * You can change the sentence to add more context and make the sentence
+         * grammatically correct, for instance, to "Images with the tag {tag}".
+         */
+        image: "{tag} images",
+      },
+      source: {
+        /**
+         * This will be the page title and must be SEO friendly.
+         * {source} will be a dynamic value such as "Wikimedia". We cannot change its case or form.
+         * You can change the sentence to add more context and make the sentence
+         * grammatically correct, for instance, to "Audio tracks from {source}".
+         */
+        audio: "{source} audio tracks",
+        /**
+         * This will be the page title and must be SEO friendly.
+         * {source} will be a dynamic value such as "Wikimedia". We cannot change its case or form.
+         * You can change the sentence to add more context and make the sentence
+         * grammatically correct, for instance, to "Images from {source}".
+         */
+        image: "{source} images",
+      },
+    },
     link: {
       source: "Open source site",
       creator: "Open creator page",

frontend/src/pages/audio/collection.vue

@@ -23,10 +23,10 @@ import { computed, ref, watch } from "vue"
 
 import { collectionMiddleware } from "~/middleware/collection"
 import { useSearchStore } from "~/stores/search"
-
 import { useMediaStore } from "~/stores/media"
-import type { AudioDetail } from "~/types/media"
 import { useI18n } from "~/composables/use-i18n"
+import { useCollectionMeta } from "~/composables/use-collection-meta"
+import type { AudioDetail } from "~/types/media"
 
 import VCollectionResults from "~/components/VSearchResultsGrid/VCollectionResults.vue"
 
@@ -72,8 +72,18 @@ export default defineComponent({
       fetchMedia({ shouldPersistMedia: true })
     }
 
+    const { pageTitle } = useCollectionMeta({
+      collectionParams,
+      mediaType: "audio",
+      i18n,
+    })
+
     useMeta({
-      meta: [{ hid: "robots", name: "robots", content: "all" }],
+      meta: [
+        { hid: "robots", name: "robots", content: "all" },
+        { hid: "og:title", property: "og:title", content: pageTitle.value },
+      ],
+      title: pageTitle.value,
     })
 
     useFetch(async () => {

frontend/src/pages/image/collection.vue

@@ -28,6 +28,7 @@ import { computed, ref, watch } from "vue"
 import { collectionMiddleware } from "~/middleware/collection"
 import { useMediaStore } from "~/stores/media"
 import { useSearchStore } from "~/stores/search"
+import { useCollectionMeta } from "~/composables/use-collection-meta"
 import { skipToContentTargetId } from "~/constants/window"
 import { useI18n } from "~/composables/use-i18n"
 import type { ImageDetail } from "~/types/media"
@@ -76,10 +77,20 @@ export default defineComponent({
       fetchMedia({ shouldPersistMedia: true })
     }
 
-    useMeta({
-      meta: [{ hid: "robots", name: "robots", content: "all" }],
+    const { pageTitle } = useCollectionMeta({
+      collectionParams,
+      mediaType: "image",
+      i18n,
     })
 
+    useMeta(() => ({
+      meta: [
+        { hid: "robots", name: "robots", content: "all" },
+        { hid: "og:title", property: "og:title", content: pageTitle.value },
+      ],
+      title: pageTitle.value,
+    }))
+
     useFetch(async () => {
       await fetchMedia()
     })

frontend/test/playwright/e2e/seo.spec.ts

@@ -60,11 +60,34 @@ const pages = {
     ogTitle: "Openverse",
     robots: "all",
   },
+  tag: {
+    url: "/image/collection?tag=cat",
+    title: "cat images | Openverse",
+    ogImage: "/openverse-default.jpg",
+    ogTitle: "cat images | Openverse",
+    robots: "all",
+  },
+  source: {
+    url: "/image/collection?source=flickr",
+    title: "Flickr images | Openverse",
+    ogImage: "/openverse-default.jpg",
+    ogTitle: "Flickr images | Openverse",
+    robots: "all",
+  },
+  creator: {
+    url: "/image/collection?source=flickr&creator=strogoscope",
+    title: "strogoscope | Openverse",
+    ogImage: "/openverse-default.jpg",
+    ogTitle: "strogoscope | Openverse",
+    robots: "all",
+  },
 }
 test.describe("page metadata", () => {
   for (const openversePage of Object.values(pages)) {
     test(`${openversePage.url}`, async ({ page }) => {
-      await preparePageForTests(page, "xl")
+      await preparePageForTests(page, "xl", {
+        features: { additional_search_views: "on" },
+      })
       await page.goto(openversePage.url)
       await expect(page).toHaveTitle(openversePage.title)
       const metaDescription = page.locator('meta[name="description"]')