Merge pull request #143 from WebDevStudios/feature/33-breadcrumbs

Feature/33 breadcrumbs

Author: Greg Rickaby

api/wordpress/_global/getPostTypeTaxonomyArchive.js

@@ -102,18 +102,26 @@ export default async function getPostTypeTaxonomyArchive(
       // Flatten posts array to include inner node post data.
       response.posts = posts.map((post) => post.node)
 
+      // Use final breadcrumb as alternative canonical URL.
+      const breadcrumb =
+        archiveSeo?.breadcrumbs &&
+        archiveSeo.breadcrumbs.length > 0 &&
+        archiveSeo.breadcrumbs.slice(-1)[0]?.url
+
+      // Manually create fallback taxonomy canonical URL.
+      const fallback = `${response.defaultSeo?.openGraph?.url ?? ''}/${
+        postTypes?.[postType]?.route
+      }/${taxonomy}/${taxonomyId}`
+
       // Structure archive SEO.
       response.post = {
         seo: {
+          ...archiveSeo,
           title:
             archiveSeo?.title ??
             `${taxonomyId} - ${response.defaultSeo?.openGraph?.siteName ?? ''}`,
           metaDesc: archiveSeo?.metaDesc ?? '',
-          canonical:
-            archiveSeo?.canonical ??
-            `${response.defaultSeo?.openGraph?.url ?? ''}/${
-              postTypes?.[postType]?.route
-            }/${taxonomy}/${taxonomyId}`,
+          canonical: archiveSeo?.canonical ?? breadcrumb ?? fallback,
           metaRobotsNofollow: archiveSeo?.metaRobotsNofollow ?? 'follow',
           metaRobotsNoindex: archiveSeo?.metaRobotsNoindex ?? 'index'
         }

api/wordpress/_global/postTypes.js

@@ -1,9 +1,5 @@
 // Define valid WP post types (singular and plural GraphQL names).
 export const postTypes = {
-  comment: {
-    pluralName: 'comments',
-    route: null
-  },
   mediaItem: {
     pluralName: 'mediaItems',
     route: null

api/wordpress/_partials/seoPostFields.js

@@ -1,6 +1,10 @@
 // Query partial: retrieve SEO post fields.
 const seoPostFields = `
   seo {
+    breadcrumbs {
+      text
+      url
+    }
     canonical
     title
     metaDesc

components/common/Layout.js

@@ -28,6 +28,9 @@ export default function Layout({children, seo, hasJsonLd}) {
         }
       ]
 
+  // Extract breadcrumbs from SEO.
+  const breadcrumbs = seo?.breadcrumbs
+
   return (
     <>
       <NextSeo
@@ -55,7 +58,21 @@ export default function Layout({children, seo, hasJsonLd}) {
       )}
       <Meta />
       <Header />
-      <main>{children}</main>
+      <main>
+        {/* TODO: extract breadcrumbs to component and make pretty. */}
+        {!!breadcrumbs && !!breadcrumbs.length && (
+          <div>
+            {breadcrumbs.map((breadcrumb, index) => (
+              <span key={index}>
+                <a href={breadcrumb?.url}>{breadcrumb?.text}</a>
+                {index < breadcrumbs.length - 1 && <span> &raquo; </span>}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {children}
+      </main>
       <Footer social={seo?.social} siteTitle={seo?.siteTitle} />
     </>
   )

functions/getPagePropTypes.js

@@ -21,11 +21,9 @@ export const seoSocialPropTypes = {
 // Yoast SEO prop types.
 export const seoPropTypes = {
   seo: PropTypes.shape({
-    siteTitle: PropTypes.string,
-    siteDescription: PropTypes.string,
-    title: PropTypes.string,
+    breadcrumbs: PropTypes.array,
+    canonical: PropTypes.string,
     description: PropTypes.string,
-    url: PropTypes.string,
     metaRobotsIndex: PropTypes.string,
     metaRobotsFollow: PropTypes.string,
     opengraphAuthor: PropTypes.string,
@@ -35,6 +33,10 @@ export const seoPropTypes = {
       altText: PropTypes.string,
       sourceUrl: PropTypes.string
     }),
+    siteTitle: PropTypes.string,
+    siteDescription: PropTypes.string,
+    title: PropTypes.string,
+    url: PropTypes.string,
     ...seoSocialPropTypes
   })
 }