diff --git a/.changeset/early-fishes-tell.md b/.changeset/early-fishes-tell.md new file mode 100644 index 000000000..31460ee61 --- /dev/null +++ b/.changeset/early-fishes-tell.md @@ -0,0 +1,5 @@ +--- +"@bigcommerce/catalyst-core": minor +--- + +Use default SEO settings from store for pages without SEO information specified, normalize SEO implementation across pages diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts index e3da0f077..281e67cd3 100644 --- a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts +++ b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page-data.ts @@ -9,6 +9,11 @@ const BrandQuery = graphql(` site { brand(entityId: $entityId) { name + seo { + pageTitle + metaDescription + metaKeywords + } } } } diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx index 129f037d5..148ddca6f 100644 --- a/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx +++ b/core/app/[locale]/(default)/(faceted)/brand/[slug]/page.tsx @@ -27,10 +27,16 @@ export async function generateMetadata({ params }: Props): Promise { const brand = await getBrand({ entityId: brandId }); - const title = brand?.name; + if (!brand) { + return {}; + } + + const { pageTitle, metaDescription, metaKeywords } = brand.seo; return { - title, + title: pageTitle || brand.name, + description: metaDescription, + keywords: metaKeywords ? metaKeywords.split(',') : null, }; } diff --git a/core/app/[locale]/(default)/(faceted)/brand/[slug]/static/page.tsx b/core/app/[locale]/(default)/(faceted)/brand/[slug]/static/page.tsx index 06b6e3cd7..41d1a0b64 100644 --- a/core/app/[locale]/(default)/(faceted)/brand/[slug]/static/page.tsx +++ b/core/app/[locale]/(default)/(faceted)/brand/[slug]/static/page.tsx @@ -11,6 +11,8 @@ import BrandPage from '../page'; export default BrandPage; +export { generateMetadata } from '../page'; + const BrandsQuery = graphql(` query BrandsQuery($first: Int, $entityIds: [Int!]) { site { diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts b/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts index 55882efce..c21f7bc56 100644 --- a/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts +++ b/core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts @@ -15,6 +15,11 @@ const CategoryPageQuery = graphql( category(entityId: $categoryId) { name ...BreadcrumbsFragment + seo { + pageTitle + metaDescription + metaKeywords + } } ...CategoryTreeFragment } diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx index cd039b2da..bf43da077 100644 --- a/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx +++ b/core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx @@ -31,10 +31,18 @@ export async function generateMetadata({ params }: Props): Promise { categoryId, }); - const title = data.category?.name; + const category = data.category; + + if (!category) { + return {}; + } + + const { pageTitle, metaDescription, metaKeywords } = category.seo; return { - title, + title: pageTitle || category.name, + description: metaDescription, + keywords: metaKeywords ? metaKeywords.split(',') : null, }; } diff --git a/core/app/[locale]/(default)/(faceted)/category/[slug]/static/page.tsx b/core/app/[locale]/(default)/(faceted)/category/[slug]/static/page.tsx index ac2b4f947..23138ec18 100644 --- a/core/app/[locale]/(default)/(faceted)/category/[slug]/static/page.tsx +++ b/core/app/[locale]/(default)/(faceted)/category/[slug]/static/page.tsx @@ -12,6 +12,8 @@ import CategoryPage from '../page'; export default CategoryPage; +export { generateMetadata } from '../page'; + const CategoryTreeQuery = graphql( ` query CategoryTreeQuery($categoryId: Int) { diff --git a/core/app/[locale]/(default)/blog/[blogId]/page-data.ts b/core/app/[locale]/(default)/blog/[blogId]/page-data.ts index 7ae1f6789..477011034 100644 --- a/core/app/[locale]/(default)/blog/[blogId]/page-data.ts +++ b/core/app/[locale]/(default)/blog/[blogId]/page-data.ts @@ -26,6 +26,8 @@ const BlogPageQuery = graphql( } seo { pageTitle + metaDescription + metaKeywords } } } diff --git a/core/app/[locale]/(default)/blog/[blogId]/page.tsx b/core/app/[locale]/(default)/blog/[blogId]/page.tsx index 288c2f25b..395519725 100644 --- a/core/app/[locale]/(default)/blog/[blogId]/page.tsx +++ b/core/app/[locale]/(default)/blog/[blogId]/page.tsx @@ -21,10 +21,16 @@ export async function generateMetadata({ params: { blogId } }: Props): Promise { const blogPosts = await getBlogPosts(searchParams); - const title = blogPosts?.name ?? 'Blog'; - return { - title, + title: blogPosts?.name ?? 'Blog', + description: + blogPosts?.description && blogPosts.description.length > 150 + ? `${blogPosts.description.substring(0, 150)}...` + : blogPosts?.description, }; } diff --git a/core/app/[locale]/(default)/webpages/contact/[id]/page.tsx b/core/app/[locale]/(default)/webpages/contact/[id]/page.tsx index b4685ff7a..201359bc1 100644 --- a/core/app/[locale]/(default)/webpages/contact/[id]/page.tsx +++ b/core/app/[locale]/(default)/webpages/contact/[id]/page.tsx @@ -51,15 +51,15 @@ export async function generateMetadata({ params }: Props): Promise { const webpage = data.node?.__typename === 'ContactPage' ? data.node : null; if (!webpage) { - notFound(); + return {}; } - const { seo } = webpage; + const { pageTitle, metaDescription, metaKeywords } = webpage.seo; return { - title: seo.pageTitle, - description: seo.metaDescription, - keywords: seo.metaKeywords, + title: pageTitle, + description: metaDescription, + keywords: metaKeywords, }; } diff --git a/core/app/[locale]/(default)/webpages/normal/[id]/page.tsx b/core/app/[locale]/(default)/webpages/normal/[id]/page.tsx index 921c61e76..7775ce863 100644 --- a/core/app/[locale]/(default)/webpages/normal/[id]/page.tsx +++ b/core/app/[locale]/(default)/webpages/normal/[id]/page.tsx @@ -46,15 +46,15 @@ export async function generateMetadata({ params: { id } }: Props): Promise { fetchOptions: { next: { revalidate } }, }); - const title = data.site.settings?.storeName ?? ''; + const storeName = data.site.settings?.storeName ?? ''; + + const { pageTitle, metaDescription, metaKeywords } = data.site.settings?.seo || {}; return { title: { - template: `${title} - %s`, - default: title, + template: `%s - ${storeName}`, + default: pageTitle || storeName, }, + description: metaDescription, + keywords: metaKeywords ? metaKeywords.split(',') : null, other: { platform: 'bigcommerce.catalyst', build_sha: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA ?? '',