feat: add open graph with templateTitle

SuperSuperDev · Oct 17, 2021 · aa58d72 · aa58d72
1 parent 44c3e5e
commit aa58d72
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 12 deletions.
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -5,7 +5,7 @@ import { openGraph } from '@/lib/helper';
 
 const defaultMeta = {
   title: 'Next.js + Tailwind CSS + TypeScript Starter',
-  site_name: 'Next.js + Tailwind CSS + TypeScript Starter',
+  siteName: 'Next.js + Tailwind CSS + TypeScript Starter',
   description:
     ' A starter for Next.js, Tailwind CSS, and TypeScript with Absolute Import, Seo, Link component, pre-configured with Husky',
   url: 'https://tsnext-tw.thcl.dev',
@@ -26,9 +26,13 @@ export default function Seo(props: SeoProps) {
     ...props,
   };
   meta['title'] = props.templateTitle
-    ? `${props.templateTitle} | ${meta.site_name}`
+    ? `${props.templateTitle} | ${meta.siteName}`
     : meta.title;
-  meta.image = openGraph(meta.title, meta.description);
+  meta.image = openGraph({
+    siteName: defaultMeta.siteName,
+    description: defaultMeta.description,
+    templateTitle: props.templateTitle,
+  });
 
   return (
     <Head>
@@ -39,7 +43,7 @@ export default function Seo(props: SeoProps) {
       <link rel='canonical' href={`${meta.url}${router.asPath}`} />
       {/* Open Graph */}
       <meta property='og:type' content={meta.type} />
-      <meta property='og:site_name' content={meta.site_name} />
+      <meta property='og:site_name' content={meta.siteName} />
       <meta property='og:description' content={meta.description} />
       <meta property='og:title' content={meta.title} />
       <meta name='image' property='og:image' content={meta.image} />

diff --git a/src/lib/helper.ts b/src/lib/helper.ts
@@ -2,13 +2,26 @@ export function classNames(...classes: string[]): string {
   return classes.filter(Boolean).join(' ');
 }
 
-export function openGraph(
-  title: string,
-  description: string,
-  logo = 'https://og.thcl.dev/images/logo.jpg'
-): string {
+type OpenGraphType = {
+  siteName: string;
+  description: string;
+  templateTitle?: string;
+  logo?: string;
+};
+export function openGraph({
+  siteName,
+  templateTitle,
+  description,
+  logo = 'https://og.thcl.dev/images/logo.jpg',
+}: OpenGraphType): string {
   const ogLogo = encodeURIComponent(logo);
-  const ogTitle = encodeURIComponent(title.trim());
+  const ogSiteName = encodeURIComponent(siteName.trim());
+  const ogTemplateTitle = templateTitle
+    ? encodeURIComponent(templateTitle.trim())
+    : undefined;
   const ogDesc = encodeURIComponent(description.trim());
-  return `https://og.thcl.dev/api/general?title=${ogTitle}&description=${ogDesc}&logo=${ogLogo}`;
+
+  return `https://og.thcl.dev/api/general?siteName=${ogSiteName}&description=${ogDesc}&logo=${ogLogo}${
+    ogTemplateTitle ? `&templateTitle=${ogTemplateTitle}` : ''
+  }`;
 }
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -8,7 +8,8 @@ import Seo from '@/components/Seo';
 export default function HomePage() {
   return (
     <>
-      <Seo templateTitle='Home' />
+      {/* <Seo templateTitle='Home' /> */}
+      <Seo />
 
       <main>
         <section className='bg-dark'>