refactor: refactor og-related components

src/components/SEO/SEO.tsx

@@ -39,6 +39,7 @@ export default function SEO({
   image?.alt && ogSearchParams.set('alt', image?.alt || '')
   contentType && ogSearchParams.set('contentType', contentType)
   date && ogSearchParams.set('date', date || '')
+  pagePath && ogSearchParams.set('pagePath', pagePath || '')
 
   const ogUrl = `${imageUrl}?${ogSearchParams.toString()}`
 
@@ -62,11 +63,7 @@ export default function SEO({
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:url" content={pageURL ?? `${SITE_URL}${pagePath}`} />
       <meta name="twitter:site" content="@TWITTERHANDLE" />
-      {image ? (
+      <meta property="twitter:image" content={ogUrl} />
-        <meta name="twitter:image" content={image.url} />
-      ) : (
-        <meta property="twitter:image" content={imageUrl} />
-      )}
       <link rel="canonical" href={`${SITE_URL}${pagePath}`} />
     </Head>
   )

src/pages/404.tsx

@@ -11,6 +11,7 @@ const NotFoundPage = () => {
         description={'Description'}
         imageUrl={undefined}
         tags={[]}
+        pagePath={`/404`}
       />
       <NotFound />
     </>

src/pages/[slug].tsx

@@ -32,6 +32,7 @@ const Page: CustomNextPage<PageProps> = ({
           'Logos online publishing and blogging platform for writers and readers.'
         }
         title={`${data.page.title} - Logos Press Engine`}
+        pagePath={`/${data.page.slug}`}
       />
       <StaticPage data={data} />
     </>

src/pages/api/og.tsx

@@ -21,10 +21,12 @@ export default async function handler(request: NextRequest) {
   ).then((res) => res.arrayBuffer())
 
   const searchParams = new URL(href).searchParams
-  const title = searchParams.get('title') || 'LOGOS→PRESS ENGINE'
+  const contentType = searchParams.get('contentType')
+  const title =
+    contentType == null ? 'LOGOS→PRESS ENGINE' : searchParams.get('title')
   const image = searchParams.get('image') || ''
   const alt = searchParams.get('alt') || ''
-  const contentType = searchParams.get('contentType')
+  const pagePath = searchParams.get('pagePath') || '/'
   const date = searchParams.get('date')
 
   const imgSrc = image
@@ -120,7 +122,7 @@ export default async function handler(request: NextRequest) {
                 fontFamily: 'Inter',
               }}
             >
-              <p>{contentType ?? '/'}</p>
+              <p>{contentType ?? pagePath}</p>
               {date && <p>∙</p>}
               {date && <p>{`${day} ${month} ${year}`}</p>}
             </div>

src/pages/search.tsx

@@ -90,6 +90,7 @@ export default function SearchPage({ topics, shows }: SearchPageProps) {
           'Logos online publishing and blogging platform for writers and readers.'
         }
         title={'Logos Press Engine'}
+        pagePath={`/search`}
       />
       <SearchBox
         tags={topics}