GOTH-617 Add canonical urls to listing pages (#304)

* add canonical urls to pages

Dockerfile

@@ -12,6 +12,7 @@ ARG GA_MEASUREMENT_ID
 ARG GTM_ID
 ARG OPENWEB_SPOT_ID
 ARG OG_IMAGE
+ARG CANONICAL_HOST
 ARG NEWSLETTER_API
 ARG NEWSLETTER_MAIN_LIST_ID
 ARG NEWSLETTER_MULTI_LIST_IDS

components/SectionPageTemplate.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   page: Page
 }>()
 const route = useRoute()
+const config = useRuntimeConfig()
 const sectionSlug = computed(() => route?.params?.sectionSlug as string)
 const loadMoreStoryCount = ref(10)
 const loadMoreContainer = ref('#articleList')
@@ -15,7 +16,10 @@ const pageTitle = `${props.page.title} | Gothamist | News For New Yorkers`
 
 useHead({
   title: pageTitle,
+})
+useServerHead({
   meta: [{ property: 'og:title', content: pageTitle }],
+  link: [{ rel: 'canonical', href: `https://${config.public.CANONICAL_HOST}/${sectionSlug}`}]
 })
 const initialArticles = await findArticlePages({
   sponsored_content: false,
@@ -62,7 +66,7 @@ const newsletterSubmitEvent = () => {
         id="article-recirculation"
         trackingComponentLocation="Section Page Recirculation Module"
         class="my-6"
-        :nativoId="`ntv-section-1`"
+        nativoId="ntv-section-1"
       />
       <div class="mb-6">
         <HtlAd layout="rectangle" slot="htlad-gothamist_interior_midpage_1" />

composables/metadata.ts

@@ -181,6 +181,9 @@ import { ArticlePage, GalleryPage } from './types/Page'
     {
     const config = useRuntimeConfig()
     const metadata = {
+      link: [
+        {rel: 'canonical', href: gallery?.url}
+      ],
       meta: [
         { property: 'og:title', content: `${gallery.socialTitle} - Photo Gallery - Gothamist` },
         { property: 'og:description', content: gallery.socialDescription },

nuxt.config.ts

@@ -98,6 +98,7 @@ export default defineNuxtConfig({
       NEWSLETTER_MAIN_LIST_ID: '65dbec786b',
       NEWSLETTER_MULTI_LIST_IDS: process.env['NEWSLETTER_MULTI_LIST_IDS'] ?? 'Gothamist++Gothamist Membership++Gothamist - Early Addition',
       DEBUG: process.env['DEBUG'] ?? 'false',
+      CANONICAL_HOST: process.env['CANONICAL_HOST'] ?? 'gothamist-vue3demo.gothamist.com',
       donateUrlBase: 'https://pledge.wnyc.org/support/gothamist/?utm_medium=partnersite&utm_source=gothamist',
       OPENWEB_SPOT_ID: process.env['OPENWEB_SPOT_ID'] ?? 'sp_6X1qAIKA',
       OG_IMAGE: process.env['OG_IMAGE'] ?? 'https://gothamist-vue3demo.gothamist.com/gothamist_og.png',

pages/search.vue

@@ -2,11 +2,12 @@
 import { ref, onMounted, watch, nextTick } from 'vue'
 
 const route = useRoute()
+const config = useRuntimeConfig()
 const { $analytics } = useNuxtApp()
 const querySlug = ref(route.query.q)
-const query = ref(querySlug.value || '')
+const query = ref(querySlug.value ?? '')
 
-let articles = ref(
+const articles = ref(
   await searchArticlePages({ q: querySlug.value }).then(({ data }) =>
     normalizeSearchArticlePagesResponse(data)
   )
@@ -48,6 +49,9 @@ useHeadSafe({
 useServerHeadSafe({
   meta: [{ property: 'og:title', content: pageTitle}]
 })
+useServerHead({
+  link: [{rel: 'canonical', href: `https://${config.public.CANONICAL_HOST}/search`}]
+})
 if (query.value) {
   useServerHead({meta: [{name: 'robots', content: 'noindex'}]})
 }

pages/staff/[staffSlug].vue

@@ -5,6 +5,7 @@ import { ArticlePage } from '~~/composables/types/Page';
 
 const { $analytics, $htlbid } = useNuxtApp()
 const route = useRoute()
+const config = useRuntimeConfig()
 const staffSlug = route.params.staffSlug
 // const curatedStaffPage = await findPage(`staff/${staffSlug}`).then(
 //   ({ data }) => data?.value && (normalizeFindPageResponse(data) as StaffPage)
@@ -49,13 +50,13 @@ const loadMoreArticles = async () => {
 
 // find a match of the slug in the articles' authors array and return the matched author's data
 const authorProfileData = articles.value[1]?.authors.find((author) => {
-  if (author.slug === staffSlug) return author
+  return author.slug === staffSlug ? author : false
 })
 
 // formats the name of the author by manipulating the slug. This is used when authorProfileData returns no data
 const getAuthorNameFromSlug = () => {
-  var splitStr = typeof staffSlug === 'string' && staffSlug.toLowerCase().split('-')
-  for (var i = 0; i < splitStr.length; i++) {
+  let splitStr = typeof staffSlug === 'string' && staffSlug.toLowerCase().split('-')
+  for (let i = 0; i < splitStr.length; i++) {
     splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1)
   }
   return splitStr.join(' ')
@@ -86,7 +87,10 @@ const authorName =  authorProfileData?.name || getAuthorNameFromSlug()
 const pageTitle = `Articles by ${authorName} | Gothamist`
 useHead({
   title: pageTitle,
-  meta: [{ property: 'og:title', content: pageTitle}]
+})
+useServerHead({
+  meta: [{ property: 'og:title', content: pageTitle}],
+  link: [{rel: 'canonical', href: `https://${config.public.CANONICAL_HOST}/staff/${staffSlug}`}]
 })
 </script>
 

pages/tags/[tagSlug].vue

@@ -13,6 +13,7 @@ const isPreview = route.query.preview ? true : false
 /* preview */
 
 const { $analytics, $htlbid } = useNuxtApp()
+const config = useRuntimeConfig()
 const tagSlug = isPreview ? previewData.value.slug : route.params.tagSlug
 const initialStoryCount = ref(10)
 const loadMoreStoryCount = ref(10)
@@ -100,7 +101,8 @@ useHead({
   title: curatedTagPage?.seoTitle || pageTitle,
 })
 useServerHead({
-  meta: [{ property: 'og:title', content: curatedTagPage?.socialTitle || pageTitle}]
+  meta: [{ property: 'og:title', content: curatedTagPage?.socialTitle || pageTitle}],
+  link: [{rel: 'canonical', href: `https://${config.public.CANONICAL_HOST}/tags/${tagSlug}`}]
 })
 </script>