acid-info
/
logos-press-engine
mirror of https://github.com/acid-info/logos-press-engine.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: implement SEO component

This commit is contained in:
jinhojang6 2023-05-10 23:15:55 +09:00 committed by Jinho Jang
parent 8fd015c95f
commit 56afa5d3e8
4 changed files with 53 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/SEO/SEO.tsx Normal file
View File

@ -0,0 +1,44 @@
import Head from 'next/head'
type Metadata = {
title: string
description: string
type?: string
locale?: string
site_name?: string
pageURL?: string
imageUrl?: string
}
export default function SEO({
title,
description,
type,
locale,
site_name,
pageURL,
imageUrl,
}: Metadata) {
return (
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:locale" content={locale ?? 'en-US'} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type ?? 'website'} />
<meta property="og:url" content={pageURL ?? 'https://press.logos.co'} />
<meta
property="og:site_name"
content={site_name ?? 'Logos Press Engine'}
/>
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
{imageUrl && <meta property="og:image" content={imageUrl} />}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://press.logos.co" />
<meta name="twitter:site" content="@TWITTERHANDLE" />
{imageUrl && <meta property="twitter:image" content={imageUrl} />}
</Head>
)
}

1
src/components/SEO/index.ts Normal file
View File

@ -0,0 +1 @@
export { default as SEO } from './SEO'

1
src/pages/_app.tsx
View File

@ -36,6 +36,7 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<meta property="og:image" content="https://press.logos.co/api/og" />
<link rel="canonical" href="https://press.logos.co" />
</Head>
<Global
styles={css`

9
src/pages/article/[remoteId].tsx
View File

@ -2,9 +2,9 @@ import { GetStaticPropsContext } from 'next'
import { ArticleLayout } from '@/layouts/ArticleLayout'
import { ReactNode } from 'react'
import ArticleContainer from '@/containers/ArticleContainer'
import { UnbodyGoogleDoc, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
import api from '@/services/unbody.service'
import { ArticlePostData } from '@/types/data.types'
import { SEO } from '@/components/SEO'
type ArticleProps = {
data: ArticlePostData | null
@ -32,7 +32,12 @@ export const getStaticProps = async ({ params }: GetStaticPropsContext) => {
const ArticlePage = (props: ArticleProps) => {
if (!props.data) return <div style={{ height: '100vh' }} />
return <ArticleContainer data={props.data} error={props.error} />
return (
<>
<SEO title={props.data.title} description={props.data.summary} />
<ArticleContainer data={props.data} error={props.error} />
</>
)
}
export async function getStaticPaths() {