Merge pull request #817 from tszhong0411/app-14-add-more-json-ld

feat(web): add json-ld for all pages

apps/web/src/app/about/page.tsx

@@ -1,9 +1,20 @@
 import { allPages } from 'mdx/generated'
 import type { Metadata, ResolvingMetadata } from 'next'
 import { notFound } from 'next/navigation'
+import type { AboutPage, WithContext } from 'schema-dts'
 
 import Mdx from '@/components/mdx'
 import PageTitle from '@/components/page-title'
+import {
+ SITE_DESCRIPTION,
+ SITE_FACEBOOK_URL,
+ SITE_GITHUB_URL,
+ SITE_INSTAGRAM_URL,
+ SITE_NAME,
+ SITE_URL,
+ SITE_X_URL,
+ SITE_YOUTUBE_URL
+} from '@/lib/constants'
 
 const title = 'About'
 const description = '👋 Hi there! I am Hong, a student who loves web development.'
@@ -41,6 +52,21 @@ export const generateMetadata = async (
  }
 }
 
+const jsonLd: WithContext<AboutPage> = {
+ '@context': 'https://schema.org',
+ '@type': 'AboutPage',
+ name: title,
+ description,
+ url: `${SITE_URL}/about`,
+ mainEntity: {
+ '@type': 'Person',
+ name: SITE_NAME,
+ description: SITE_DESCRIPTION,
+ url: SITE_URL,
+ sameAs: [SITE_FACEBOOK_URL, SITE_INSTAGRAM_URL, SITE_X_URL, SITE_GITHUB_URL, SITE_YOUTUBE_URL]
+ }
+}
+
 const Page = () => {
  const page = allPages.find((p) => p.slug === 'about')
 
@@ -52,6 +78,10 @@ const Page = () => {
 
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <PageTitle title={title} description={description} />
  <Mdx content={body} />
  </>

apps/web/src/app/blog/[slug]/page.tsx

@@ -108,9 +108,10 @@ const Page = async (props: PageProps) => {
  const jsonLd: WithContext<Article> = {
  '@context': 'https://schema.org',
  '@type': 'Article',
-
  headline: title,
+ name: title,
  description: summary,
+ url: `${SITE_URL}/blog/${slug}`,
  datePublished: date,
  dateModified: modifiedTime,
  image: `${SITE_URL}/og/${slug}`,

apps/web/src/app/blog/page.tsx

@@ -1,8 +1,10 @@
 import { allBlogPosts } from 'mdx/generated'
 import type { Metadata, ResolvingMetadata } from 'next'
+import type { Blog, WithContext } from 'schema-dts'
 
 import FilteredPosts from '@/components/filtered-posts'
 import PageTitle from '@/components/page-title'
+import { SITE_NAME, SITE_URL } from '@/lib/constants'
 
 const title = 'Blog'
 const description =
@@ -13,6 +15,27 @@ type PageProps = {
  searchParams: Record<string, never>
 }
 
+const jsonLd: WithContext<Blog> = {
+ '@context': 'https://schema.org',
+ '@type': 'Blog',
+ '@id': `${SITE_URL}/blog`,
+ name: title,
+ description,
+ url: `${SITE_URL}/blog`,
+ author: {
+ '@type': 'Person',
+ name: SITE_NAME,
+ url: SITE_URL
+ },
+ blogPost: allBlogPosts.map((post) => ({
+ '@type': 'BlogPosting',
+ headline: post.title,
+ url: `${SITE_URL}/blog/${post.slug}`,
+ datePublished: post.date,
+ dateModified: post.modifiedTime
+ }))
+}
+
 export const generateMetadata = async (
  _: PageProps,
  parent: ResolvingMetadata
@@ -47,6 +70,10 @@ const Page = () => {
 
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <PageTitle title={title} description={description} />
  <FilteredPosts posts={posts} />
  </>

apps/web/src/app/dashboard/page.tsx

@@ -1,7 +1,9 @@
 import { flags } from '@tszhong0411/env'
 import type { Metadata, ResolvingMetadata } from 'next'
+import type { WebPage, WithContext } from 'schema-dts'
 
 import PageTitle from '@/components/page-title'
+import { SITE_TITLE, SITE_URL } from '@/lib/constants'
 
 import Items from './items'
 
@@ -14,6 +16,19 @@ type PageProps = {
  searchParams: Record<string, never>
 }
 
+const jsonLd: WithContext<WebPage> = {
+ '@context': 'https://schema.org',
+ '@type': 'WebPage',
+ name: title,
+ description,
+ url: `${SITE_URL}/dashboard`,
+ isPartOf: {
+ '@type': 'WebSite',
+ name: SITE_TITLE,
+ url: SITE_URL
+ }
+}
+
 export const generateMetadata = async (
  _: PageProps,
  parent: ResolvingMetadata
@@ -44,6 +59,10 @@ export const generateMetadata = async (
 const Page = () => {
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <PageTitle title={title} description={description} />
  {flags.stats ? <Items /> : null}
  </>

apps/web/src/app/guestbook/page.tsx

@@ -1,8 +1,10 @@
 import { flags } from '@tszhong0411/env'
 import type { Metadata, ResolvingMetadata } from 'next'
+import type { WebPage, WithContext } from 'schema-dts'
 
 import PageTitle from '@/components/page-title'
 import { getCurrentUser } from '@/lib/auth'
+import { SITE_TITLE, SITE_URL } from '@/lib/constants'
 
 import Form from './form'
 import Messages from './messages'
@@ -17,6 +19,19 @@ type PageProps = {
  searchParams: Record<string, never>
 }
 
+const jsonLd: WithContext<WebPage> = {
+ '@context': 'https://schema.org',
+ '@type': 'WebPage',
+ name: title,
+ description,
+ url: `${SITE_URL}/guestbook`,
+ isPartOf: {
+ '@type': 'WebSite',
+ name: SITE_TITLE,
+ url: SITE_URL
+ }
+}
+
 export const generateMetadata = async (
  _: PageProps,
  parent: ResolvingMetadata
@@ -51,6 +66,10 @@ const Page = async () => {
 
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <PageTitle title={title} description={description} />
  <div className='mx-auto max-w-lg'>
  <Pinned />

apps/web/src/app/layout.tsx

@@ -13,7 +13,7 @@ import Hello from '@/components/hello'
 import Footer from '@/components/layout/footer'
 import Header from '@/components/layout/header'
 import SignInModal from '@/components/sign-in-modal'
-import { SITE_DESCRIPTION, SITE_NAME, SITE_TITLE, SITE_URL } from '@/lib/constants'
+import { SITE_DESCRIPTION, SITE_KEYWORDS, SITE_NAME, SITE_TITLE, SITE_URL } from '@/lib/constants'
 
 import Providers from './providers'
 
@@ -57,7 +57,7 @@ export const metadata: Metadata = {
  }
  ]
  },
- keywords: ['tszhong0411', 'Next.js', 'React', 'TypeScript', 'Node.js'],
+ keywords: SITE_KEYWORDS,
  creator: 'tszhong0411',
  openGraph: {
  url: SITE_URL,

apps/web/src/app/page.tsx

@@ -1,19 +1,54 @@
 import { allBlogPosts, allProjects } from 'mdx/generated'
 import type { Metadata } from 'next'
+import type { WebSite, WithContext } from 'schema-dts'
 
 import AboutMe from '@/components/home/about-me'
 import GetInTouch from '@/components/home/get-in-touch'
 import Hero from '@/components/home/hero'
 import LatestArticles from '@/components/home/latest-articles'
 import SelectedProjects from '@/components/home/selected-projects'
-import { SITE_URL } from '@/lib/constants'
+import {
+ SITE_DESCRIPTION,
+ SITE_FACEBOOK_URL,
+ SITE_GITHUB_URL,
+ SITE_INSTAGRAM_URL,
+ SITE_KEYWORDS,
+ SITE_NAME,
+ SITE_TITLE,
+ SITE_URL,
+ SITE_X_URL,
+ SITE_YOUTUBE_URL
+} from '@/lib/constants'
 
 export const metadata: Metadata = {
  alternates: {
  canonical: SITE_URL
  }
 }
 
+const jsonLd: WithContext<WebSite> = {
+ '@context': 'https://schema.org',
+ '@type': 'WebSite',
+ name: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ url: SITE_URL,
+ author: {
+ '@type': 'Person',
+ name: SITE_NAME,
+ url: SITE_URL,
+ sameAs: [SITE_FACEBOOK_URL, SITE_INSTAGRAM_URL, SITE_X_URL, SITE_GITHUB_URL, SITE_YOUTUBE_URL]
+ },
+ mainEntityOfPage: {
+ '@type': 'WebPage',
+ '@id': SITE_URL
+ },
+ inLanguage: 'en-US',
+ copyrightYear: new Date().getFullYear(),
+ keywords: SITE_KEYWORDS,
+ dateCreated: '2020-12-05',
+ dateModified: new Date().toISOString()
+}
+
 const Page = () => {
  const posts = allBlogPosts
  const latestPosts = posts
@@ -26,6 +61,10 @@ const Page = () => {
 
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <Hero />
  <SelectedProjects projects={projects} />
  <AboutMe />

apps/web/src/app/projects/[slug]/page.tsx

@@ -2,8 +2,10 @@ import { BlurImage } from '@tszhong0411/ui'
 import { allProjects } from 'mdx/generated'
 import type { Metadata, ResolvingMetadata } from 'next'
 import { notFound } from 'next/navigation'
+import type { SoftwareApplication, WithContext } from 'schema-dts'
 
 import Mdx from '@/components/mdx'
+import { SITE_NAME, SITE_URL } from '@/lib/constants'
 
 import Header from './header'
 
@@ -84,21 +86,43 @@ const Page = (props: PageProps) => {
  notFound()
  }
 
- const { name, body } = project
+ const { name, body, description, github } = project
+
+ const jsonLd: WithContext<SoftwareApplication> = {
+ '@context': 'https://schema.org',
+ '@type': 'SoftwareApplication',
+ name,
+ description,
+ url: `${SITE_URL}/projects/${slug}`,
+ applicationCategory: 'WebApplication',
+ author: {
+ '@type': 'Person',
+ name: SITE_NAME,
+ url: SITE_URL
+ },
+ sameAs: [github],
+ screenshot: `${SITE_URL}/images/projects/${slug}/cover.png`
+ }
 
  return (
- <div className='mx-auto max-w-3xl'>
- <Header {...project} />
- <BlurImage
- src={`/images/projects/${slug}/cover.png`}
- width={1280}
- height={832}
- alt={name}
- className='my-12 rounded-lg'
- lazy={false}
+ <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
  />
- <Mdx content={body} />
- </div>
+ <div className='mx-auto max-w-3xl'>
+ <Header {...project} />
+ <BlurImage
+ src={`/images/projects/${slug}/cover.png`}
+ width={1280}
+ height={832}
+ alt={name}
+ className='my-12 rounded-lg'
+ lazy={false}
+ />
+ <Mdx content={body} />
+ </div>
+ </>
  )
 }
 

apps/web/src/app/projects/page.tsx

@@ -1,8 +1,10 @@
 import { allProjects } from 'mdx/generated'
 import type { Metadata, ResolvingMetadata } from 'next'
+import type { CollectionPage, WithContext } from 'schema-dts'
 
 import PageTitle from '@/components/page-title'
 import ProjectCards from '@/components/project-cards'
+import { SITE_TITLE, SITE_URL } from '@/lib/constants'
 
 const title = 'Projects'
 const description = 'The list of my projects. Everything was made with ❤️.'
@@ -39,11 +41,35 @@ export const generateMetadata = async (
  }
 }
 
+const jsonLd: WithContext<CollectionPage> = {
+ '@context': 'https://schema.org',
+ '@type': 'CollectionPage',
+ name: title,
+ description,
+ url: `${SITE_URL}/projects`,
+ isPartOf: {
+ '@type': 'WebSite',
+ name: SITE_TITLE,
+ url: SITE_URL
+ },
+ hasPart: allProjects.map((project) => ({
+ '@type': 'SoftwareApplication',
+ name: project.name,
+ description: project.description,
+ url: `${SITE_URL}/projects/${project.slug}`,
+ applicationCategory: 'WebApplication'
+ }))
+}
+
 const Page = () => {
  const projects = allProjects
 
  return (
  <>
+ <script
+ type='application/ld+json'
+ dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+ />
  <PageTitle title={title} description={description} />
  <ProjectCards projects={projects} />
  </>