SEO - Use customer logo as default SEO meta image (Twitter/OG)

UnlyEd · Feb 2, 2021 · 888b795 · 888b795 · github-actions · Feb 2, 2021
1 parent facfae6
commit 888b795
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/src/layouts/core/components/Head.tsx b/src/layouts/core/components/Head.tsx
@@ -1,12 +1,14 @@
-import { isBrowser } from '@unly/utils';
-import NextHead from 'next/head';
-import React from 'react';
 import {
   NRN_DEFAULT_FONT,
   NRN_DEFAULT_SERVICE_LABEL,
 } from '@/app/constants';
-import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale';
+import useCustomer from '@/modules/core/data/hooks/useCustomer';
+import { Customer } from '@/modules/core/data/types/Customer';
 import { SUPPORTED_LOCALES } from '@/modules/core/i18n/i18n';
+import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale';
+import { isBrowser } from '@unly/utils';
+import NextHead from 'next/head';
+import React from 'react';
 
 export type HeadProps = {
   /**
@@ -66,9 +68,11 @@ export type HeadProps = {
  * https://github.com/vercel/next.js#populating-head
  */
 const Head: React.FunctionComponent<HeadProps> = (props): JSX.Element => {
+  const customer: Customer = useCustomer();
+
   const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Vercel and TypeScript. Includes multiple opt-in presets using Storybook, Airtable, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
   const defaultMetaURL = 'https://github.com/UnlyEd/next-right-now';
-  const defaultMetaImage = '';
+  const defaultMetaImage = customer?.theme?.logo?.url;
   const defaultFavicon = '/favicon.ico';
 
   const {

diff --git a/src/layouts/demo/components/DemoHead.tsx b/src/layouts/demo/components/DemoHead.tsx
@@ -1,12 +1,14 @@
-import { isBrowser } from '@unly/utils';
-import NextHead from 'next/head';
-import React from 'react';
 import {
   NRN_DEFAULT_FONT,
   NRN_DEFAULT_SERVICE_LABEL,
 } from '@/app/constants';
-import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale';
+import useCustomer from '@/modules/core/data/hooks/useCustomer';
+import { Customer } from '@/modules/core/data/types/Customer';
 import { SUPPORTED_LOCALES } from '@/modules/core/i18n/i18n';
+import { I18nLocale } from '@/modules/core/i18n/types/I18nLocale';
+import { isBrowser } from '@unly/utils';
+import NextHead from 'next/head';
+import React from 'react';
 
 export type HeadProps = {
   seoTitle?: string;
@@ -30,9 +32,11 @@ export type HeadProps = {
  * https://github.com/vercel/next.js#populating-head
  */
 const DemoHead: React.FunctionComponent<HeadProps> = (props): JSX.Element => {
+  const customer: Customer = useCustomer();
+
   const defaultDescription = 'Flexible production-grade boilerplate with Next.js 9, Vercel and TypeScript. Includes multiple opt-in presets using Storybook, Airtable, Analytics, CSS-in-JS, Monitoring, End-to-end testing, Internationalization, CI/CD and SaaS B2B multiple single-tenants (monorepo) support';
   const defaultMetaURL = 'https://github.com/UnlyEd/next-right-now';
-  const defaultMetaImage = '';
+  const defaultMetaImage = customer?.theme?.logo?.url;
   const defaultFavicon = '/favicon.ico';
 
   const {

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -69,7 +69,7 @@ class AppDocument extends Document<DocumentRenderProps> {
     const initialProps: DocumentInitialProps = await Document.getInitialProps(ctx);
     const { query } = ctx;
     const hasLocaleFromUrl = !!query?.locale;
-    const locale: string = hasLocaleFromUrl ? query?.locale as string : DEFAULT_LOCALE; // If the locale isn't found (e.g: 404 page)
+    const locale: string = hasLocaleFromUrl ? query?.locale as string : DEFAULT_LOCALE; // Fallback to default locale if the locale isn't found (e.g: 404 page)
     const lang: string = locale.split('-')?.[0];
 
     return {