jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace next-seo with custom header

Browse Source
This commit is contained in:
Timothy Lin
2021-06-22 23:51:41 +08:00
parent 322ddc4a2d
commit 04ad7617de
11 changed files with 50 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
components/SEO.js
View File

@ -1,53 +1,31 @@
import { NextSeo, ArticleJsonLd } from 'next-seo'
import Head from 'next/head'
import { useRouter } from 'next/router'
import siteMetadata from '@/data/siteMetadata'
export const SEO = {
title: siteMetadata.title,
description: siteMetadata.description,
openGraph: {
type: 'website',
locale: siteMetadata.language,
url: siteMetadata.siteUrl,
title: siteMetadata.title,
description: siteMetadata.description,
images: [
{
url: `${siteMetadata.siteUrl}${siteMetadata.socialBanner}`,
alt: siteMetadata.title,
width: 1200,
height: 600,
},
],
},
twitter: {
handle: siteMetadata.twitter,
site: siteMetadata.twitter,
cardType: 'summary_large_image',
},
additionalMetaTags: [
{
name: 'author',
content: siteMetadata.author,
},
],
}
export const PageSeo = ({ title, description, url }) => {
export const PageSeo = ({ title, description }) => {
const router = useRouter()
return (
<NextSeo
title={`${title} – ${siteMetadata.title}`}
description={description}
canonical={url}
openGraph={{
url,
title,
description,
}}
/>
<Head>
<title>{`${title}`}</title>
<meta name="robots" content="follow, index" />
<meta name="description" content={description} />
<meta property="og:url" content={`${siteMetadata.siteUrl}${router.asPath}`} />
<meta property="og:type" content="website" />
<meta property="og:site_name" content={siteMetadata.title} />
<meta property="og:description" content={description} />
<meta property="og:title" content={title} />
<meta property="og:image" content={`${siteMetadata.siteUrl}${siteMetadata.socialBanner}`} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={siteMetadata.twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={`${siteMetadata.siteUrl}${siteMetadata.socialBanner}`} />
</Head>
)
}
export const BlogSeo = ({ title, summary, date, lastmod, url, tags, images = [] }) => {
export const BlogSeo = ({ title, summary, date, lastmod, images = [] }) => {
const router = useRouter()
const publishedAt = new Date(date).toISOString()
const modifiedAt = new Date(lastmod || date).toISOString()
let imagesArr =
@ -66,40 +44,27 @@ export const BlogSeo = ({ title, summary, date, lastmod, url, tags, images = []
return (
<>
<NextSeo
title={`${title} – ${siteMetadata.title}`}
description={summary}
canonical={url}
openGraph={{
type: 'article',
article: {
publishedTime: publishedAt,
modifiedTime: modifiedAt,
authors: [`${siteMetadata.siteUrl}/about`],
tags,
},
url,
title,
description: summary,
images: featuredImages,
}}
additionalMetaTags={[
{
name: 'twitter:image',
content: featuredImages[0].url,
},
]}
/>
<ArticleJsonLd
authorName={siteMetadata.author}
dateModified={modifiedAt}
datePublished={publishedAt}
description={summary}
images={featuredImages}
publisherName={siteMetadata.author}
title={title}
url={url}
/>
<Head>
<title>{`${title}`}</title>
<meta name="robots" content="follow, index" />
<meta name="description" content={summary} />
<meta property="og:url" content={`${siteMetadata.siteUrl}${router.asPath}`} />
<meta property="og:type" content="article" />
<meta property="og:site_name" content={siteMetadata.title} />
<meta property="og:description" content={summary} />
<meta property="og:title" content={title} />
{featuredImages.map((img) => (
<meta property="og:image" content={img.url} key={img.url} />
))}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content={siteMetadata.twitter} />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={summary} />
<meta name="twitter:image" content={featuredImages[0].url} />
{date && <meta property="article:published_time" content={publishedAt} />}
{lastmod && <meta property="article:modified_time" content={modifiedAt} />}
<link rel="canonical" href={`${siteMetadata.siteUrl}${router.asPath}`} />
</Head>
</>
)
}