diff --git a/packages/nuxt-ripple/plugins/social-meta.ts b/packages/nuxt-ripple/plugins/social-meta.ts index 10934eae1f..7454915a98 100644 --- a/packages/nuxt-ripple/plugins/social-meta.ts +++ b/packages/nuxt-ripple/plugins/social-meta.ts @@ -12,7 +12,7 @@ export default defineNuxtPlugin((nuxtApp) => { const site = props.site const pageTitle = computed(() => { - const titleOfPage = `${props.pageTitle || props.page?.title}` + const titleOfPage = `${props.pageTitle || props.page?.title || ''}` const titleOfSite = `${props.site?.name}` if (titleOfPage && titleOfSite) { return `${titleOfPage} | ${titleOfSite}` @@ -20,108 +20,114 @@ export default defineNuxtPlugin((nuxtApp) => { return titleOfSite }) - // Additional s in head - const links = [] - const additionalMeta = page.meta?.additional || [] - - additionalMeta - .filter((attr: any) => attr.tag === 'link') - .map((attr: any) => { - if (attr.attributes.rel) links.push(attr.attributes) + if (!page) { + useHead({ + title: pageTitle }) + } else { + // Additional s in head + const links = [] + const additionalMeta = page?.meta?.additional || [] - // Define basic attributes - useHead({ - link: links - }) + additionalMeta + .filter((attr: any) => attr.tag === 'link') + .map((attr: any) => { + if (attr.attributes.rel) links.push(attr.attributes) + }) - // Override API values with metatag - const metaDescriptions = { - ogDescription: '', - description: '' - }, - metaOverrides = {} - additionalMeta - .filter( - (attr: any) => attr.tag === 'meta' && attr.attributes.name !== 'title' - ) - .map((attr: any) => { - if (attr.attributes.name || attr.attributes.property) - if ( - ['ogDescription', 'description'].includes( - metaProperty(attr.attributes.name || attr.attributes.property) - ) - ) { - // Keep description fields in a separate collection - metaDescriptions[ - metaProperty(attr.attributes.name || attr.attributes.property) - ] = attr.attributes.content - } else { - metaOverrides[ - metaProperty(attr.attributes.name || attr.attributes.property) - ] = attr.attributes.content - } + // Define basic attributes + useHead({ + link: links }) - // Determine unified description - let description = page.meta?.description + // Override API values with metatag + const metaDescriptions = { + ogDescription: '', + description: '' + }, + metaOverrides = {} + additionalMeta + .filter( + (attr: any) => attr.tag === 'meta' && attr.attributes.name !== 'title' + ) + .map((attr: any) => { + if (attr.attributes.name || attr.attributes.property) + if ( + ['ogDescription', 'description'].includes( + metaProperty(attr.attributes.name || attr.attributes.property) + ) + ) { + // Keep description fields in a separate collection + metaDescriptions[ + metaProperty(attr.attributes.name || attr.attributes.property) + ] = attr.attributes.content + } else { + metaOverrides[ + metaProperty(attr.attributes.name || attr.attributes.property) + ] = attr.attributes.content + } + }) - if (metaDescriptions.ogDescription !== '') { - description = metaDescriptions.ogDescription - } else if (metaDescriptions.description !== '') { - description = metaDescriptions.description - } + // Determine unified description + let description = page.meta?.description - // Determine images - let featuredImage = '', - featuredImageAlt = '' - if (page.meta?.image) { - featuredImage = page.meta.image.src - featuredImageAlt = page.meta.image.alt - } else if (site.socialImages.og) { - featuredImage = site.socialImages.og.src - featuredImageAlt = site.socialImages.og.alt - } + if (metaDescriptions.ogDescription !== '') { + description = metaDescriptions.ogDescription + } else if (metaDescriptions.description !== '') { + description = metaDescriptions.description + } - let twitterImage = '', - twitterImageAlt = '' - if (page.meta?.image) { - twitterImage = page.meta.image.src - twitterImageAlt = page.meta.image.alt - } else if (site.socialImages.twitter) { - twitterImage = site.socialImages.twitter.src - twitterImageAlt = site.socialImages.twitter.alt - } else if (site.socialImages.og) { - twitterImage = site.socialImages.og.src - twitterImageAlt = site.socialImages.og.alt - } + // Determine images + let featuredImage = '', + featuredImageAlt = '' + if (page.meta?.image) { + featuredImage = page.meta.image.src + featuredImageAlt = page.meta.image.alt + } else if (site.socialImages.og) { + featuredImage = site.socialImages.og.src + featuredImageAlt = site.socialImages.og.alt + } - const { $app_origin } = useNuxtApp() + let twitterImage = '', + twitterImageAlt = '' + if (page.meta?.image) { + twitterImage = page.meta.image.src + twitterImageAlt = page.meta.image.alt + } else if (site.socialImages.twitter) { + twitterImage = site.socialImages.twitter.src + twitterImageAlt = site.socialImages.twitter.alt + } else if (site.socialImages.og) { + twitterImage = site.socialImages.og.src + twitterImageAlt = site.socialImages.og.alt + } - // Define SEO meta - useSeoMeta({ - title: () => pageTitle.value, - description: () => description, - ogTitle: props.pageTitle, - ogDescription: description, - ogType: 'website', - ogUrl: $app_origin + page.meta?.url, - ogImage: featuredImage, - ogImageAlt: featuredImageAlt, - twitterCard: 'summary', - twitterSite: $app_origin, - twitterTitle: props.pageTitle, - twitterDescription: description, - twitterImage: twitterImage, - twitterImageAlt: twitterImageAlt, - keywords: page.meta?.keywords, + const { $app_origin } = useNuxtApp() - // Custom props - sitesection: props.siteSection ? props.siteSection.name : null, - 'content-type': page.type && page.type.replace('node--', ''), + // Define SEO meta + useSeoMeta({ + title: () => pageTitle.value, + description: () => description, + ogTitle: props.pageTitle, + ogDescription: description, + ogType: 'website', + ogUrl: $app_origin + page.meta?.url, + ogImage: featuredImage, + ogImageAlt: featuredImageAlt, + twitterCard: 'summary', + twitterSite: $app_origin, + twitterTitle: props.pageTitle, + twitterDescription: description, + twitterImage: twitterImage, + twitterImageAlt: twitterImageAlt, + keywords: page.meta?.keywords, - // Metatag escape hatch - ...metaOverrides - }) + // Custom props + sitesection: props.siteSection ? props.siteSection.name : null, + 'content-type': page.type && page.type.replace('node--', ''), + + // Metatag escape hatch + ...metaOverrides + }) + } }) }) diff --git a/packages/ripple-tide-search/components/TideSearchPage.vue b/packages/ripple-tide-search/components/TideSearchPage.vue index d371baf1f9..ed3a745b34 100644 --- a/packages/ripple-tide-search/components/TideSearchPage.vue +++ b/packages/ripple-tide-search/components/TideSearchPage.vue @@ -199,7 +199,7 @@ watch(